From 711a85c0dafd17aae2c22e1777c8be526bc224de Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Mon, 15 Apr 2024 14:29:46 +0200
Subject: [PATCH 01/20] Set default version to 5.0.0

---
 lib/bitstyles_phoenix/bitstyles.ex   | 16 ++++++++++++----
 scripts/generate_version_showcase.ex |  1 +
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index 3c25aba..ad88db0 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -1,7 +1,7 @@
 defmodule BitstylesPhoenix.Bitstyles do
   @moduledoc false
 
-  @default_version "4.3.0"
+  @default_version "5.0.0"
   @cdn_url "https://cdn.jsdelivr.net/npm/bitstyles"
 
   def cdn_url do
@@ -14,12 +14,20 @@ defmodule BitstylesPhoenix.Bitstyles do
   """
   def classname(name), do: classname(name, version())
 
-  def classname(class, version) when version > "4.3.0" do
+  def classname(class, version) when version > "5.0.0" do
     IO.warn("Version #{version} of bitstyles is not yet supported")
     class
   end
 
-  def classname(class, version) when version >= "4.2.0", do: class
+  def classname(class, version) when version >= "5.0.0" do
+    class
+  end
+
+  def classname(class, version) when version >= "4.3.0" do
+    # TODO
+    mapping = %{}
+    classname(mapping, "5.0.0")
+  end
 
   def classname(class, version) when version >= "4.0.0" do
     mapping =
@@ -28,7 +36,7 @@ defmodule BitstylesPhoenix.Bitstyles do
         _ -> class
       end
 
-    classname(mapping, "4.2.0")
+    classname(mapping, "4.3.0")
   end
 
   def classname(class, version) when version >= "2.0.0" do
diff --git a/scripts/generate_version_showcase.ex b/scripts/generate_version_showcase.ex
index d1c9c20..aee396e 100644
--- a/scripts/generate_version_showcase.ex
+++ b/scripts/generate_version_showcase.ex
@@ -7,6 +7,7 @@ defmodule Scripts.GenerateVersionShowcase do
   @moduledoc "Generates static HTML pages in #{@dir_name} for manually testing bitstyles_phoenix with different bitstyles versions."
 
   @all_supported_bitstyles_versions [
+    "5.0.0",
     "4.3.0",
     "4.2.0",
     "4.1.0",

From da54bc92751bc6aa06319584501ecb17bd7d5846 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Mon, 15 Apr 2024 14:40:41 +0200
Subject: [PATCH 02/20] Fix existing tests

---
 lib/bitstyles_phoenix/bitstyles.ex          | 11 +++---
 lib/bitstyles_phoenix/component/dropdown.ex | 27 +++++++++++++
 lib/bitstyles_phoenix/component/error.ex    | 14 +++++++
 test/bitstyles_phoenix/bitstyles_test.exs   | 44 +++++++++++++++++++--
 4 files changed, 88 insertions(+), 8 deletions(-)

diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index ad88db0..746ed90 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -20,13 +20,14 @@ defmodule BitstylesPhoenix.Bitstyles do
   end
 
   def classname(class, version) when version >= "5.0.0" do
-    class
+    # TODO
+    case class do
+      _ -> class
+    end
   end
 
-  def classname(class, version) when version >= "4.3.0" do
-    # TODO
-    mapping = %{}
-    classname(mapping, "5.0.0")
+  def classname(class, version) when version >= "4.2.0" do
+    classname(class, "5.0.0")
   end
 
   def classname(class, version) when version >= "4.0.0" do
diff --git a/lib/bitstyles_phoenix/component/dropdown.ex b/lib/bitstyles_phoenix/component/dropdown.ex
index dda83c6..34a7f21 100644
--- a/lib/bitstyles_phoenix/component/dropdown.ex
+++ b/lib/bitstyles_phoenix/component/dropdown.ex
@@ -66,6 +66,33 @@ defmodule BitstylesPhoenix.Component.Dropdown do
         ...> """
     ''',
     [
+      "5.0.0": '''
+          """
+          <div class="u-relative">
+            <button type="button" class="a-button a-button--ui">
+              <span class="a-button__label">
+                Select me
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m a-button__icon" focusable="false" height="16" width="16">
+                <use xlink:href="#icon-caret-down">
+                </use>
+              </svg>
+            </button>
+            <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top">
+              <li>
+                <a href="#" class="a-button a-button--menu u-h6">
+                  Option 1
+                </a>
+              </li>
+              <li>
+                <a href="#" class="a-button a-button--menu u-h6">
+                  Option 2
+                </a>
+              </li>
+            </ul>
+          </div>
+          """
+      ''',
       "4.3.0": '''
           """
           <div class="u-relative">
diff --git a/lib/bitstyles_phoenix/component/error.ex b/lib/bitstyles_phoenix/component/error.ex
index 066f824..8835498 100644
--- a/lib/bitstyles_phoenix/component/error.ex
+++ b/lib/bitstyles_phoenix/component/error.ex
@@ -31,6 +31,13 @@ defmodule BitstylesPhoenix.Component.Error do
         ...> <.ui_errors form={@form} field={:name} />
         ...> """
     ''',
+    "5.0.0": '''
+        """
+        <span class="u-fg-warning" phx-feedback-for="user[name]">
+          is too short
+        </span>
+        """
+    ''',
     "4.3.0": '''
         """
         <span class="u-fg-warning" phx-feedback-for="user[name]">
@@ -131,6 +138,13 @@ defmodule BitstylesPhoenix.Component.Error do
         ...> <.ui_error error={{"Foo error", []}} />
         ...> """
     ''',
+    "5.0.0": '''
+        """
+        <span class="u-fg-warning">
+          Foo error
+        </span>
+        """
+    ''',
     "4.3.0": '''
         """
         <span class="u-fg-warning">
diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
index ce3df7c..a6d84a8 100644
--- a/test/bitstyles_phoenix/bitstyles_test.exs
+++ b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -4,13 +4,51 @@ defmodule BitstylesPhoenix.BitstylesTest do
   import ExUnit.CaptureIO
 
   describe "classname/2" do
-    test "version 5.0.0" do
+    test "version 6.0.0" do
       assert Regex.match?(
-               ~r/5.0.0 of bitstyles is not yet supported/,
-               capture_io(:stderr, fn -> classname("u-flex", "5.0.0") end)
+               ~r/6.0.0 of bitstyles is not yet supported/,
+               capture_io(:stderr, fn -> classname("u-flex", "6.0.0") end)
              )
     end
 
+    test "version 5.0.0" do
+      assert classname("u-flex", "5.0.0") == "u-flex"
+      assert classname("u-border-radius-0", "5.0.0") == "u-border-radius-0"
+      assert classname("u-overflow-x-auto", "5.0.0") == "u-overflow-x-auto"
+      assert classname("u-overflow-y-auto", "5.0.0") == "u-overflow-y-auto"
+      assert classname("u-bg-gray-80", "5.0.0") == "u-bg-gray-80"
+      assert classname("u-fg-warning", "5.0.0") == "u-fg-warning"
+      assert classname("u-font-medium", "5.0.0") == "u-font-medium"
+      assert classname("u-line-height-min", "5.0.0") == "u-line-height-min"
+      assert classname("u-text-right", "5.0.0") == "u-text-right"
+      assert classname("u-flex-shrink-0", "5.0.0") == "u-flex-shrink-0"
+      assert classname("u-flex-grow-1", "5.0.0") == "u-flex-grow-1"
+      assert classname("u-flex-wrap", "5.0.0") == "u-flex-wrap"
+      assert classname("u-flex-col", "5.0.0") == "u-flex-col"
+      assert classname("u-grid-cols-3", "5.0.0") == "u-grid-cols-3"
+      assert classname("u-col-span-3", "5.0.0") == "u-col-span-3"
+      assert classname("u-col-start-1", "5.0.0") == "u-col-start-1"
+    end
+
+    test "version 4.3.0" do
+      assert classname("u-flex", "4.3.0") == "u-flex"
+      assert classname("u-border-radius-0", "4.3.0") == "u-border-radius-0"
+      assert classname("u-overflow-x-auto", "4.3.0") == "u-overflow-x-auto"
+      assert classname("u-overflow-y-auto", "4.3.0") == "u-overflow-y-auto"
+      assert classname("u-bg-gray-80", "4.3.0") == "u-bg-gray-80"
+      assert classname("u-fg-warning", "4.3.0") == "u-fg-warning"
+      assert classname("u-font-medium", "4.3.0") == "u-font-medium"
+      assert classname("u-line-height-min", "4.3.0") == "u-line-height-min"
+      assert classname("u-text-right", "4.3.0") == "u-text-right"
+      assert classname("u-flex-shrink-0", "4.3.0") == "u-flex-shrink-0"
+      assert classname("u-flex-grow-1", "4.3.0") == "u-flex-grow-1"
+      assert classname("u-flex-wrap", "4.3.0") == "u-flex-wrap"
+      assert classname("u-flex-col", "4.3.0") == "u-flex-col"
+      assert classname("u-grid-cols-3", "4.3.0") == "u-grid-cols-3"
+      assert classname("u-col-span-3", "4.3.0") == "u-col-span-3"
+      assert classname("u-col-start-1", "4.3.0") == "u-col-start-1"
+    end
+
     test "version 4.2.0" do
       assert classname("u-border-radius-0", "4.2.0") == "u-border-radius-0"
     end

From f6652320cb66fd74699067d96b7ac56f0bb4bfe6 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Tue, 16 Apr 2024 08:11:29 +0200
Subject: [PATCH 03/20] Transform sizing classes

---
 lib/bitstyles_phoenix/bitstyles.ex        | 19 ++++++++++++++-----
 test/bitstyles_phoenix/bitstyles_test.exs | 14 ++++++++++++++
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index 746ed90..137970a 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -20,14 +20,23 @@ defmodule BitstylesPhoenix.Bitstyles do
   end
 
   def classname(class, version) when version >= "5.0.0" do
-    # TODO
-    case class do
-      _ -> class
-    end
+    class
   end
 
   def classname(class, version) when version >= "4.2.0" do
-    classname(class, "5.0.0")
+    sizes_renaming = %{
+      "3xs" => "xxxs",
+      "2xs" => "xxs",
+      "2xl" => "xxl",
+      "3xl" => "xxxl"
+    }
+
+    mapping =
+      Enum.reduce(sizes_renaming, class, fn {new_size, old_size}, acc ->
+        String.replace(acc, "-#{new_size}", "-#{old_size}")
+      end)
+
+    classname(mapping, "5.0.0")
   end
 
   def classname(class, version) when version >= "4.0.0" do
diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
index a6d84a8..24ebd0e 100644
--- a/test/bitstyles_phoenix/bitstyles_test.exs
+++ b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -28,6 +28,13 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-grid-cols-3", "5.0.0") == "u-grid-cols-3"
       assert classname("u-col-span-3", "5.0.0") == "u-col-span-3"
       assert classname("u-col-start-1", "5.0.0") == "u-col-start-1"
+      assert classname("u-margin-2xs", "5.0.0") == "u-margin-2xs"
+      assert classname("u-margin-3xs\@m", "5.0.0") == "u-margin-3xs\@m"
+      assert classname("u-margin-3xs-bottom", "5.0.0") == "u-margin-3xs-bottom"
+      assert classname("u-padding-2xl", "5.0.0") == "u-padding-2xl"
+      assert classname("u-padding-3xl\@l", "5.0.0") == "u-padding-3xl\@l"
+      assert classname("u-margin-3xl-bottom", "5.0.0") == "u-margin-3xl-bottom"
+      assert classname("u-margin-neg-3xl-bottom", "5.0.0") == "u-margin-neg-3xl-bottom"
     end
 
     test "version 4.3.0" do
@@ -47,6 +54,13 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-grid-cols-3", "4.3.0") == "u-grid-cols-3"
       assert classname("u-col-span-3", "4.3.0") == "u-col-span-3"
       assert classname("u-col-start-1", "4.3.0") == "u-col-start-1"
+      assert classname("u-margin-2xs", "4.3.0") == "u-margin-xxs"
+      assert classname("u-margin-3xs\@m", "4.3.0") == "u-margin-xxxs\@m"
+      assert classname("u-margin-3xs-bottom", "4.3.0") == "u-margin-xxxs-bottom"
+      assert classname("u-padding-2xl", "4.3.0") == "u-padding-xxl"
+      assert classname("u-padding-3xl\@l", "4.3.0") == "u-padding-xxxl\@l"
+      assert classname("u-margin-3xl-bottom", "4.3.0") == "u-margin-xxxl-bottom"
+      assert classname("u-margin-neg-3xl-bottom", "4.3.0") == "u-margin-neg-xxxl-bottom"
     end
 
     test "version 4.2.0" do

From a1cf049bcea75e329c1d7c77323e023b751b51c7 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Tue, 16 Apr 2024 08:34:48 +0200
Subject: [PATCH 04/20] placekitten.com does not work anymore

---
 lib/bitstyles_phoenix/component/avatar.ex  | 16 ++++++++--------
 lib/bitstyles_phoenix/component/sidebar.ex |  6 +++---
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/lib/bitstyles_phoenix/component/avatar.ex b/lib/bitstyles_phoenix/component/avatar.ex
index 80e50bc..8615943 100644
--- a/lib/bitstyles_phoenix/component/avatar.ex
+++ b/lib/bitstyles_phoenix/component/avatar.ex
@@ -19,14 +19,14 @@ defmodule BitstylesPhoenix.Component.Avatar do
     '''
         iex> assigns = %{}
         ...> render ~H"""
