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
 
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
 
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/alpine3/dropdown.ex b/lib/bitstyles_phoenix/alpine3/dropdown.ex
index 5e8ac50..553fa7f 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>
@@ -56,14 +56,14 @@ 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--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>
@@ -112,14 +112,14 @@ 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--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 328554f..fe6785d 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">
@@ -54,27 +54,27 @@ 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">
                 <a href="#" class="u-padding-l">
                   <img src="assets/logo.svg" aria-hidden="true" width="100"/>
                   <span class="u-sr-only">
                     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--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>
-              <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" @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"/>
@@ -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>
@@ -94,14 +94,14 @@ 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--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/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index 3c25aba..2794ac9 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.1"
   @cdn_url "https://cdn.jsdelivr.net/npm/bitstyles"
 
   def cdn_url do
@@ -14,12 +14,60 @@ 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.1" do
     IO.warn("Version #{version} of bitstyles is not yet supported")
     class
   end
 
-  def classname(class, version) when version >= "4.2.0", do: class
+  # 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
+
+  def classname(class, version) when version >= "4.2.0" do
+    sizes_renaming = %{
+      "3xs" => "xxxs",
+      "2xs" => "xxs",
+      "2xl" => "xxl",
+      "3xl" => "xxxl"
+    }
+
+    class =
+      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",
+      "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"
+        "a-badge--text" -> "a-badge--gray"
+        "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
+
+    classname(class, "5.0.0")
+  end
 
   def classname(class, version) when version >= "4.0.0" do
     mapping =
@@ -28,7 +76,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/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/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/breadcrumbs.ex b/lib/bitstyles_phoenix/component/breadcrumbs.ex
index 1744ae5..e0f8862 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-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 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 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,24 +120,24 @@ 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">
+              <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-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 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 u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
@@ -139,24 +170,24 @@ 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">
+              <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-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 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 u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
@@ -181,14 +212,14 @@ 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]])}
               {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 u-margin-xs-left")} {@icon_extra} />
             </li>
           <% end %>
         </ol>
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/lib/bitstyles_phoenix/component/description_list.ex b/lib/bitstyles_phoenix/component/description_list.ex
index 62be529..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-m 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>
-            <dd class="u-col-span-2">
-              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">
-            <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>
-        """
-    ''',
+    [
+      "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,24 +88,24 @@ 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">
-            <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+          <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>
             <dd class="u-col-span-2">
               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">
-            <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
+          <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>
             <dd class="u-col-span-2 u-fg-brand-1" data-foo="bar">
               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">
-            <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+          <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
               </pre>
@@ -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-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-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>
@@ -162,7 +199,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-darker u-margin-xs-bottom@s", assigns[:class]])} {@extra}>
       <%= render_slot(@inner_block) %>
     </dt>
     """
diff --git a/lib/bitstyles_phoenix/component/dropdown.ex b/lib/bitstyles_phoenix/component/dropdown.ex
index dda83c6..a0e9d31 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.
@@ -66,6 +67,33 @@ defmodule BitstylesPhoenix.Component.Dropdown do
         ...> """
     ''',
     [
+      "5.0.1": '''
+          """
+          <div class="u-relative">
+            <button type="button" class="a-button a-button--secondary">
+              <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 u-list-none u-margin-s-top">
+              <li>
+                <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--transparent a-button--menu u-h6">
+                  Option 2
+                </a>
+              </li>
+            </ul>
+          </div>
+          """
+      ''',
       "4.3.0": '''
           """
           <div class="u-relative">
@@ -131,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
@@ -157,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>
@@ -166,14 +194,14 @@ 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--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>
@@ -212,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>
@@ -221,14 +249,14 @@ 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--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>
@@ -273,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>
@@ -282,14 +310,14 @@ 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--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>
@@ -329,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">
+          <ul class="a-dropdown u-overflow-y-auto u-list-none 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>
@@ -377,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>
@@ -386,21 +414,21 @@ 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--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>
@@ -427,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])
@@ -478,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)
 
@@ -499,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/error.ex b/lib/bitstyles_phoenix/component/error.ex
index 066f824..78dd66c 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.1": '''
+        """
+        <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.1": '''
+        """
+        <span class="u-fg-warning">
+          Foo error
+        </span>
+        """
+    ''',
     "4.3.0": '''
         """
         <span class="u-fg-warning">
diff --git a/lib/bitstyles_phoenix/component/heading.ex b/lib/bitstyles_phoenix/component/heading.ex
index 2899685..c06e4d0 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>
         ...> """
@@ -80,12 +80,12 @@ 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>
           </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
@@ -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>
@@ -218,26 +218,26 @@ 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>
         ...> """
     ''',
     '''
         """
-        <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
             </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>
-          <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 1316679..fc21923 100644
--- a/lib/bitstyles_phoenix/component/sidebar.ex
+++ b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -17,14 +17,14 @@ 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://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>
@@ -43,36 +43,36 @@ 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">
                 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 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--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-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--nav-large">
+                    <button type="button" class="a-button a-button--transparent">
                       <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>
-                    <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--menu">
+                        <a href="#" class="a-button a-button--transparent a-button--menu">
                           Logout
                         </a>
                       </li>
@@ -80,36 +80,36 @@ 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">
                 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 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--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-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--nav-large">
+                    <button type="button" class="a-button a-button--transparent">
                       <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>
-                    <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--menu">
+                        <a href="#" class="a-button a-button--transparent a-button--menu">
                           Logout
                         </a>
                       </li>
@@ -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">
                 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">
                 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">
               </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">
               </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"
   @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"
 
@@ -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])
@@ -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/lib/bitstyles_phoenix/component/tabs.ex b/lib/bitstyles_phoenix/component/tabs.ex
index 9d60136..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]
       ])
 
@@ -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>
     """
diff --git a/scripts/generate_version_showcase.ex b/scripts/generate_version_showcase.ex
index d1c9c20..b2ff6fa 100644
--- a/scripts/generate_version_showcase.ex
+++ b/scripts/generate_version_showcase.ex
@@ -7,6 +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 [
+    # 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",
diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
index ce3df7c..fd528b4 100644
--- a/test/bitstyles_phoenix/bitstyles_test.exs
+++ b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -4,13 +4,82 @@ 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"
+      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"
+      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-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
+      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"
+      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"
+      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-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"
+      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
       assert classname("u-border-radius-0", "4.2.0") == "u-border-radius-0"
     end
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