-        ...> <.ui_avatar src="https://placekitten.com/100/100" alt="Username’s avatar"/>
+        ...> <.ui_avatar src="https://placehold.co/100x100" alt="Username’s avatar"/>
         ...> """
     ''',
     '''
         """
         <div class="u-flex u-items-center">
           <div class="a-avatar">
-            <img height="32" width="32" alt="Username’s avatar" src="https://placekitten.com/100/100"/>
+            <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
           </div>
         </div>
         """
@@ -38,14 +38,14 @@ defmodule BitstylesPhoenix.Component.Avatar do
     '''
         iex> assigns = %{}
         ...> render ~H"""
-        ...> <.ui_avatar src="https://placekitten.com/100/100" class="foo bar" alt="Username’s avatar"/>
+        ...> <.ui_avatar src="https://placehold.co/100x100" class="foo bar" alt="Username’s avatar"/>
         ...> """
     ''',
     '''
         """
         <div class="u-flex u-items-center">
           <div class="a-avatar foo bar">
-            <img height="32" width="32" alt="Username’s avatar" src="https://placekitten.com/100/100"/>
+            <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
           </div>
         </div>
         """
@@ -57,14 +57,14 @@ defmodule BitstylesPhoenix.Component.Avatar do
     '''
         iex> assigns = %{}
         ...> render ~H"""
-        ...> <.ui_avatar size="l" src="https://placekitten.com/100/100" alt="Username’s avatar" height="46" width="46"/>
+        ...> <.ui_avatar size="l" src="https://placehold.co/100x100" alt="Username’s avatar" height="46" width="46"/>
         ...> """
     ''',
     '''
         """
         <div class="u-flex u-items-center">
           <div class="a-avatar a-avatar--l">
-            <img alt="Username’s avatar" height="46" src="https://placekitten.com/100/100" width="46"/>
+            <img alt="Username’s avatar" height="46" src="https://placehold.co/100x100" width="46"/>
           </div>
         </div>
         """
@@ -76,14 +76,14 @@ defmodule BitstylesPhoenix.Component.Avatar do
     '''
         iex> assigns = %{}
         ...> render ~H"""
-        ...> <.ui_avatar src="https://placekitten.com/100/100" alt="Username’s avatar"> Username </.ui_avatar>
+        ...> <.ui_avatar src="https://placehold.co/100x100" alt="Username’s avatar"> Username </.ui_avatar>
         ...> """
     ''',
     '''
         """
         <div class="u-flex u-items-center">
           <div class="a-avatar">
-            <img height="32" width="32" alt="Username’s avatar" src="https://placekitten.com/100/100"/>
+            <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
           </div>
           <span class="u-margin-s-left">
             Username
diff --git a/lib/bitstyles_phoenix/component/sidebar.ex b/lib/bitstyles_phoenix/component/sidebar.ex
index 1316679..0aeeec4 100644
--- a/lib/bitstyles_phoenix/component/sidebar.ex
+++ b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -24,7 +24,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         ...>       <.ui_dropdown variant={["top", "full-width"]}>
         ...>         <:button variant="nav-large">
         ...>           <div class="a-button__icon a-avatar">
-        ...>             <img src="https://placekitten.com/100/150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar" />
+        ...>             <img src="https://placehold.co/100x150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar" />
         ...>           </div>
         ...>           <span class="a-button__label">Jane Dobermann</span>
         ...>         </:button>
@@ -64,7 +64,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                   <div class="u-relative">
                     <button type="button" class="a-button a-button--nav-large">
                       <div class="a-button__icon a-avatar">
-                        <img src="https://placekitten.com/100/150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar"/>
+                        <img src="https://placehold.co/100x150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar"/>
                       </div>
                       <span class="a-button__label">
                         Jane Dobermann
@@ -101,7 +101,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                   <div class="u-relative">
                     <button type="button" class="a-button a-button--nav-large">
                       <div class="a-button__icon a-avatar">
-                        <img src="https://placekitten.com/100/150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar"/>
+                        <img src="https://placehold.co/100x150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar"/>
                       </div>
                       <span class="a-button__label">
                         Jane Dobermann

From 05e60fdd9c750b0a604303d43e97ca7ea32b77fa Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Fri, 19 Apr 2024 12:19:19 +0200
Subject: [PATCH 05/20] Use 5.0.1

---
 lib/bitstyles_phoenix/bitstyles.ex          | 4 ++--
 lib/bitstyles_phoenix/component/dropdown.ex | 2 +-
 lib/bitstyles_phoenix/component/error.ex    | 4 ++--
 scripts/generate_version_showcase.ex        | 3 ++-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index 137970a..266547c 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -1,7 +1,7 @@
 defmodule BitstylesPhoenix.Bitstyles do
   @moduledoc false
 
-  @default_version "5.0.0"
+  @default_version "5.0.1"
   @cdn_url "https://cdn.jsdelivr.net/npm/bitstyles"
 
   def cdn_url do
@@ -14,7 +14,7 @@ defmodule BitstylesPhoenix.Bitstyles do
   """
   def classname(name), do: classname(name, version())
 
-  def classname(class, version) when version > "5.0.0" do
+  def classname(class, version) when version > "5.0.1" do
     IO.warn("Version #{version} of bitstyles is not yet supported")
     class
   end
diff --git a/lib/bitstyles_phoenix/component/dropdown.ex b/lib/bitstyles_phoenix/component/dropdown.ex
index 34a7f21..6d7a66c 100644
--- a/lib/bitstyles_phoenix/component/dropdown.ex
+++ b/lib/bitstyles_phoenix/component/dropdown.ex
@@ -66,7 +66,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
         ...> """
     ''',
     [
-      "5.0.0": '''
+      "5.0.1": '''
           """
           <div class="u-relative">
             <button type="button" class="a-button a-button--ui">
diff --git a/lib/bitstyles_phoenix/component/error.ex b/lib/bitstyles_phoenix/component/error.ex
index 8835498..78dd66c 100644
--- a/lib/bitstyles_phoenix/component/error.ex
+++ b/lib/bitstyles_phoenix/component/error.ex
@@ -31,7 +31,7 @@ defmodule BitstylesPhoenix.Component.Error do
         ...> <.ui_errors form={@form} field={:name} />
         ...> """
     ''',
-    "5.0.0": '''
+    "5.0.1": '''
         """
         <span class="u-fg-warning" phx-feedback-for="user[name]">
           is too short
@@ -138,7 +138,7 @@ defmodule BitstylesPhoenix.Component.Error do
         ...> <.ui_error error={{"Foo error", []}} />
         ...> """
     ''',
-    "5.0.0": '''
+    "5.0.1": '''
         """
         <span class="u-fg-warning">
           Foo error
diff --git a/scripts/generate_version_showcase.ex b/scripts/generate_version_showcase.ex
index aee396e..b2ff6fa 100644
--- a/scripts/generate_version_showcase.ex
+++ b/scripts/generate_version_showcase.ex
@@ -7,7 +7,8 @@ defmodule Scripts.GenerateVersionShowcase do
   @moduledoc "Generates static HTML pages in #{@dir_name} for manually testing bitstyles_phoenix with different bitstyles versions."
 
   @all_supported_bitstyles_versions [
-    "5.0.0",
+    # do not use 5.0.0, it has an incorrect CSS build on the CDN
+    "5.0.1",
     "4.3.0",
     "4.2.0",
     "4.1.0",

From f721cd28a55f946815e1b950bc3a8eb450d97ed1 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Fri, 19 Apr 2024 12:56:12 +0200
Subject: [PATCH 06/20] Transform list reset class

---
 lib/bitstyles_phoenix/bitstyles.ex            | 10 +-
 .../component/breadcrumbs.ex                  | 95 ++++++++++++-------
 test/bitstyles_phoenix/bitstyles_test.exs     |  2 +
 3 files changed, 73 insertions(+), 34 deletions(-)

diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index 266547c..6cacec0 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -31,12 +31,18 @@ defmodule BitstylesPhoenix.Bitstyles do
       "3xl" => "xxxl"
     }
 
-    mapping =
+    class =
       Enum.reduce(sizes_renaming, class, fn {new_size, old_size}, acc ->
         String.replace(acc, "-#{new_size}", "-#{old_size}")
       end)
 
-    classname(mapping, "5.0.0")
+    class =
+      case class do
+        "u-list-none" -> "a-list-reset"
+        class -> class
+      end
+
+    classname(class, "5.0.0")
   end
 
   def classname(class, version) when version >= "4.0.0" do
diff --git a/lib/bitstyles_phoenix/component/breadcrumbs.ex b/lib/bitstyles_phoenix/component/breadcrumbs.ex
index 1744ae5..50942bc 100644
--- a/lib/bitstyles_phoenix/component/breadcrumbs.ex
+++ b/lib/bitstyles_phoenix/component/breadcrumbs.ex
@@ -40,35 +40,66 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
         ...> </.ui_breadcrumbs>
         ...> """
     ''',
-    '''
-        """
-        <nav aria-label="breadcrumbs">
-          <ol class="u-h6 a-list-reset u-flex u-flex-wrap u-items-center">
-            <li class="u-margin-xs-right u-flex u-items-center">
-              Foo
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
-                <use xlink:href="#icon-caret-right">
-                </use>
-              </svg>
-            </li>
-            <li class="u-margin-xs-right u-flex u-items-center">
-              Bar
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
-                <use xlink:href="#icon-caret-right">
-                </use>
-              </svg>
-            </li>
-            <li class="u-margin-xs-right u-flex u-items-center">
-              Baz
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
-                <use xlink:href="#icon-caret-right">
-                </use>
-              </svg>
-            </li>
-          </ol>
-        </nav>
-        """
-    ''',
+    [
+      "5.0.1": '''
+          """
+          <nav aria-label="breadcrumbs">
+            <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center">
+              <li class="u-margin-xs-right u-flex u-items-center">
+                Foo
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                  <use xlink:href="#icon-caret-right">
+                  </use>
+                </svg>
+              </li>
+              <li class="u-margin-xs-right u-flex u-items-center">
+                Bar
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                  <use xlink:href="#icon-caret-right">
+                  </use>
+                </svg>
+              </li>
+              <li class="u-margin-xs-right u-flex u-items-center">
+                Baz
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                  <use xlink:href="#icon-caret-right">
+                  </use>
+                </svg>
+              </li>
+            </ol>
+          </nav>
+          """
+      ''',
+      "4.3.0": '''
+          """
+          <nav aria-label="breadcrumbs">
+            <ol class="u-h6 a-list-reset u-flex u-flex-wrap u-items-center">
+              <li class="u-margin-xs-right u-flex u-items-center">
+                Foo
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                  <use xlink:href="#icon-caret-right">
+                  </use>
+                </svg>
+              </li>
+              <li class="u-margin-xs-right u-flex u-items-center">
+                Bar
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                  <use xlink:href="#icon-caret-right">
+                  </use>
+                </svg>
+              </li>
+              <li class="u-margin-xs-right u-flex u-items-center">
+                Baz
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                  <use xlink:href="#icon-caret-right">
+                  </use>
+                </svg>
+              </li>
+            </ol>
+          </nav>
+          """
+      '''
+    ],
     extra_html: """
     <svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
       <symbol id="icon-caret-right" viewBox="0 0 100 100">
@@ -89,7 +120,7 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
     '''
         """
         <nav aria-label="breadcrumbs">
-          <ol class="u-h6 a-list-reset u-flex u-flex-wrap u-items-center">
+          <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center">
             <li class="u-margin-xs-right u-flex u-items-center">
               Foo
               <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
@@ -139,7 +170,7 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
     '''
         """
         <nav aria-label="breadcrumbs" data-foo="bar">
-          <ol class="u-h6 a-list-reset u-flex u-flex-wrap u-items-center u-fg-warning">
+          <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center u-fg-warning">
             <li class="u-margin-xs-right u-flex u-items-center u-fg-brand-2" data-baz="foo">
               Foo
               <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
@@ -181,7 +212,7 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
 
     ~H"""
       <nav aria-label="breadcrumbs" {@extra}>
-        <ol class={classnames(["u-h6 a-list-reset u-flex u-flex-wrap u-items-center", assigns[:class]])}>
+        <ol class={classnames(["u-h6 u-list-none u-flex u-flex-wrap u-items-center", assigns[:class]])}>
           <%= for item <- (assigns[:item] || assigns[:items]) do %>
             <li
               class={classnames(["u-margin-xs-right u-flex u-items-center", assigns[:item] && item[:class]])}
diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
index 24ebd0e..b58fcc8 100644
--- a/test/bitstyles_phoenix/bitstyles_test.exs
+++ b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -35,6 +35,7 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-padding-3xl\@l", "5.0.0") == "u-padding-3xl\@l"
       assert classname("u-margin-3xl-bottom", "5.0.0") == "u-margin-3xl-bottom"
       assert classname("u-margin-neg-3xl-bottom", "5.0.0") == "u-margin-neg-3xl-bottom"
+      assert classname("u-list-none", "5.0.0") == "u-list-none"
     end
 
     test "version 4.3.0" do
@@ -61,6 +62,7 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-padding-3xl\@l", "4.3.0") == "u-padding-xxxl\@l"
       assert classname("u-margin-3xl-bottom", "4.3.0") == "u-margin-xxxl-bottom"
       assert classname("u-margin-neg-3xl-bottom", "4.3.0") == "u-margin-neg-xxxl-bottom"
+      assert classname("u-list-none", "4.3.0") == "a-list-reset"
     end
 
     test "version 4.2.0" do

From 691714a5097bc7e02bfb96c21a77eefd6b68c655 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Tue, 25 Jun 2024 15:24:24 +0200
Subject: [PATCH 07/20] Fix default badge variant

---
 lib/bitstyles_phoenix.ex                   |  2 +-
 lib/bitstyles_phoenix/bitstyles.ex         |  1 +
 lib/bitstyles_phoenix/component/badge.ex   | 13 ++++++++++---
 lib/bitstyles_phoenix/component/heading.ex |  4 ++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/lib/bitstyles_phoenix.ex b/lib/bitstyles_phoenix.ex
index 1f24932..ea62c15 100644
--- a/lib/bitstyles_phoenix.ex
+++ b/lib/bitstyles_phoenix.ex
@@ -22,7 +22,7 @@ defmodule BitstylesPhoenix do
 
   ```elixir
   <.ui_badge>A nice badge</.ui_badge>
-  # => <span class="a-badge u-h6 u-font-medium a-badge--gray">A nice badge</span>
+  # => <span class="a-badge u-h6 u-font-medium a-badge--text">A nice badge</span>
   ```
 
   ```elixir
diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index 6cacec0..26a6b07 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -39,6 +39,7 @@ defmodule BitstylesPhoenix.Bitstyles do
     class =
       case class do
         "u-list-none" -> "a-list-reset"
+        "a-badge--text" -> "a-badge--gray"
         class -> class
       end
 
diff --git a/lib/bitstyles_phoenix/component/badge.ex b/lib/bitstyles_phoenix/component/badge.ex
index 8d2ec9d..e49e871 100644
--- a/lib/bitstyles_phoenix/component/badge.ex
+++ b/lib/bitstyles_phoenix/component/badge.ex
@@ -27,7 +27,14 @@ defmodule BitstylesPhoenix.Component.Badge do
         ...> </.ui_badge>
         ...> """
     ''',
-    '''
+    "5.0.1": '''
+        """
+        <span class="a-badge u-h6 u-font-medium a-badge--text">
+          published
+        </span>
+        """
+    ''',
+    "4.3.0": '''
         """
         <span class="a-badge u-h6 u-font-medium a-badge--gray">
           published
@@ -105,7 +112,7 @@ defmodule BitstylesPhoenix.Component.Badge do
     ''',
     '''
         """
-        <span class="a-badge u-h6 u-font-medium a-badge--gray extra-class" data-foo="bar">
+        <span class="a-badge u-h6 u-font-medium a-badge--text extra-class" data-foo="bar">
           published
         </span>
         """
@@ -113,7 +120,7 @@ defmodule BitstylesPhoenix.Component.Badge do
   )
 
   def ui_badge(assigns) do
-    variant = assigns[:variant] || "gray"
+    variant = assigns[:variant] || "text"
 
     class =
       classnames([
diff --git a/lib/bitstyles_phoenix/component/heading.ex b/lib/bitstyles_phoenix/component/heading.ex
index 2899685..61aa788 100644
--- a/lib/bitstyles_phoenix/component/heading.ex
+++ b/lib/bitstyles_phoenix/component/heading.ex
@@ -80,7 +80,7 @@ defmodule BitstylesPhoenix.Component.Heading do
               Title
             </h1>
             <div class="u-flex-shrink-0 u-margin-m-bottom">
-              <span class="a-badge u-h6 u-font-medium a-badge--gray">
+              <span class="a-badge u-h6 u-font-medium a-badge--text">
                 Published
               </span>
             </div>
@@ -233,7 +233,7 @@ defmodule BitstylesPhoenix.Component.Heading do
             <h3 class="u-margin-0 u-margin-m-right u-break-text extra">
               Section title
             </h3>
-            <span class="a-badge u-h6 u-font-medium a-badge--gray">
+            <span class="a-badge u-h6 u-font-medium a-badge--text">
               Published
             </span>
           </div>

From 0941c089c753b45b4f815c9c424532eb155bfae4 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Mon, 1 Jul 2024 12:57:10 +0200
Subject: [PATCH 08/20] Fix u-gap-m is missing

---
 lib/bitstyles_phoenix/bitstyles.ex                  |  1 +
 lib/bitstyles_phoenix/component/description_list.ex | 12 ++++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index 26a6b07..6e92ab5 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -40,6 +40,7 @@ defmodule BitstylesPhoenix.Bitstyles do
       case class do
         "u-list-none" -> "a-list-reset"
         "a-badge--text" -> "a-badge--gray"
+        "u-gap-l" -> "u-gap-m"
         class -> class
       end
 
diff --git a/lib/bitstyles_phoenix/component/description_list.ex b/lib/bitstyles_phoenix/component/description_list.ex
index 62be529..44920f8 100644
--- a/lib/bitstyles_phoenix/component/description_list.ex
+++ b/lib/bitstyles_phoenix/component/description_list.ex
@@ -19,7 +19,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
     '''
         """
         <dl class="a-dl">
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-m u-padding-m-y u-padding-m@m u-items-baseline">
+          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
             <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
               Length
             </dt>
@@ -27,7 +27,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
               8
             </dd>
           </div>
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-m u-padding-m-y u-padding-m@m u-items-baseline">
+          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
             <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
               Inserted at
             </dt>
@@ -63,7 +63,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
     '''
         """
         <dl class="a-dl extra" data-foo="baz">
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-m u-padding-m-y u-padding-m@m u-items-baseline u-fg-brand-2">
+          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline u-fg-brand-2">
             <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
               Length
             </dt>
@@ -71,7 +71,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
               8
             </dd>
           </div>
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-m u-padding-m-y u-padding-m@m u-items-baseline">
+          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
             <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
               Some
             </dt>
@@ -79,7 +79,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
               Tag
             </dd>
           </div>
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-m u-padding-m-y u-padding-m@m u-items-baseline">
+          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
             <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
               <pre>
                 Tag
@@ -136,7 +136,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
     assigns = assign(assigns, extra: extra)
 
     ~H"""
-      <div class={classnames(["a-dl__item u-grid@m u-grid-cols-3 u-gap-m u-padding-m-y u-padding-m@m u-items-baseline u-items-baseline", assigns[:class]])} {@extra}>
+      <div class={classnames(["a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline u-items-baseline", assigns[:class]])} {@extra}>
         <%= if assigns[:label] do %>
           <.ui_dt><%= @label %></.ui_dt>
           <.ui_dd><%= assigns[:value] || render_slot(@inner_block) %></.ui_dd>

From d6cdae33b463fce16ca65145458d91e041529597 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Mon, 1 Jul 2024 13:32:53 +0200
Subject: [PATCH 09/20] Fix fg and bg colors

---
 lib/bitstyles_phoenix/alpine3/sidebar.ex      |  4 ++--
 lib/bitstyles_phoenix/bitstyles.ex            |  4 ++++
 .../component/breadcrumbs.ex                  | 20 +++++++++----------
 .../component/description_list.ex             | 12 +++++------
 lib/bitstyles_phoenix/component/sidebar.ex    | 16 +++++++--------
 5 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/lib/bitstyles_phoenix/alpine3/sidebar.ex b/lib/bitstyles_phoenix/alpine3/sidebar.ex
index 328554f..f65749e 100644
--- a/lib/bitstyles_phoenix/alpine3/sidebar.ex
+++ b/lib/bitstyles_phoenix/alpine3/sidebar.ex
@@ -54,7 +54,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
         <div class="u-flex u-height-100vh" x-data="{ sidebarOpen: false }">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-80 u-fg-gray-30">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
                 <a href="#" class="u-padding-l">
                   <img src="assets/logo.svg" aria-hidden="true" width="100"/>
                   <span class="u-sr-only">
@@ -74,7 +74,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                   </li>
                 </ul>
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-80 u-fg-gray-30" @click.away="sidebarOpen = false" id="sidebar-small" x-cloak="x-cloak" x-show="sidebarOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light" @click.away="sidebarOpen = false" id="sidebar-small" x-cloak="x-cloak" x-show="sidebarOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
                 <div class="u-flex">
                   <a href="#" class="u-flex-grow-1 u-padding-l">
                     <img src="assets/logo.svg" aria-hidden="true" width="100"/>
diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index 6e92ab5..92679a2 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -41,6 +41,10 @@ defmodule BitstylesPhoenix.Bitstyles do
         "u-list-none" -> "a-list-reset"
         "a-badge--text" -> "a-badge--gray"
         "u-gap-l" -> "u-gap-m"
+        "u-fg-text-light" -> "u-fg-gray-30"
+        "u-fg-gray-light" -> "u-fg-gray-30"
+        "u-fg-text" -> "u-fg-gray-50"
+        "u-bg-gray-darker" -> "u-bg-gray-80"
         class -> class
       end
 
diff --git a/lib/bitstyles_phoenix/component/breadcrumbs.ex b/lib/bitstyles_phoenix/component/breadcrumbs.ex
index 50942bc..48222b3 100644
--- a/lib/bitstyles_phoenix/component/breadcrumbs.ex
+++ b/lib/bitstyles_phoenix/component/breadcrumbs.ex
@@ -47,21 +47,21 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
             <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center">
               <li class="u-margin-xs-right u-flex u-items-center">
                 Foo
-                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-caret-right">
                   </use>
                 </svg>
               </li>
               <li class="u-margin-xs-right u-flex u-items-center">
                 Bar
-                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-caret-right">
                   </use>
                 </svg>
               </li>
               <li class="u-margin-xs-right u-flex u-items-center">
                 Baz
-                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-caret-right">
                   </use>
                 </svg>
@@ -123,21 +123,21 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
           <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center">
             <li class="u-margin-xs-right u-flex u-items-center">
               Foo
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Bar
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Baz
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
@@ -173,21 +173,21 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
           <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center u-fg-warning">
             <li class="u-margin-xs-right u-flex u-items-center u-fg-brand-2" data-baz="foo">
               Foo
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Bar
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Baz
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
@@ -219,7 +219,7 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
               {assigns[:item] && assigns_to_attributes(item, [:class]) || []}
             >
               <%= if assigns[:item], do: render_slot(item), else: item %>
-              <.ui_icon name="caret-right" size="m" class={classnames("u-fg-gray-30 u-margin-xs-left")} {@icon_extra} />
+              <.ui_icon name="caret-right" size="m" class={classnames("u-fg-text-light u-margin-xs-left")} {@icon_extra} />
             </li>
           <% end %>
         </ol>
diff --git a/lib/bitstyles_phoenix/component/description_list.ex b/lib/bitstyles_phoenix/component/description_list.ex
index 44920f8..1489bf9 100644
--- a/lib/bitstyles_phoenix/component/description_list.ex
+++ b/lib/bitstyles_phoenix/component/description_list.ex
@@ -20,7 +20,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
         """
         <dl class="a-dl">
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
               Length
             </dt>
             <dd class="u-col-span-2">
@@ -28,7 +28,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
               Inserted at
             </dt>
             <dd class="u-col-span-2">
@@ -64,7 +64,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
         """
         <dl class="a-dl extra" data-foo="baz">
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline u-fg-brand-2">
-            <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
               Length
             </dt>
             <dd class="u-col-span-2">
@@ -72,7 +72,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
+            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
               Some
             </dt>
             <dd class="u-col-span-2 u-fg-brand-1" data-foo="bar">
@@ -80,7 +80,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
               <pre>
                 Tag
               </pre>
@@ -162,7 +162,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
     assigns = assign(assigns, extra: extra)
 
     ~H"""
-    <dt class={classnames(["u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s", assigns[:class]])} {@extra}>
+    <dt class={classnames(["u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s", assigns[:class]])} {@extra}>
       <%= render_slot(@inner_block) %>
     </dt>
     """
diff --git a/lib/bitstyles_phoenix/component/sidebar.ex b/lib/bitstyles_phoenix/component/sidebar.ex
index 0aeeec4..decddd8 100644
--- a/lib/bitstyles_phoenix/component/sidebar.ex
+++ b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -43,7 +43,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         <div class="u-flex u-height-100vh">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-80 u-fg-gray-30">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
                 Large header
                 <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-bottom u-margin-xs-bottom">
                   Menu
@@ -80,7 +80,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                   </div>
                 </div>
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-80 u-fg-gray-30">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light">
                 Small header
                 <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-bottom u-margin-xs-bottom">
                   Menu
@@ -207,13 +207,13 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         <div class="u-flex u-height-100vh">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-80 u-fg-gray-30">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
                 Large header
                 <div>
                   Sidebar
                 </div>
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-80 u-fg-gray-30">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light">
                 Small header
                 <div>
                   Sidebar
@@ -247,9 +247,9 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         <div class="u-flex u-height-100vh">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-80 u-fg-gray-30">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-80 u-fg-gray-30">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light">
               </div>
             </nav>
           </header>
@@ -264,8 +264,8 @@ defmodule BitstylesPhoenix.Component.Sidebar do
     transparent: false
   )
 
-  @default_bg "gray-80"
-  @default_fg "gray-30"
+  @default_bg "gray-darker"
+  @default_fg "text-light"
   @large_classes "u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col"
   @small_classes "o-sidebar--small u-flex u-flex-col u-hidden@l"
 

From 86ce28346cd5ff7d73006b61a279c9c0e15467d5 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Mon, 1 Jul 2024 14:59:38 +0200
Subject: [PATCH 10/20] Add color and variant to button

---
 lib/bitstyles_phoenix/component/button.ex     | 197 ++++++++++++++----
 .../component/button_test.exs                 |  23 ++
 2 files changed, 177 insertions(+), 43 deletions(-)

diff --git a/lib/bitstyles_phoenix/component/button.ex b/lib/bitstyles_phoenix/component/button.ex
index 26802b6..e11734a 100644
--- a/lib/bitstyles_phoenix/component/button.ex
+++ b/lib/bitstyles_phoenix/component/button.ex
@@ -1,5 +1,6 @@
 defmodule BitstylesPhoenix.Component.Button do
   use BitstylesPhoenix.Component
+  alias BitstylesPhoenix.Bitstyles
 
   @moduledoc """
   The button component.
@@ -12,7 +13,9 @@ defmodule BitstylesPhoenix.Component.Button do
   @doc """
   Renders anchor or button elements that look like a button — using the `a-button` classes.
   - `href`, `navigate`, `patch` - if there’s one of these, you’ll get an anchor element, otherwise a button element. (See Phoenix.Component.link/1)
-  - `variant` - specifies which visual variant of button you want, from those available in the CSS classes e.g. `ui`, `danger`
+  - `color` - specifies the color of the button, e.g `secondary`, `transparent`. Leave empty for default color. Introduced in Bitstyles 5.0.0.
+  - `shape` - specifies the color of the button, e.g `square`, `small`. Leave empty for default color. Introduced in Bitstyles 5.0.0.
+  - `variant` - specifies which visual variant of button you want, from those available in the CSS classes e.g. `ui`, `danger`. Deprecated in favor of `color` and `shape` in Bitstyles 5.0.0.
   - `class` - Extra classes to pass to the badge. See `BitstylesPhoenix.Helper.classnames/1` for usage.
   - `icon` - An icon name as string or a tuple with `{icon_name, icon_opts}` which is passed to `BitstylesPhoenix.Component.Icon.ui_icon/1` as
     attributes. Additionally it is possible to pass `after: true` to the icon_opts, to make the icon appear after the button label instead of in
@@ -50,14 +53,14 @@ defmodule BitstylesPhoenix.Component.Button do
     '''
         iex> assigns = %{}
         ...> render ~H"""
-        ...> <.ui_button href="/" variant="ui">
+        ...> <.ui_button href="/">
         ...>   Publish
         ...> </.ui_button>
         ...> """
     ''',
     '''
         """
-        <a href="/" class="a-button a-button--ui">
+        <a href="/" class="a-button">
           Publish
         </a>
         """
@@ -69,14 +72,14 @@ defmodule BitstylesPhoenix.Component.Button do
     '''
         iex> assigns = %{}
         ...> render ~H"""
-        ...> <.ui_button href="/" variant="ui" disabled>
+        ...> <.ui_button href="/" disabled>
         ...>   Publish
         ...> </.ui_button>
         ...> """
     ''',
     '''
         """
-        <button type="button" class="a-button a-button--ui" disabled="disabled">
+        <button type="button" class="a-button" disabled="disabled">
           Publish
         </button>
         """
@@ -122,18 +125,37 @@ defmodule BitstylesPhoenix.Component.Button do
   )
 
   story(
-    "UI button",
+    "Secondary button",
     '''
         iex> assigns = %{}
         ...> render ~H"""
-        ...> <.ui_button type="submit" variant={:ui}>
+        ...> <.ui_button type="submit" color={:secondary}>
         ...>   Save
         ...> </.ui_button>
         ...> """
     ''',
     '''
         """
-        <button type="submit" class="a-button a-button--ui">
+        <button type="submit" class="a-button a-button--secondary">
+          Save
+        </button>
+        """
+    '''
+  )
+
+  story(
+    "Small button",
+    '''
+        iex> assigns = %{}
+        ...> render ~H"""
+        ...> <.ui_button type="submit" shape={:small}>
+        ...>   Save
+        ...> </.ui_button>
+        ...> """
+    ''',
+    '''
+        """
+        <button type="submit" class="a-button a-button--small">
           Save
         </button>
         """
@@ -145,7 +167,7 @@ defmodule BitstylesPhoenix.Component.Button do
     '''
         iex> assigns = %{}
         ...> render ~H"""
-        ...> <.ui_button type="submit" variant={:danger}>
+        ...> <.ui_button type="submit" color={:danger}>
         ...>   Save
         ...> </.ui_button>
         ...> """
@@ -262,9 +284,27 @@ defmodule BitstylesPhoenix.Component.Button do
   )
 
   def ui_button(assigns) do
-    extra = assigns_to_attributes(assigns, [:icon, :class, :variant])
+    extra = assigns_to_attributes(assigns, [:icon, :class, :color, :shape, :variant])
+
+    assigns =
+      if Bitstyles.version() >= "5.0.0" && assigns[:variant] do
+        IO.warn("Attribute `variant` is deprecated in ui_button/1! Change to `color` and `shape`")
+
+        assigns
+        |> assign(:color, variant_to_color(assigns[:variant]))
+        |> assign(:shape, variant_to_shape(assigns[:variant]))
+      else
+        assigns
+      end
+
+    classes =
+      if Bitstyles.version() >= "5.0.0" do
+        color_and_shape_classes(assigns[:color], assigns[:shape])
+      else
+        variant_classes(assigns[:variant])
+      end
 
-    class = classnames(["a-button"] ++ variant_classes(assigns[:variant]) ++ [assigns[:class]])
+    class = classnames(["a-button"] ++ classes ++ [assigns[:class]])
 
     assigns =
       assigns
@@ -317,6 +357,27 @@ defmodule BitstylesPhoenix.Component.Button do
     """
   end
 
+  defp variant_to_color("danger"), do: "danger"
+  defp variant_to_color("icon-reversed"), do: "transparent"
+  defp variant_to_color("icon"), do: "secondary"
+  defp variant_to_color("nav-large"), do: "transparent"
+  defp variant_to_color("nav"), do: "transparent"
+  defp variant_to_color("tab"), do: "tab"
+  defp variant_to_color("ui"), do: "secondary"
+  defp variant_to_color(_), do: ""
+
+  defp variant_to_shape("icon-reversed"), do: "square"
+  defp variant_to_shape("icon"), do: "square"
+  defp variant_to_shape("small"), do: "small"
+  defp variant_to_shape("tab"), do: "tab"
+  defp variant_to_shape(_), do: ""
+
+  defp color_and_shape_classes(color, shape) do
+    [color, shape]
+    |> Enum.filter(&(&1 not in ["", nil]))
+    |> Enum.map(&"a-button--#{&1}")
+  end
+
   defp variant_classes(nil), do: []
 
   defp variant_classes(variant) when is_binary(variant) or is_atom(variant),
@@ -368,19 +429,34 @@ defmodule BitstylesPhoenix.Component.Button do
         ...> <.ui_icon_button icon="plus" label="Add" href="#"/>
         ...> """
     ''',
-    '''
-        """
-        <a href="#" class="a-button a-button--icon" title="Add">
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
-            <use xlink:href="#icon-plus">
-            </use>
-          </svg>
-          <span class="u-sr-only">
-            Add
-          </span>
-        </a>
-        """
-    ''',
+    [
+      "5.0.1": '''
+          """
+          <a href="#" class="a-button a-button--square" title="Add">
+            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
+              <use xlink:href="#icon-plus">
+              </use>
+            </svg>
+            <span class="u-sr-only">
+              Add
+            </span>
+          </a>
+          """
+      ''',
+      "4.3.0": '''
+          """
+          <a href="#" class="a-button a-button--icon" title="Add">
+            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
+              <use xlink:href="#icon-plus">
+              </use>
+            </svg>
+            <span class="u-sr-only">
+              Add
+            </span>
+          </a>
+          """
+      '''
+    ],
     extra_html: """
     <svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
       <symbol id="icon-plus" viewBox="0 0 100 100">
@@ -400,7 +476,7 @@ defmodule BitstylesPhoenix.Component.Button do
     ''',
     '''
         """
-        <button type="button" class="a-button a-button--icon foo" title="Delete">
+        <button type="button" class="a-button a-button--square foo" title="Delete">
           <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--xl" focusable="false" height="16" width="16">
             <use xlink:href="assets/icons.svg#icon-bin">
             </use>
@@ -421,19 +497,34 @@ defmodule BitstylesPhoenix.Component.Button do
         ...> <.ui_icon_button icon="plus" label="Show" href="#" reversed />
         ...> """
     ''',
-    '''
-        """
-        <a href="#" class="a-button a-button--icon a-button--icon-reversed" title="Show">
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
-            <use xlink:href="#icon-plus">
-            </use>
-          </svg>
-          <span class="u-sr-only">
-            Show
-          </span>
-        </a>
-        """
-    ''',
+    [
+      "5.0.1": '''
+          """
+          <a href="#" class="a-button a-button--square" data-theme="dark" title="Show">
+            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
+              <use xlink:href="#icon-plus">
+              </use>
+            </svg>
+            <span class="u-sr-only">
+              Show
+            </span>
+          </a>
+          """
+      ''',
+      "4.3.0": '''
+          """
+          <a href="#" class="a-button a-button--icon a-button--icon-reversed" title="Show">
+            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
+              <use xlink:href="#icon-plus">
+              </use>
+            </svg>
+            <span class="u-sr-only">
+              Show
+            </span>
+          </a>
+          """
+      '''
+    ],
     extra_html: """
     <svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
       <symbol id="icon-plus" viewBox="0 0 100 100">
@@ -444,7 +535,22 @@ defmodule BitstylesPhoenix.Component.Button do
   )
 
   def ui_icon_button(assigns) do
-    extra = assigns_to_attributes(assigns, [:icon, :label, :reversed, :variant, :title])
+    extra = assigns_to_attributes(assigns, [:icon, :label, :reversed, :color, :title])
+
+    extra =
+      if Bitstyles.version() >= "5.0.0" do
+        if assigns[:reversed] do
+          Keyword.put_new(extra, :"data-theme", "dark")
+        else
+          extra
+        end
+      else
+        if assigns[:reversed] do
+          Keyword.put_new(extra, :variant, ["icon", "icon-reversed"])
+        else
+          Keyword.put_new(extra, :variant, ["icon"])
+        end
+      end
 
     {icon, icon_opts} =
       case assigns.icon do
@@ -452,12 +558,17 @@ defmodule BitstylesPhoenix.Component.Button do
         icon -> {icon, []}
       end
 
-    icon_reversed = if assigns[:reversed], do: ["icon-reversed"], else: []
-    variant = [:icon] ++ icon_reversed ++ List.wrap(assigns[:variant])
-    assigns = assign(assigns, extra: extra, icon: icon, icon_opts: icon_opts, variant: variant)
+    assigns =
+      assign(assigns,
+        extra: extra,
+        icon: icon,
+        icon_opts: icon_opts,
+        color: assigns[:color],
+        icon_after: assigns[:reversed]
+      )
 
     ~H"""
-    <.ui_button variant={@variant} title={assigns[:title] || @label} {@extra}>
+    <.ui_button shape={:square} color={@color} title={assigns[:title] || @label} {@extra}>
       <.ui_icon name={@icon} {@icon_opts}/>
       <span class={classnames("u-sr-only")}><%= @label %></span>
     </.ui_button>
diff --git a/test/bitstyles_phoenix/component/button_test.exs b/test/bitstyles_phoenix/component/button_test.exs
index e757446..6906d9b 100644
--- a/test/bitstyles_phoenix/component/button_test.exs
+++ b/test/bitstyles_phoenix/component/button_test.exs
@@ -26,5 +26,28 @@ defmodule BitstylesPhoenix.Component.ButtonTest do
 
       assert String.contains?(warning, "deprecated")
     end
+
+    test "deprecate :variant" do
+      warning =
+        ExUnit.CaptureIO.capture_io(:stderr, fn ->
+          assigns = %{}
+
+          result =
+            render(~H"""
+            <.ui_button variant="ui">
+              Show
+            </.ui_button>
+            """)
+
+          assert result ==
+                   """
+                   <button type="button" class="a-button a-button--secondary">
+                     Show
+                   </button>
+                   """
+        end)
+
+      assert String.contains?(warning, "deprecated")
+    end
   end
 end

From 4e8bf53cd39d806f171430e5a8b9bf4b7ce02091 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Mon, 1 Jul 2024 15:40:49 +0200
Subject: [PATCH 11/20] Deal with buttons in dropdown

---
 lib/bitstyles_phoenix/alpine3/dropdown.ex   | 12 ++--
 lib/bitstyles_phoenix/alpine3/sidebar.ex    | 16 +++---
 lib/bitstyles_phoenix/component/dropdown.ex | 64 +++++++++++++--------
 lib/bitstyles_phoenix/component/heading.ex  |  8 +--
 lib/bitstyles_phoenix/component/sidebar.ex  | 18 +++---
 lib/bitstyles_phoenix/component/tabs.ex     |  2 +-
 6 files changed, 69 insertions(+), 51 deletions(-)

diff --git a/lib/bitstyles_phoenix/alpine3/dropdown.ex b/lib/bitstyles_phoenix/alpine3/dropdown.ex
index 5e8ac50..fe1c3cc 100644
--- a/lib/bitstyles_phoenix/alpine3/dropdown.ex
+++ b/lib/bitstyles_phoenix/alpine3/dropdown.ex
@@ -47,7 +47,7 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
     '''
         """
         <div class="u-relative" x-data="{ dropdownOpen: false }">
-          <button type="button" @click="dropdownOpen = true" class="a-button a-button--ui">
+          <button type="button" @click="dropdownOpen = true" class="a-button a-button--secondary">
             <span class="a-button__label">
               Select me
             </span>
@@ -58,12 +58,12 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
           </button>
           <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top" @click.away="dropdownOpen = false" x-cloak="x-cloak" x-show="dropdownOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
             <li>
-              <a href="#" class="a-button a-button--menu u-h6">
+              <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 1
               </a>
             </li>
             <li>
-              <a href="#" class="a-button a-button--menu u-h6">
+              <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 2
               </a>
             </li>
@@ -103,7 +103,7 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
     '''
         """
         <div class="u-relative" x-data="{ myOwnDropDown: false }">
-          <button type="button" @click="myOwnDropDown = true" class="a-button a-button--ui">
+          <button type="button" @click="myOwnDropDown = true" class="a-button a-button--secondary">
             <span class="a-button__label">
               Select me
             </span>
@@ -114,12 +114,12 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
           </button>
           <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top" @click.away="myOwnDropDown = false" x-cloak="x-cloak" x-show="myOwnDropDown" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
             <li>
-              <a href="#" class="a-button a-button--menu u-h6">
+              <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 1
               </a>
             </li>
             <li>
-              <a href="#" class="a-button a-button--menu u-h6">
+              <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 2
               </a>
             </li>
diff --git a/lib/bitstyles_phoenix/alpine3/sidebar.ex b/lib/bitstyles_phoenix/alpine3/sidebar.ex
index f65749e..c2ae0e5 100644
--- a/lib/bitstyles_phoenix/alpine3/sidebar.ex
+++ b/lib/bitstyles_phoenix/alpine3/sidebar.ex
@@ -36,8 +36,8 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
         ...>   </:small_sidebar>
         ...>   <:sidebar_content>
         ...>     <.ui_sidebar_nav>
-        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" variant="nav">Menu item #1</.ui_button></.ui_sidebar_nav_item>
-        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" variant="nav">Menu item #2</.ui_button></.ui_sidebar_nav_item>
+        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" color="transparent">Menu item #1</.ui_button></.ui_sidebar_nav_item>
+        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" color="transparent">Menu item #2</.ui_button></.ui_sidebar_nav_item>
         ...>     </.ui_sidebar_nav>
         ...>   </:sidebar_content>
         ...>   <:main :let={s} class="u-margin-s-top">
@@ -63,12 +63,12 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                 </a>
                 <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #1
                     </a>
                   </li>
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #2
                     </a>
                   </li>
@@ -83,7 +83,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                     </span>
                   </a>
                   <div>
-                    <button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-controls="sidebar-small" class="a-button a-button--icon a-button--icon-reversed" title="Close">
+                    <button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-controls="sidebar-small" class="a-button a-button--square" data-theme="dark" title="Close">
                       <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
                         <use xlink:href="#icon-cross">
                         </use>
@@ -96,12 +96,12 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                 </div>
                 <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #1
                     </a>
                   </li>
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #2
                     </a>
                   </li>
@@ -111,7 +111,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
           </header>
           <main class="u-flex-grow-1 u-overflow-y-auto u-margin-s-top">
             <div class="a-content flex">
-              <button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = true" aria-controls="sidebar-small" class="a-button a-button--icon u-hidden@l u-margin-s-right" title="Open sidebar">
+              <button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = true" aria-controls="sidebar-small" class="a-button a-button--square u-hidden@l u-margin-s-right" title="Open sidebar">
                 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-hamburger">
                   </use>
diff --git a/lib/bitstyles_phoenix/component/dropdown.ex b/lib/bitstyles_phoenix/component/dropdown.ex
index 6d7a66c..379a207 100644
--- a/lib/bitstyles_phoenix/component/dropdown.ex
+++ b/lib/bitstyles_phoenix/component/dropdown.ex
@@ -2,6 +2,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
   use BitstylesPhoenix.Component
 
   import BitstylesPhoenix.Component.Button
+  alias BitstylesPhoenix.Bitstyles
 
   @moduledoc """
   The dropdown component without any JS.
@@ -69,7 +70,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
       "5.0.1": '''
           """
           <div class="u-relative">
-            <button type="button" class="a-button a-button--ui">
+            <button type="button" class="a-button a-button--secondary">
               <span class="a-button__label">
                 Select me
               </span>
@@ -80,12 +81,12 @@ defmodule BitstylesPhoenix.Component.Dropdown do
             </button>
             <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top">
               <li>
-                <a href="#" class="a-button a-button--menu u-h6">
+                <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 1
                 </a>
               </li>
               <li>
-                <a href="#" class="a-button a-button--menu u-h6">
+                <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 2
                 </a>
               </li>
@@ -158,14 +159,14 @@ defmodule BitstylesPhoenix.Component.Dropdown do
   )
 
   story(
-    "Dropdown with menu variant top",
+    "Dropdown with menu variant top, primary button",
     '''
         iex> assigns = %{}
         ...> render ~H"""
         ...> <div style="min-height: 150px;" class="u-flex u-flex-col">
         ...>   <div class="u-flex-grow-1"></div>
         ...>   <.ui_dropdown variant={:top}>
-        ...>     <:button label="Select me"/>
+        ...>     <:button color={} label="Select me"/>
         ...>     <:menu>
         ...>       <.ui_dropdown_option href="#" class="u-h6">
         ...>         Option 1
@@ -184,7 +185,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
           <div class="u-flex-grow-1">
           </div>
           <div class="u-relative">
-            <button type="button" class="a-button a-button--ui">
+            <button type="button" class="a-button">
               <span class="a-button__label">
                 Select me
               </span>
@@ -195,12 +196,12 @@ defmodule BitstylesPhoenix.Component.Dropdown do
             </button>
             <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top u-margin-s-bottom">
               <li>
-                <a href="#" class="a-button a-button--menu u-h6">
+                <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 1
                 </a>
               </li>
               <li>
-                <a href="#" class="a-button a-button--menu u-h6">
+                <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 2
                 </a>
               </li>
@@ -239,7 +240,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
     '''
         """
         <div class="u-relative u-flex u-justify-end">
-          <button type="button" class="a-button a-button--ui">
+          <button type="button" class="a-button a-button--secondary">
             <span class="a-button__label">
               Select me
             </span>
@@ -250,12 +251,12 @@ defmodule BitstylesPhoenix.Component.Dropdown do
           </button>
           <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--right u-margin-s-top">
             <li>
-              <a href="#" class="a-button a-button--menu">
+              <a href="#" class="a-button a-button--transparent a-button--menu">
                 Option 1
               </a>
             </li>
             <li>
-              <a href="#" class="a-button a-button--menu">
+              <a href="#" class="a-button a-button--transparent a-button--menu">
                 Option 2
               </a>
             </li>
@@ -300,7 +301,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
           <div class="u-flex-grow-1">
           </div>
           <div class="u-relative u-flex u-justify-end">
-            <button type="button" class="a-button a-button--ui">
+            <button type="button" class="a-button a-button--secondary">
               <span class="a-button__label">
                 Select me
               </span>
@@ -311,12 +312,12 @@ defmodule BitstylesPhoenix.Component.Dropdown do
             </button>
             <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top a-dropdown--right u-margin-s-bottom">
               <li>
-                <a href="#" class="a-button a-button--menu u-h6">
+                <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 1
                 </a>
               </li>
               <li>
-                <a href="#" class="a-button a-button--menu u-h6">
+                <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 2
                 </a>
               </li>
@@ -356,17 +357,17 @@ defmodule BitstylesPhoenix.Component.Dropdown do
     '''
         """
         <div class="u-relative">
-          <button type="button" class="a-button a-button--ui foo">
+          <button type="button" class="a-button a-button--secondary foo">
             Custom button content
           </button>
           <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top">
             <li>
-              <a href="#" class="a-button a-button--menu u-h6">
+              <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 1
               </a>
             </li>
             <li>
-              <a href="#" class="a-button a-button--menu u-h6">
+              <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 2
               </a>
             </li>
@@ -404,7 +405,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
         """
         <div style="min-height: 200px; width: 500px;">
           <div class="u-relative">
-            <button type="button" aria-controls="dropdown-1" class="a-button a-button--ui" onclick=\"toggle(&#39;dropdown-1&#39;)\">
+            <button type="button" aria-controls="dropdown-1" class="a-button a-button--secondary" onclick=\"toggle(&#39;dropdown-1&#39;)\">
               <span class="a-button__label">
                 Select me
               </span>
@@ -415,19 +416,19 @@ defmodule BitstylesPhoenix.Component.Dropdown do
             </button>
             <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--full-width u-margin-s-top" id="dropdown-1" style="display: none">
               <li>
-                <a href="#" class="a-button a-button--menu foo">
+                <a href="#" class="a-button a-button--transparent a-button--menu foo">
                   Option 1
                 </a>
               </li>
               <li>
-                <a href="#" class="a-button a-button--menu">
+                <a href="#" class="a-button a-button--transparent a-button--menu">
                   Option 2
                 </a>
               </li>
               <li role="separator">
               </li>
               <li>
-                <a href="#" class="a-button a-button--menu">
+                <a href="#" class="a-button a-button--transparent a-button--menu">
                   Option 3
                 </a>
               </li>
@@ -454,9 +455,17 @@ defmodule BitstylesPhoenix.Component.Dropdown do
     {button, button_extra} =
       assigns_from_single_slot(assigns, :button, exclude: [:label, :icon_file])
 
+    button_extra =
+      if Bitstyles.version() >= "5.0.0" do
+        button_extra
+        |> Keyword.put_new(:color, :secondary)
+      else
+        button_extra
+        |> Keyword.put_new(:variant, :ui)
+      end
+
     button_extra =
       button_extra
-      |> Keyword.put_new(:variant, :ui)
       |> maybe_put_icon(button[:label], button[:icon_file])
 
     {menu, menu_extra} = assigns_from_single_slot(assigns, :menu, exclude: [:class])
@@ -505,7 +514,16 @@ defmodule BitstylesPhoenix.Component.Dropdown do
     extra =
       assigns
       |> assigns_to_attributes()
-      |> Keyword.put_new(:variant, "menu")
+
+    extra =
+      if Bitstyles.version() >= "5.0.0" do
+        extra
+        |> Keyword.put_new(:shape, "menu")
+        |> Keyword.put_new(:color, "transparent")
+      else
+        extra
+        |> Keyword.put_new(:variant, "menu")
+      end
 
     assigns = assign(assigns, extra: extra)
 
diff --git a/lib/bitstyles_phoenix/component/heading.ex b/lib/bitstyles_phoenix/component/heading.ex
index 61aa788..ef179fd 100644
--- a/lib/bitstyles_phoenix/component/heading.ex
+++ b/lib/bitstyles_phoenix/component/heading.ex
@@ -64,10 +64,10 @@ defmodule BitstylesPhoenix.Component.Heading do
         ...>     <.ui_button>Edit</.ui_button>
         ...>   </:action>
         ...>   <:action>
-        ...>     <.ui_button variant="danger">Delete</.ui_button>
+        ...>     <.ui_button color="danger">Delete</.ui_button>
         ...>   </:action>
         ...>   <:action show={false}>
-        ...>     <.ui_button variant="danger">Hide me</.ui_button>
+        ...>     <.ui_button color="danger">Hide me</.ui_button>
         ...>   </:action>
         ...> </.ui_page_title>
         ...> """
@@ -218,10 +218,10 @@ defmodule BitstylesPhoenix.Component.Heading do
         ...>     <.ui_button>Edit</.ui_button>
         ...>   </:action>
         ...>   <:action>
-        ...>     <.ui_button variant="danger">Delete</.ui_button>
+        ...>     <.ui_button color="danger">Delete</.ui_button>
         ...>   </:action>
         ...>   <:action show={false}>
-        ...>     <.ui_button variant="danger">Hide me</.ui_button>
+        ...>     <.ui_button color="danger">Hide me</.ui_button>
         ...>   </:action>
         ...> </.ui_section_title>
         ...> """
diff --git a/lib/bitstyles_phoenix/component/sidebar.ex b/lib/bitstyles_phoenix/component/sidebar.ex
index decddd8..5ec3f21 100644
--- a/lib/bitstyles_phoenix/component/sidebar.ex
+++ b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -17,12 +17,12 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         ...>       Menu
         ...>     </.ui_sidebar_section>
         ...>     <.ui_sidebar_nav>
-        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" variant="nav">Menu item #1</.ui_button></.ui_sidebar_nav_item>
-        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" variant="nav">Menu item #2</.ui_button></.ui_sidebar_nav_item>
+        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" color="transparent">Menu item #1</.ui_button></.ui_sidebar_nav_item>
+        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" color="transparent">Menu item #2</.ui_button></.ui_sidebar_nav_item>
         ...>     </.ui_sidebar_nav>
         ...>     <.ui_sidebar_section border="top">
         ...>       <.ui_dropdown variant={["top", "full-width"]}>
-        ...>         <:button variant="nav-large">
+        ...>         <:button color="transparent">
         ...>           <div class="a-button__icon a-avatar">
         ...>             <img src="https://placehold.co/100x150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar" />
         ...>           </div>
@@ -50,19 +50,19 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                 </div>
                 <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #1
                     </a>
                   </li>
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #2
                     </a>
                   </li>
                 </ul>
                 <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-top u-margin-xs-top">
                   <div class="u-relative">
-                    <button type="button" class="a-button a-button--nav-large">
+                    <button type="button" class="a-button a-button--transparent">
                       <div class="a-button__icon a-avatar">
                         <img src="https://placehold.co/100x150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar"/>
                       </div>
@@ -87,19 +87,19 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                 </div>
                 <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #1
                     </a>
                   </li>
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #2
                     </a>
                   </li>
                 </ul>
                 <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-top u-margin-xs-top">
                   <div class="u-relative">
-                    <button type="button" class="a-button a-button--nav-large">
+                    <button type="button" class="a-button a-button--transparent">
                       <div class="a-button__icon a-avatar">
                         <img src="https://placehold.co/100x150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar"/>
                       </div>
diff --git a/lib/bitstyles_phoenix/component/tabs.ex b/lib/bitstyles_phoenix/component/tabs.ex
index 9d60136..436b21c 100644
--- a/lib/bitstyles_phoenix/component/tabs.ex
+++ b/lib/bitstyles_phoenix/component/tabs.ex
@@ -193,7 +193,7 @@ defmodule BitstylesPhoenix.Component.Tabs do
     assigns = assign(assigns, extra: Keyword.merge(extra, active))
 
     ~H"""
-    <.ui_button {@extra} variant="tab">
+    <.ui_button {@extra} color="tab" shape="tab">
       <%= render_slot(@inner_block) %>
     </.ui_button>
     """

From d3c26dc45a8628fd5c312ef2e5143789f5e607f0 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Mon, 1 Jul 2024 15:45:57 +0200
Subject: [PATCH 12/20] Fix sidebar test

---
 lib/bitstyles_phoenix/component/sidebar.ex | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/bitstyles_phoenix/component/sidebar.ex b/lib/bitstyles_phoenix/component/sidebar.ex
index 5ec3f21..5dcb65a 100644
--- a/lib/bitstyles_phoenix/component/sidebar.ex
+++ b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -72,7 +72,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                     </button>
                     <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top a-dropdown--full-width u-margin-s-bottom">
                       <li>
-                        <a href="#" class="a-button a-button--menu">
+                        <a href="#" class="a-button a-button--transparent a-button--menu">
                           Logout
                         </a>
                       </li>
@@ -109,7 +109,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                     </button>
                     <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top a-dropdown--full-width u-margin-s-bottom">
                       <li>
-                        <a href="#" class="a-button a-button--menu">
+                        <a href="#" class="a-button a-button--transparent a-button--menu">
                           Logout
                         </a>
                       </li>

From b9dc051010f5b5cf22359402c992511cb40ab3b4 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Mon, 1 Jul 2024 16:04:30 +0200
Subject: [PATCH 13/20] Color replacement advice from Darren; tests

---
 lib/bitstyles_phoenix/alpine3/sidebar.ex      |  4 ++--
 lib/bitstyles_phoenix/bitstyles.ex            |  5 ++---
 .../component/breadcrumbs.ex                  | 20 +++++++++----------
 .../component/description_list.ex             | 12 +++++------
 lib/bitstyles_phoenix/component/sidebar.ex    | 14 ++++++-------
 test/bitstyles_phoenix/bitstyles_test.exs     | 10 ++++++++++
 6 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/lib/bitstyles_phoenix/alpine3/sidebar.ex b/lib/bitstyles_phoenix/alpine3/sidebar.ex
index c2ae0e5..407d62b 100644
--- a/lib/bitstyles_phoenix/alpine3/sidebar.ex
+++ b/lib/bitstyles_phoenix/alpine3/sidebar.ex
@@ -54,7 +54,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
         <div class="u-flex u-height-100vh" x-data="{ sidebarOpen: false }">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text">
                 <a href="#" class="u-padding-l">
                   <img src="assets/logo.svg" aria-hidden="true" width="100"/>
                   <span class="u-sr-only">
@@ -74,7 +74,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                   </li>
                 </ul>
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light" @click.away="sidebarOpen = false" id="sidebar-small" x-cloak="x-cloak" x-show="sidebarOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text" @click.away="sidebarOpen = false" id="sidebar-small" x-cloak="x-cloak" x-show="sidebarOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
                 <div class="u-flex">
                   <a href="#" class="u-flex-grow-1 u-padding-l">
                     <img src="assets/logo.svg" aria-hidden="true" width="100"/>
diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index 92679a2..91311b2 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -41,9 +41,8 @@ defmodule BitstylesPhoenix.Bitstyles do
         "u-list-none" -> "a-list-reset"
         "a-badge--text" -> "a-badge--gray"
         "u-gap-l" -> "u-gap-m"
-        "u-fg-text-light" -> "u-fg-gray-30"
-        "u-fg-gray-light" -> "u-fg-gray-30"
-        "u-fg-text" -> "u-fg-gray-50"
+        "u-fg-text" -> "u-fg-gray-30"
+        "u-fg-text-darker" -> "u-fg-gray-50"
         "u-bg-gray-darker" -> "u-bg-gray-80"
         class -> class
       end
diff --git a/lib/bitstyles_phoenix/component/breadcrumbs.ex b/lib/bitstyles_phoenix/component/breadcrumbs.ex
index 48222b3..e0f8862 100644
--- a/lib/bitstyles_phoenix/component/breadcrumbs.ex
+++ b/lib/bitstyles_phoenix/component/breadcrumbs.ex
@@ -47,21 +47,21 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
             <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center">
               <li class="u-margin-xs-right u-flex u-items-center">
                 Foo
-                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-caret-right">
                   </use>
                 </svg>
               </li>
               <li class="u-margin-xs-right u-flex u-items-center">
                 Bar
-                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-caret-right">
                   </use>
                 </svg>
               </li>
               <li class="u-margin-xs-right u-flex u-items-center">
                 Baz
-                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-caret-right">
                   </use>
                 </svg>
@@ -123,21 +123,21 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
           <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center">
             <li class="u-margin-xs-right u-flex u-items-center">
               Foo
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Bar
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Baz
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
@@ -173,21 +173,21 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
           <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center u-fg-warning">
             <li class="u-margin-xs-right u-flex u-items-center u-fg-brand-2" data-baz="foo">
               Foo
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Bar
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Baz
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
@@ -219,7 +219,7 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
               {assigns[:item] && assigns_to_attributes(item, [:class]) || []}
             >
               <%= if assigns[:item], do: render_slot(item), else: item %>
-              <.ui_icon name="caret-right" size="m" class={classnames("u-fg-text-light u-margin-xs-left")} {@icon_extra} />
+              <.ui_icon name="caret-right" size="m" class={classnames("u-fg-text u-margin-xs-left")} {@icon_extra} />
             </li>
           <% end %>
         </ol>
diff --git a/lib/bitstyles_phoenix/component/description_list.ex b/lib/bitstyles_phoenix/component/description_list.ex
index 1489bf9..3cb350e 100644
--- a/lib/bitstyles_phoenix/component/description_list.ex
+++ b/lib/bitstyles_phoenix/component/description_list.ex
@@ -20,7 +20,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
         """
         <dl class="a-dl">
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
               Length
             </dt>
             <dd class="u-col-span-2">
@@ -28,7 +28,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
               Inserted at
             </dt>
             <dd class="u-col-span-2">
@@ -64,7 +64,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
         """
         <dl class="a-dl extra" data-foo="baz">
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline u-fg-brand-2">
-            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
               Length
             </dt>
             <dd class="u-col-span-2">
@@ -72,7 +72,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
               Some
             </dt>
             <dd class="u-col-span-2 u-fg-brand-1" data-foo="bar">
@@ -80,7 +80,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
               <pre>
                 Tag
               </pre>
@@ -162,7 +162,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
     assigns = assign(assigns, extra: extra)
 
     ~H"""
-    <dt class={classnames(["u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s", assigns[:class]])} {@extra}>
+    <dt class={classnames(["u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s", assigns[:class]])} {@extra}>
       <%= render_slot(@inner_block) %>
     </dt>
     """
diff --git a/lib/bitstyles_phoenix/component/sidebar.ex b/lib/bitstyles_phoenix/component/sidebar.ex
index 5dcb65a..4eaa63a 100644
--- a/lib/bitstyles_phoenix/component/sidebar.ex
+++ b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -43,7 +43,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         <div class="u-flex u-height-100vh">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text">
                 Large header
                 <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-bottom u-margin-xs-bottom">
                   Menu
@@ -80,7 +80,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                   </div>
                 </div>
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text">
                 Small header
                 <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-bottom u-margin-xs-bottom">
                   Menu
@@ -207,13 +207,13 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         <div class="u-flex u-height-100vh">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text">
                 Large header
                 <div>
                   Sidebar
                 </div>
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text">
                 Small header
                 <div>
                   Sidebar
@@ -247,9 +247,9 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         <div class="u-flex u-height-100vh">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text">
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text">
               </div>
             </nav>
           </header>
@@ -265,7 +265,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
   )
 
   @default_bg "gray-darker"
-  @default_fg "text-light"
+  @default_fg "text"
   @large_classes "u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col"
   @small_classes "o-sidebar--small u-flex u-flex-col u-hidden@l"
 
diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
index b58fcc8..16c9d65 100644
--- a/test/bitstyles_phoenix/bitstyles_test.exs
+++ b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -36,6 +36,11 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-margin-3xl-bottom", "5.0.0") == "u-margin-3xl-bottom"
       assert classname("u-margin-neg-3xl-bottom", "5.0.0") == "u-margin-neg-3xl-bottom"
       assert classname("u-list-none", "5.0.0") == "u-list-none"
+      assert classname("a-badge--text", "5.0.0") == "a-badge--text"
+      assert classname("u-gap-l", "5.0.0") == "u-gap-l"
+      assert classname("u-fg-text", "5.0.0") == "u-fg-text"
+      assert classname("u-fg-text-darker", "5.0.0") == "u-fg-text-darker"
+      assert classname("u-bg-gray-darker", "5.0.0") == "u-bg-gray-darker"
     end
 
     test "version 4.3.0" do
@@ -63,6 +68,11 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-margin-3xl-bottom", "4.3.0") == "u-margin-xxxl-bottom"
       assert classname("u-margin-neg-3xl-bottom", "4.3.0") == "u-margin-neg-xxxl-bottom"
       assert classname("u-list-none", "4.3.0") == "a-list-reset"
+      assert classname("a-badge--text", "4.3.0") == "a-badge--gray"
+      assert classname("u-gap-l", "4.3.0") == "u-gap-m"
+      assert classname("u-fg-text", "4.3.0") == "u-fg-gray-30"
+      assert classname("u-fg-text-darker", "4.3.0") == "u-fg-gray-50"
+      assert classname("u-bg-gray-darker", "4.3.0") == "u-bg-gray-80"
     end
 
     test "version 4.2.0" do

From c1a6fdbbfa65c0e710790b0bf99910a4a89fc18f Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Tue, 2 Jul 2024 14:04:57 +0200
Subject: [PATCH 14/20] Update readme

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bc512f8..df03eae 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ Basic helpers for [bitstyles](https://github.com/bitcrowd/bitstyles) for elixir
 
 Bitstyles must be installed separately into the asset generation. The helpers in this project just output classes for working with bitstyles.
 
-Bitstyles versions from 4.3.0 down to 1.3.0 are supported.
+Bitstyles versions from 5.0.1 down to 1.3.0 are supported.
 
 ## Installation
 

From 71f0ecdce165ebcb6cb6240769b7624ae2c06b55 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Tue, 2 Jul 2024 16:23:53 +0200
Subject: [PATCH 15/20] Fix list reset classes in heading and sidebar

---
 lib/bitstyles_phoenix/alpine3/dropdown.ex   |  4 ++--
 lib/bitstyles_phoenix/alpine3/sidebar.ex    |  4 ++--
 lib/bitstyles_phoenix/component/dropdown.ex | 14 +++++++-------
 lib/bitstyles_phoenix/component/heading.ex  |  6 +++---
 lib/bitstyles_phoenix/component/sidebar.ex  | 10 +++++-----
 lib/bitstyles_phoenix/component/tabs.ex     |  8 ++++----
 6 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/lib/bitstyles_phoenix/alpine3/dropdown.ex b/lib/bitstyles_phoenix/alpine3/dropdown.ex
index fe1c3cc..553fa7f 100644
--- a/lib/bitstyles_phoenix/alpine3/dropdown.ex
+++ b/lib/bitstyles_phoenix/alpine3/dropdown.ex
@@ -56,7 +56,7 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
               </use>
             </svg>
           </button>
-          <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top" @click.away="dropdownOpen = false" x-cloak="x-cloak" x-show="dropdownOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
+          <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s-top" @click.away="dropdownOpen = false" x-cloak="x-cloak" x-show="dropdownOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
             <li>
               <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 1
@@ -112,7 +112,7 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
               </use>
             </svg>
           </button>
-          <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top" @click.away="myOwnDropDown = false" x-cloak="x-cloak" x-show="myOwnDropDown" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
+          <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s-top" @click.away="myOwnDropDown = false" x-cloak="x-cloak" x-show="myOwnDropDown" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
             <li>
               <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 1
diff --git a/lib/bitstyles_phoenix/alpine3/sidebar.ex b/lib/bitstyles_phoenix/alpine3/sidebar.ex
index 407d62b..fe6785d 100644
--- a/lib/bitstyles_phoenix/alpine3/sidebar.ex
+++ b/lib/bitstyles_phoenix/alpine3/sidebar.ex
@@ -61,7 +61,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                     bitcrowd
                   </span>
                 </a>
-                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
+                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
                   <li class="u-margin-xs-bottom u-flex">
                     <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #1
@@ -94,7 +94,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                     </button>
                   </div>
                 </div>
-                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
+                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
                   <li class="u-margin-xs-bottom u-flex">
                     <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #1
diff --git a/lib/bitstyles_phoenix/component/dropdown.ex b/lib/bitstyles_phoenix/component/dropdown.ex
index 379a207..a0e9d31 100644
--- a/lib/bitstyles_phoenix/component/dropdown.ex
+++ b/lib/bitstyles_phoenix/component/dropdown.ex
@@ -79,7 +79,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
                 </use>
               </svg>
             </button>
-            <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top">
+            <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s-top">
               <li>
                 <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 1
@@ -194,7 +194,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
                 </use>
               </svg>
             </button>
-            <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top u-margin-s-bottom">
+            <ul class="a-dropdown u-overflow-y-auto u-list-none a-dropdown--top u-margin-s-bottom">
               <li>
                 <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 1
@@ -249,7 +249,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
               </use>
             </svg>
           </button>
-          <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--right u-margin-s-top">
+          <ul class="a-dropdown u-overflow-y-auto u-list-none a-dropdown--right u-margin-s-top">
             <li>
               <a href="#" class="a-button a-button--transparent a-button--menu">
                 Option 1
@@ -310,7 +310,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
                 </use>
               </svg>
             </button>
-            <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top a-dropdown--right u-margin-s-bottom">
+            <ul class="a-dropdown u-overflow-y-auto u-list-none a-dropdown--top a-dropdown--right u-margin-s-bottom">
               <li>
                 <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 1
@@ -360,7 +360,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
           <button type="button" class="a-button a-button--secondary foo">
             Custom button content
           </button>
-          <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top">
+          <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s-top">
             <li>
               <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 1
@@ -414,7 +414,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
                 </use>
               </svg>
             </button>
-            <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--full-width u-margin-s-top" id="dropdown-1" style="display: none">
+            <ul class="a-dropdown u-overflow-y-auto u-list-none a-dropdown--full-width u-margin-s-top" id="dropdown-1" style="display: none">
               <li>
                 <a href="#" class="a-button a-button--transparent a-button--menu foo">
                   Option 1
@@ -544,7 +544,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
 
   defp maybe_put_icon(button_extra, _, _), do: button_extra
 
-  @menu_classes ~w(a-dropdown u-overflow-y-auto a-list-reset)
+  @menu_classes ~w(a-dropdown u-overflow-y-auto u-list-none)
   defp menu_class(variant, class) do
     classnames(@menu_classes ++ variant_classes(variant) ++ [margin(variant), class])
   end
diff --git a/lib/bitstyles_phoenix/component/heading.ex b/lib/bitstyles_phoenix/component/heading.ex
index ef179fd..88ac89c 100644
--- a/lib/bitstyles_phoenix/component/heading.ex
+++ b/lib/bitstyles_phoenix/component/heading.ex
@@ -85,7 +85,7 @@ defmodule BitstylesPhoenix.Component.Heading do
               </span>
             </div>
           </div>
-          <ul class="a-list-reset u-flex u-flex-wrap">
+          <ul class="u-list-none u-flex u-flex-wrap">
             <li class="u-margin-s-right u-margin-m-bottom">
               <button type="button" class="a-button">
                 Edit
@@ -237,7 +237,7 @@ defmodule BitstylesPhoenix.Component.Heading do
               Published
             </span>
           </div>
-          <ul class="a-list-reset u-flex u-flex-wrap">
+          <ul class="u-list-none u-flex u-flex-wrap">
             <li class="u-margin-s-right u-margin-m-bottom">
               <button type="button" class="a-button">
                 Edit
@@ -296,7 +296,7 @@ defmodule BitstylesPhoenix.Component.Heading do
 
   defp ui_action_buttons(assigns) do
     ~H"""
-    <ul class={classnames("a-list-reset u-flex u-flex-wrap")}>
+    <ul class={classnames("u-list-none u-flex u-flex-wrap")}>
       <%= for action <- @action do %>
         <%= if Map.get(action, :show, true) do %>
           <li class={classnames(["u-margin-s-right u-margin-m-bottom", action[:class]])} {assigns_to_attributes(action, [:class, :show])}>
diff --git a/lib/bitstyles_phoenix/component/sidebar.ex b/lib/bitstyles_phoenix/component/sidebar.ex
index 4eaa63a..781fd56 100644
--- a/lib/bitstyles_phoenix/component/sidebar.ex
+++ b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -48,7 +48,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                 <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-bottom u-margin-xs-bottom">
                   Menu
                 </div>
-                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
+                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
                   <li class="u-margin-xs-bottom u-flex">
                     <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #1
@@ -70,7 +70,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                         Jane Dobermann
                       </span>
                     </button>
-                    <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top a-dropdown--full-width u-margin-s-bottom">
+                    <ul class="a-dropdown u-overflow-y-auto u-list-none a-dropdown--top a-dropdown--full-width u-margin-s-bottom">
                       <li>
                         <a href="#" class="a-button a-button--transparent a-button--menu">
                           Logout
@@ -85,7 +85,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                 <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-bottom u-margin-xs-bottom">
                   Menu
                 </div>
-                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
+                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
                   <li class="u-margin-xs-bottom u-flex">
                     <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #1
@@ -107,7 +107,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                         Jane Dobermann
                       </span>
                     </button>
-                    <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top a-dropdown--full-width u-margin-s-bottom">
+                    <ul class="a-dropdown u-overflow-y-auto u-list-none a-dropdown--top a-dropdown--full-width u-margin-s-bottom">
                       <li>
                         <a href="#" class="a-button a-button--transparent a-button--menu">
                           Logout
@@ -360,7 +360,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
 
   You can add items `ui_sidebar_nav_item/1` to add items to the navigation.
   """
-  @sidebar_nav_classes "u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex " <>
+  @sidebar_nav_classes "u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex " <>
                          "u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left"
   def ui_sidebar_nav(assigns) do
     extra = assigns_to_attributes(assigns, [:class])
diff --git a/lib/bitstyles_phoenix/component/tabs.ex b/lib/bitstyles_phoenix/component/tabs.ex
index 436b21c..b79f062 100644
--- a/lib/bitstyles_phoenix/component/tabs.ex
+++ b/lib/bitstyles_phoenix/component/tabs.ex
@@ -40,7 +40,7 @@ defmodule BitstylesPhoenix.Component.Tabs do
     ''',
     '''
         """
-        <ul class="a-list-reset u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist">
+        <ul class="u-list-none u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist">
           <li class="u-margin-s-right">
             <button type="button" class="a-button a-button--tab">
               Foo
@@ -76,7 +76,7 @@ defmodule BitstylesPhoenix.Component.Tabs do
     ''',
     '''
         """
-        <ul class="a-list-reset u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist">
+        <ul class="u-list-none u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist">
           <li class="u-margin-s-right">
             <button type="button" aria-selected="true" class="a-button a-button--tab">
               Foo
@@ -112,7 +112,7 @@ defmodule BitstylesPhoenix.Component.Tabs do
     ''',
     '''
         """
-        <ul class="a-list-reset u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist">
+        <ul class="u-list-none u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist">
           <li class="u-margin-s-right">
             <button type="button" aria-selected="true" class="a-button a-button--tab">
               Foo
@@ -137,7 +137,7 @@ defmodule BitstylesPhoenix.Component.Tabs do
   def ui_tabs(assigns) do
     class =
       classnames([
-        "a-list-reset u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom",
+        "u-list-none u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom",
         assigns[:class]
       ])
 

From 26f8313f64a0f99b4ebd9c6bb049cf444423fed1 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Tue, 2 Jul 2024 17:00:37 +0200
Subject: [PATCH 16/20] Fix border colors

---
 lib/bitstyles_phoenix/bitstyles.ex         | 10 ++++++++++
 lib/bitstyles_phoenix/component/heading.ex | 10 +++++-----
 lib/bitstyles_phoenix/component/sidebar.ex | 14 +++++++-------
 test/bitstyles_phoenix/bitstyles_test.exs  |  7 +++++++
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index 91311b2..9f4788e 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -36,6 +36,16 @@ defmodule BitstylesPhoenix.Bitstyles do
         String.replace(acc, "-#{new_size}", "-#{old_size}")
       end)
 
+    border_color_renaming = %{
+      "u-border-gray-light" => "u-border-gray-10",
+      "u-border-gray-dark" => "u-border-gray-70"
+    }
+
+    class =
+      Enum.reduce(border_color_renaming, class, fn {new_border_color, old_border_color}, acc ->
+        String.replace(acc, new_border_color, old_border_color)
+      end)
+
     class =
       case class do
         "u-list-none" -> "a-list-reset"
diff --git a/lib/bitstyles_phoenix/component/heading.ex b/lib/bitstyles_phoenix/component/heading.ex
index 88ac89c..c06e4d0 100644
--- a/lib/bitstyles_phoenix/component/heading.ex
+++ b/lib/bitstyles_phoenix/component/heading.ex
@@ -133,7 +133,7 @@ defmodule BitstylesPhoenix.Component.Heading do
     """
   end
 
-  @section_default_border_color "gray-10"
+  @section_default_border_color "gray-light"
 
   @doc ~s"""
   Render a section header with optional `action`s and `title_extra`.
@@ -141,7 +141,7 @@ defmodule BitstylesPhoenix.Component.Heading do
   ## Attributes
   - `class` - Set CSS classes on the outer div.
   - `border` - Controls the bottom border and padding (default: true, boolean)
-  - `border_color` - The border color, defaults to `gray-10` resulting in `u-border-gray-10-bottom`.
+  - `border_color` - The border color, defaults to `gray-light` resulting in `u-border-gray-light-bottom`.
   - `tag` - the heading tag (defaults to h3)
   - `heading_class` - Extra classes on the heading
   - All other attributes are passed to the outer `div` tag.
@@ -168,7 +168,7 @@ defmodule BitstylesPhoenix.Component.Heading do
     ''',
     '''
         """
-        <div class="u-flex u-flex-wrap u-items-center u-justify-between u-padding-m-bottom u-border-gray-10-bottom">
+        <div class="u-flex u-flex-wrap u-items-center u-justify-between u-padding-m-bottom u-border-gray-light-bottom">
           <div class="u-flex u-items-center">
             <h3 class="u-margin-0 u-margin-m-right u-break-text">
               Section title
@@ -209,7 +209,7 @@ defmodule BitstylesPhoenix.Component.Heading do
     '''
         iex> assigns = %{}
         ...> render ~H"""
-        ...> <.ui_section_title border_color="gray-70" heading_class="extra">
+        ...> <.ui_section_title border_color="gray-light" heading_class="extra">
         ...>   Section title
         ...>   <:title_extra>
         ...>     <.ui_badge>Published</.ui_badge>
@@ -228,7 +228,7 @@ defmodule BitstylesPhoenix.Component.Heading do
     ''',
     '''
         """
-        <div class="u-flex u-flex-wrap u-items-center u-justify-between u-padding-m-bottom u-border-gray-70-bottom">
+        <div class="u-flex u-flex-wrap u-items-center u-justify-between u-padding-m-bottom u-border-gray-light-bottom">
           <div class="u-flex u-items-center">
             <h3 class="u-margin-0 u-margin-m-right u-break-text extra">
               Section title
diff --git a/lib/bitstyles_phoenix/component/sidebar.ex b/lib/bitstyles_phoenix/component/sidebar.ex
index 781fd56..fc21923 100644
--- a/lib/bitstyles_phoenix/component/sidebar.ex
+++ b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -45,7 +45,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
             <nav class="u-flex">
               <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text">
                 Large header
-                <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-bottom u-margin-xs-bottom">
+                <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-dark-bottom u-margin-xs-bottom">
                   Menu
                 </div>
                 <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
@@ -60,7 +60,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                     </a>
                   </li>
                 </ul>
-                <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-top u-margin-xs-top">
+                <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-dark-top u-margin-xs-top">
                   <div class="u-relative">
                     <button type="button" class="a-button a-button--transparent">
                       <div class="a-button__icon a-avatar">
@@ -82,7 +82,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
               </div>
               <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text">
                 Small header
-                <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-bottom u-margin-xs-bottom">
+                <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-dark-bottom u-margin-xs-bottom">
                   Menu
                 </div>
                 <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
@@ -97,7 +97,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                     </a>
                   </li>
                 </ul>
-                <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-top u-margin-xs-top">
+                <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-dark-top u-margin-xs-top">
                   <div class="u-relative">
                     <button type="button" class="a-button a-button--transparent">
                       <div class="a-button__icon a-avatar">
@@ -406,13 +406,13 @@ defmodule BitstylesPhoenix.Component.Sidebar do
   - `class` - Extra classes to pass to the outer `div`
     See `BitstylesPhoenix.Helper.classnames/1` for usage.
   - `border` - Either `:top` or `:bottom` (optional)
-  - `border_color` - The border color, defaults to `gray-70` resulting in
-     `u-border-gray-70-top` for a `:top` border.
+  - `border_color` - The border color, defaults to `gray-dark` resulting in
+     `u-border-gray-dark-top` for a `:top` border.
   - All other attributes are passed on to the outer `div`
   """
 
   @sidebar_section_classes "u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col"
-  @sidebar_section_default_border_color "gray-70"
+  @sidebar_section_default_border_color "gray-dark"
   def ui_sidebar_section(assigns) do
     border_color = Map.get(assigns, :border_color, @sidebar_section_default_border_color)
     border = Map.get(assigns, :border)
diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
index 16c9d65..d3c73ac 100644
--- a/test/bitstyles_phoenix/bitstyles_test.exs
+++ b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -41,6 +41,9 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-fg-text", "5.0.0") == "u-fg-text"
       assert classname("u-fg-text-darker", "5.0.0") == "u-fg-text-darker"
       assert classname("u-bg-gray-darker", "5.0.0") == "u-bg-gray-darker"
+      assert classname("u-border-gray-light", "5.0.0") == "u-border-gray-light"
+      assert classname("u-border-gray-light-bottom", "5.0.0") == "u-border-gray-light-bottom"
+      assert classname("u-border-gray-dark", "5.0.0") == "u-border-gray-dark"
     end
 
     test "version 4.3.0" do
@@ -73,6 +76,10 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-fg-text", "4.3.0") == "u-fg-gray-30"
       assert classname("u-fg-text-darker", "4.3.0") == "u-fg-gray-50"
       assert classname("u-bg-gray-darker", "4.3.0") == "u-bg-gray-80"
+      # TODO: top bottom
+      assert classname("u-border-gray-light", "4.3.0") == "u-border-gray-10"
+      assert classname("u-border-gray-light-bottom", "4.3.0") == "u-border-gray-10-bottom"
+      assert classname("u-border-gray-dark", "4.3.0") == "u-border-gray-70"
     end
 
     test "version 4.2.0" do

From 6b7196177a2acd61716138eb65c46616543e6505 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelikatyborska@fastmail.com>
Date: Tue, 2 Jul 2024 17:04:18 +0200
Subject: [PATCH 17/20] Update test/bitstyles_phoenix/bitstyles_test.exs

---
 test/bitstyles_phoenix/bitstyles_test.exs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
index d3c73ac..a510bfd 100644
--- a/test/bitstyles_phoenix/bitstyles_test.exs
+++ b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -76,7 +76,6 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-fg-text", "4.3.0") == "u-fg-gray-30"
       assert classname("u-fg-text-darker", "4.3.0") == "u-fg-gray-50"
       assert classname("u-bg-gray-darker", "4.3.0") == "u-bg-gray-80"
-      # TODO: top bottom
       assert classname("u-border-gray-light", "4.3.0") == "u-border-gray-10"
       assert classname("u-border-gray-light-bottom", "4.3.0") == "u-border-gray-10-bottom"
       assert classname("u-border-gray-dark", "4.3.0") == "u-border-gray-70"

From 15d7c55183b2924d2aa500b113b8aaf72092c99c Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Mon, 8 Jul 2024 11:40:43 +0200
Subject: [PATCH 18/20] Only replace sizes in bitstyles utility classes

---
 lib/bitstyles_phoenix/bitstyles.ex | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index 9f4788e..e4ebe58 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -32,9 +32,13 @@ defmodule BitstylesPhoenix.Bitstyles do
     }
 
     class =
-      Enum.reduce(sizes_renaming, class, fn {new_size, old_size}, acc ->
-        String.replace(acc, "-#{new_size}", "-#{old_size}")
-      end)
+      if String.starts_with?(class, "u-") do
+        Enum.reduce(sizes_renaming, class, fn {new_size, old_size}, acc ->
+          String.replace(acc, "-#{new_size}", "-#{old_size}")
+        end)
+      else
+        class
+      end
 
     border_color_renaming = %{
       "u-border-gray-light" => "u-border-gray-10",

From c9e1f4842c2e5caf68911b17fee13856dd91fdc4 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Mon, 8 Jul 2024 13:16:07 +0200
Subject: [PATCH 19/20] Do not prevent users of older bitstyles from using
 u-gap-l

---
 lib/bitstyles_phoenix/bitstyles.ex            |  7 +-
 .../component/description_list.ex             | 91 +++++++++++++------
 test/bitstyles_phoenix/bitstyles_test.exs     |  3 +-
 3 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index e4ebe58..2794ac9 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -19,6 +19,12 @@ defmodule BitstylesPhoenix.Bitstyles do
     class
   end
 
+  # Note about class renaming:
+  # A renaming of "class-name-A" (newer) to "class-name-B" (older) can only be done via this module if
+  # the "class-name-A" does not also exist in older versions of bitstyles with a different meaning.
+  # If it does exist, then doing this renaming in the classname/2 function would make it impossible
+  # for users of older bitstyles to use the "class-name-A" classname.
+
   def classname(class, version) when version >= "5.0.0" do
     class
   end
@@ -54,7 +60,6 @@ defmodule BitstylesPhoenix.Bitstyles do
       case class do
         "u-list-none" -> "a-list-reset"
         "a-badge--text" -> "a-badge--gray"
-        "u-gap-l" -> "u-gap-m"
         "u-fg-text" -> "u-fg-gray-30"
         "u-fg-text-darker" -> "u-fg-gray-50"
         "u-bg-gray-darker" -> "u-bg-gray-80"
diff --git a/lib/bitstyles_phoenix/component/description_list.ex b/lib/bitstyles_phoenix/component/description_list.ex
index 3cb350e..74460b3 100644
--- a/lib/bitstyles_phoenix/component/description_list.ex
+++ b/lib/bitstyles_phoenix/component/description_list.ex
@@ -1,5 +1,6 @@
 defmodule BitstylesPhoenix.Component.DescriptionList do
   use BitstylesPhoenix.Component
+  alias BitstylesPhoenix.Bitstyles
 
   @moduledoc """
   The description list components.
@@ -16,28 +17,52 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
         ...> </.ui_dl>
         ...> """
     ''',
-    '''
-        """
-        <dl class="a-dl">
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
-              Length
-            </dt>
-            <dd class="u-col-span-2">
-              8
-            </dd>
-          </div>
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
-              Inserted at
-            </dt>
-            <dd class="u-col-span-2">
-              2007-01-02
-            </dd>
-          </div>
-        </dl>
-        """
-    ''',
+    [
+      "5.0.1": '''
+          """
+          <dl class="a-dl">
+            <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
+              <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
+                Length
+              </dt>
+              <dd class="u-col-span-2">
+                8
+              </dd>
+            </div>
+            <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
+              <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
+                Inserted at
+              </dt>
+              <dd class="u-col-span-2">
+                2007-01-02
+              </dd>
+            </div>
+          </dl>
+          """
+      ''',
+      "4.3.0": '''
+          """
+          <dl class="a-dl">
+            <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-m">
+              <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+                Length
+              </dt>
+              <dd class="u-col-span-2">
+                8
+              </dd>
+            </div>
+            <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-m">
+              <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+                Inserted at
+              </dt>
+              <dd class="u-col-span-2">
+                2007-01-02
+              </dd>
+            </div>
+          </dl>
+          """
+      '''
+    ],
     module: true,
     width: "100%"
   )
@@ -63,7 +88,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
     '''
         """
         <dl class="a-dl extra" data-foo="baz">
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline u-fg-brand-2">
+          <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l u-fg-brand-2">
             <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
               Length
             </dt>
@@ -71,7 +96,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
               8
             </dd>
           </div>
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
+          <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
             <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
               Some
             </dt>
@@ -79,7 +104,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
               Tag
             </dd>
           </div>
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
+          <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
             <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
               <pre>
                 Tag
@@ -133,10 +158,22 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
   """
   def ui_dl_item(assigns) do
     extra = assigns_to_attributes(assigns, [:class, :label, :value])
-    assigns = assign(assigns, extra: extra)
+
+    # u-gap-l and u-gap-xl in 5.0.0 are equivalent to respectively u-gap-m and u-gap-l in 4.3.0
+    gap_class =
+      if Bitstyles.version() >= "5.0.0" do
+        "u-gap-l"
+      else
+        "u-gap-m"
+      end
+
+    assigns =
+      assigns
+      |> assign(extra: extra)
+      |> assign(gap_class: gap_class)
 
     ~H"""
-      <div class={classnames(["a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline u-items-baseline", assigns[:class]])} {@extra}>
+      <div class={classnames(["a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-items-baseline",  assigns[:gap_class], assigns[:class]])} {@extra}>
         <%= if assigns[:label] do %>
           <.ui_dt><%= @label %></.ui_dt>
           <.ui_dd><%= assigns[:value] || render_slot(@inner_block) %></.ui_dd>
diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
index a510bfd..fd528b4 100644
--- a/test/bitstyles_phoenix/bitstyles_test.exs
+++ b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -37,7 +37,6 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-margin-neg-3xl-bottom", "5.0.0") == "u-margin-neg-3xl-bottom"
       assert classname("u-list-none", "5.0.0") == "u-list-none"
       assert classname("a-badge--text", "5.0.0") == "a-badge--text"
-      assert classname("u-gap-l", "5.0.0") == "u-gap-l"
       assert classname("u-fg-text", "5.0.0") == "u-fg-text"
       assert classname("u-fg-text-darker", "5.0.0") == "u-fg-text-darker"
       assert classname("u-bg-gray-darker", "5.0.0") == "u-bg-gray-darker"
@@ -72,7 +71,7 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-margin-neg-3xl-bottom", "4.3.0") == "u-margin-neg-xxxl-bottom"
       assert classname("u-list-none", "4.3.0") == "a-list-reset"
       assert classname("a-badge--text", "4.3.0") == "a-badge--gray"
-      assert classname("u-gap-l", "4.3.0") == "u-gap-m"
+      assert classname("u-gap-l", "4.3.0") == "u-gap-l"
       assert classname("u-fg-text", "4.3.0") == "u-fg-gray-30"
       assert classname("u-fg-text-darker", "4.3.0") == "u-fg-gray-50"
       assert classname("u-bg-gray-darker", "4.3.0") == "u-bg-gray-80"

From 1f8194ec89d035533b33ca925979260094638d62 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Tue, 9 Jul 2024 12:05:43 +0200
Subject: [PATCH 20/20] Add CHANGELOG entry

---
 CHANGELOG.md | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8224b9e..8542bad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,19 +1,31 @@
 # Changelog
 
+## Unreleased
+
+- Added support for bitstyles `v5.0.0`. You can continue using bitstyles_phoenix with a lower bitstyles version, or migrate your codebase to bitstyles `v5.0.0`.
+
+### How to migrate to bitstyles `v5.0.0`
+
+Follow the [bitstyles changelog](https://github.com/bitcrowd/bitstyles/blob/main/CHANGELOG.md#500---2023-01-03) for versions 5.0.0 and 5.0.0-alpha-1. Even if you're using the `BitstylesPhoenix.Helper.Classnames.classnames/1` helper to apply bitstyles classes in your own codebase, you will still need to migrate some of them yourself. For example, the class `u-gap-m` could not have been migrated via the helper because it exists in both bitstyles versions with different meanings (`u-gap-m` and `u-gap-l` in bitstyles 4.3.0 are equivalent to `u-gap-l` and `u-gap-xl` in bitstyles `v5.0.0`).
+
+The `variant` attribute of the `Button` component is deprecated in bitstyles `v5.0.0`. Use the attributes `shape` and `color` instead.
+
 ## v2.3.1 - 2023-10-23
-- Bump LiveView
+
+- Bump LiveView.
 
 ## v2.3.0 - 2023-05-15
-- Add `Modal` component
+
+- Add `Modal` component.
 
 ## v2.2.0 - 2023-03-20
 
-- Updated to LiveView 0.18.18
-- Add `Card` and `Avatar` components
+- Updated to LiveView 0.18.18.
+- Add `Card` and `Avatar` components.
 
 ## v2.1.1 - 2022-12-02
 
-- Fixed version backwards compatibility
+- Fixed version backwards compatibility.
 
 ## v2.1.0 - 2022-12-02
 
@@ -60,7 +72,7 @@ the support for the `ui_button` as helper is dropped completely in favor of comp
 
 ## v1.0.0 - 2022-01-04
 
-This version breaks with the existing API quite a lot 🔥, since we changed the library to take advantage of the recent develpments in Phoenix and LiveView.
+This version breaks with the existing API quite a lot 🔥, since we changed the library to take advantage of the recent developments in Phoenix and LiveView.
 
 ### Breaking