From 15ce57678d2b6fee974ac7bd3f87ccc7fa047b54 Mon Sep 17 00:00:00 2001
From: Angelika Cathor <angelikatyborska@fastmail.com>
Date: Wed, 25 Sep 2024 10:28:12 +0200
Subject: [PATCH] Upgrade bitstyles to 6.0.0 (#127)

* Set version 6.0.0 as highest

* Upgrade badge

* New sizing values; fix tests

* Upgrade flash

* Fix description list color

* Fix card tests

* Rebase bug

* Make sidebar demo look better

* Only replace utility classes with new sizes

* Fix rebase mistake

* Fix rebsing mistakes

* Add changelog entry
---
 CHANGELOG.md                                  |  9 ++-
 README.md                                     |  2 +-
 lib/bitstyles_phoenix.ex                      |  2 +-
 lib/bitstyles_phoenix/alpine3/dropdown.ex     |  4 +-
 lib/bitstyles_phoenix/alpine3/sidebar.ex      | 24 ++++----
 lib/bitstyles_phoenix/bitstyles.ex            | 53 ++++++++++++++++-
 lib/bitstyles_phoenix/bitstyles/version.ex    |  2 +-
 lib/bitstyles_phoenix/component/avatar.ex     |  4 +-
 lib/bitstyles_phoenix/component/badge.ex      | 38 ++++++++++---
 .../component/breadcrumbs.ex                  | 57 ++++++++++++++-----
 lib/bitstyles_phoenix/component/button.ex     | 26 +++++++++
 lib/bitstyles_phoenix/component/card.ex       |  4 +-
 .../component/description_list.ex             | 14 ++---
 lib/bitstyles_phoenix/component/dropdown.ex   | 39 +++++++++++--
 lib/bitstyles_phoenix/component/error.ex      | 18 +++++-
 lib/bitstyles_phoenix/component/flash.ex      | 53 +++++++++++------
 lib/bitstyles_phoenix/component/form.ex       |  2 +-
 lib/bitstyles_phoenix/component/heading.ex    | 14 ++---
 lib/bitstyles_phoenix/component/modal.ex      | 10 ++--
 lib/bitstyles_phoenix/component/sidebar.ex    | 50 ++++++++--------
 lib/bitstyles_phoenix/component/tabs.ex       | 20 +++----
 scripts/generate_version_showcase.ex          |  1 +
 test/bitstyles_phoenix/bitstyles_test.exs     | 42 +++++++++++++-
 23 files changed, 361 insertions(+), 127 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 487d58a..2726af0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,14 @@
 ## Unreleased
 
 - Switched bitstyles version comparisons from string comparisons to tuple comparisons, which will ensure correct output if bitstyles version ever contains a number above 9.
-- Modified the process of downgrading classnames to the target bitstyles version by chaining renames. This is necessary preparation work to support bitstyles 6.0.0.
+- Modified the process of downgrading classnames to the target bitstyles version by chaining renames. This is necessary preparation work to support bitstyles `v6.0.0`.
+- Added support for bitstyles `v6.0.0`. You can continue using bitstyles_phoenix with a lower bitstyles version, or migrate your codebase to bitstyles `v6.0.0`.
+
+### How to migrate to bitstyles `v6.0.0`
+
+Follow the [bitstyles changelog](https://github.com/bitcrowd/bitstyles/blob/main/CHANGELOG.md#600---2023-06-08) for version 6.0.0.
+
+There are no changes to bitstyles_phoenix component APIs.
 
 ## v2.4.0 - 2024-07-18
 
diff --git a/README.md b/README.md
index 2039994..0bbfb83 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 5.0.1 down to 1.3.0 are supported.
+Bitstyles versions from 6.0.0 down to 1.3.0 are supported.
 
 ## Installation
 
diff --git a/lib/bitstyles_phoenix.ex b/lib/bitstyles_phoenix.ex
index 1485211..18d6f07 100644
--- a/lib/bitstyles_phoenix.ex
+++ b/lib/bitstyles_phoenix.ex
@@ -109,7 +109,7 @@ defmodule BitstylesPhoenix do
 
   You can control how required labels are rendered. By default you will get this appended to your labels if the input is required:
   ```html
-    <span aria-hidden="true" class="u-fg-warning u-margin-xss-left">*</span>
+    <span aria-hidden="true" class="u-fg-warning u-margin-s4s-left">*</span>
   ```
 
   You can override it by specifying your own component to render the required labels. The component will get the form and the field as assigns, as well as any optional parameters you pass in the MFA as `@opts`.
diff --git a/lib/bitstyles_phoenix/alpine3/dropdown.ex b/lib/bitstyles_phoenix/alpine3/dropdown.ex
index 553fa7f..048451f 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 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">
+          <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s2-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 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">
+          <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s2-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 fe6785d..4f89ea5 100644
--- a/lib/bitstyles_phoenix/alpine3/sidebar.ex
+++ b/lib/bitstyles_phoenix/alpine3/sidebar.ex
@@ -40,9 +40,9 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
         ...>       <.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">
+        ...>   <:main :let={s} class="u-margin-s2-top">
         ...>     <.ui_content class="flex">
-        ...>       <.ui_js_sidebar_open sidebar={s} class="u-margin-s-right"/>
+        ...>       <.ui_js_sidebar_open sidebar={s} class="u-margin-s2-right"/>
         ...>       Main Content
         ...>     </.ui_content>
         ...>   </:main>
@@ -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-darker u-fg-text">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-grayscale-dark-2 u-fg-grayscale-light-2">
                 <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 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">
+                <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-s4-right u-padding-s4-left">
+                  <li class="u-margin-s4-bottom u-flex">
                     <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">
+                  <li class="u-margin-s4-bottom u-flex">
                     <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-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="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-grayscale-dark-2 u-fg-grayscale-light-2" @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"/>
@@ -94,13 +94,13 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                     </button>
                   </div>
                 </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">
-                  <li class="u-margin-xs-bottom u-flex">
+                <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-s4-right u-padding-s4-left">
+                  <li class="u-margin-s4-bottom u-flex">
                     <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">
+                  <li class="u-margin-s4-bottom u-flex">
                     <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #2
                     </a>
@@ -109,9 +109,9 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
               </div>
             </nav>
           </header>
-          <main class="u-flex-grow-1 u-overflow-y-auto u-margin-s-top">
+          <main class="u-flex-grow-1 u-overflow-y-auto u-margin-s2-top">
             <div class="a-content flex">
-              <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">
+              <button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = true" aria-controls="sidebar-small" class="a-button a-button--square u-hidden@l u-margin-s2-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 6a85068..fe72c8d 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -27,7 +27,7 @@ defmodule BitstylesPhoenix.Bitstyles do
   # for users of older bitstyles to use the "class-name-A" classname.
 
   defp downgrade_classname(class, target_version, _current_version)
-       when target_version > {5, 0, 1} do
+       when target_version > {6, 0, 0} do
     IO.warn("Version #{Version.to_string(target_version)} of bitstyles is not yet supported")
     class
   end
@@ -37,6 +37,57 @@ defmodule BitstylesPhoenix.Bitstyles do
     class
   end
 
+  defp downgrade_classname(class, target_version, {6, 0, 0}) do
+    # downgrading 6.0.0 -> 5.0.1
+    sizes_renaming = %{
+      "s7" => "4xs",
+      # 3xs has no size equivalent in new sizing
+      # exact match:
+      "s6" => "2xs",
+      "s5" => "2xs",
+      # exact match:
+      "s4" => "xs",
+      "s3" => "xs",
+      # exact match:
+      "s2" => "s",
+      "s1" => "s",
+      # exact match:
+      "m" => "m",
+      # exact match:
+      "l1" => "l",
+      "l2" => "l",
+      # exact match:
+      "l3" => "xl",
+      "l4" => "xl",
+      "l5" => "xl",
+      # exact match:
+      "l6" => "2xl",
+      # exact match:
+      "l7" => "3xl"
+      # 4xl has no size equivalent in new sizing
+    }
+
+    class =
+      Enum.reduce(sizes_renaming, class, fn {new_size, old_size}, acc ->
+        acc
+        |> String.replace("u-margin-#{new_size}", "u-margin-#{old_size}")
+        |> String.replace("u-margin-neg-#{new_size}", "u-margin-neg-#{old_size}")
+        |> String.replace("u-padding-#{new_size}", "u-padding-#{old_size}")
+        |> String.replace("u-padding-neg-#{new_size}", "u-padding-neg-#{old_size}")
+        |> String.replace("u-gap-#{new_size}", "u-gap-#{old_size}")
+      end)
+
+    class =
+      case class do
+        "u-bg-grayscale-dark-2" -> "u-bg-text-darker"
+        "u-fg-grayscale-dark-2" -> "u-fg-text-darker"
+        "u-fg-grayscale" -> "u-fg-text"
+        class -> class
+      end
+
+    downgrade_classname(class, target_version, {5, 0, 1})
+  end
+
   defp downgrade_classname(class, target_version, {5, 0, 1}) do
     # no changes when downgrading 5.0.1 -> 5.0.0
     downgrade_classname(class, target_version, {5, 0, 0})
diff --git a/lib/bitstyles_phoenix/bitstyles/version.ex b/lib/bitstyles_phoenix/bitstyles/version.ex
index 9ee0ec8..4a79565 100644
--- a/lib/bitstyles_phoenix/bitstyles/version.ex
+++ b/lib/bitstyles_phoenix/bitstyles/version.ex
@@ -1,7 +1,7 @@
 defmodule BitstylesPhoenix.Bitstyles.Version do
   @moduledoc false
 
-  @default_version "5.0.1"
+  @default_version "6.0.0"
 
   def version do
     to_tuple(version_string())
diff --git a/lib/bitstyles_phoenix/component/avatar.ex b/lib/bitstyles_phoenix/component/avatar.ex
index 8615943..8dd3366 100644
--- a/lib/bitstyles_phoenix/component/avatar.ex
+++ b/lib/bitstyles_phoenix/component/avatar.ex
@@ -85,7 +85,7 @@ defmodule BitstylesPhoenix.Component.Avatar do
           <div class="a-avatar">
             <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
           </div>
-          <span class="u-margin-s-left">
+          <span class="u-margin-s2-left">
             Username
           </span>
         </div>
@@ -114,7 +114,7 @@ defmodule BitstylesPhoenix.Component.Avatar do
         <img {@extra} />
       </div>
       <%= if assigns[:inner_block] do %>
-        <span class={classnames("u-margin-s-left")}>
+        <span class={classnames("u-margin-s2-left")}>
          <%= render_slot(@inner_block) %>
         </span>
       <% end %>
diff --git a/lib/bitstyles_phoenix/component/badge.ex b/lib/bitstyles_phoenix/component/badge.ex
index e49e871..2a51349 100644
--- a/lib/bitstyles_phoenix/component/badge.ex
+++ b/lib/bitstyles_phoenix/component/badge.ex
@@ -1,5 +1,6 @@
 defmodule BitstylesPhoenix.Component.Badge do
   use BitstylesPhoenix.Component
+  alias BitstylesPhoenix.Bitstyles
 
   @moduledoc """
   The Badge component.
@@ -27,6 +28,13 @@ defmodule BitstylesPhoenix.Component.Badge do
         ...> </.ui_badge>
         ...> """
     ''',
+    "6.0.0": '''
+        """
+        <span class="a-badge u-h6 u-font-medium" data-theme="grayscale">
+          published
+        </span>
+        """
+    ''',
     "5.0.1": '''
         """
         <span class="a-badge u-h6 u-font-medium a-badge--text">
@@ -53,7 +61,14 @@ defmodule BitstylesPhoenix.Component.Badge do
         ...> </.ui_badge>
         ...> """
     ''',
-    '''
+    "6.0.0": '''
+        """
+        <span class="a-badge u-h6 u-font-medium" data-theme="brand-1">
+          new
+        </span>
+        """
+    ''',
+    "5.0.1": '''
         """
         <span class="a-badge u-h6 u-font-medium a-badge--brand-1">
           new
@@ -74,7 +89,7 @@ defmodule BitstylesPhoenix.Component.Badge do
     ''',
     '''
         """
-        <span class="a-badge u-h6 u-font-medium a-badge--brand-2">
+        <span class="a-badge u-h6 u-font-medium" data-theme="brand-2">
           recommended
         </span>
         """
@@ -93,7 +108,7 @@ defmodule BitstylesPhoenix.Component.Badge do
     ''',
     '''
         """
-        <span class="a-badge u-h6 u-font-medium a-badge--danger">
+        <span class="a-badge u-h6 u-font-medium" data-theme="danger">
           deleted
         </span>
         """
@@ -112,7 +127,7 @@ defmodule BitstylesPhoenix.Component.Badge do
     ''',
     '''
         """
-        <span class="a-badge u-h6 u-font-medium a-badge--text extra-class" data-foo="bar">
+        <span class="a-badge u-h6 u-font-medium extra-class" data-theme="grayscale" data-foo="bar">
           published
         </span>
         """
@@ -120,15 +135,24 @@ defmodule BitstylesPhoenix.Component.Badge do
   )
 
   def ui_badge(assigns) do
-    variant = assigns[:variant] || "text"
+    extra = assigns_to_attributes(assigns, [:class, :variant])
+
+    {variant_class, extra} =
+      if Bitstyles.Version.version() >= {6, 0, 0} do
+        theme = assigns[:variant] || "grayscale"
+        {nil, Keyword.put_new(extra, :"data-theme", theme)}
+      else
+        variant = assigns[:variant] || "text"
+        {"a-badge--#{variant}", extra}
+      end
 
     class =
       classnames([
-        "a-badge u-h6 u-font-medium a-badge--#{variant}",
+        "a-badge u-h6 u-font-medium",
+        variant_class,
         assigns[:class]
       ])
 
-    extra = assigns_to_attributes(assigns, [:class, :variant])
     assigns = assign(assigns, class: class, extra: extra)
     ~H"<span class={@class} {@extra}><%= render_slot(@inner_block) %></span>"
   end
diff --git a/lib/bitstyles_phoenix/component/breadcrumbs.ex b/lib/bitstyles_phoenix/component/breadcrumbs.ex
index e0f8862..bbf2bba 100644
--- a/lib/bitstyles_phoenix/component/breadcrumbs.ex
+++ b/lib/bitstyles_phoenix/component/breadcrumbs.ex
@@ -41,6 +41,35 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
         ...> """
     ''',
     [
+      "6.0.0": '''
+          """
+          <nav aria-label="breadcrumbs">
+            <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center">
+              <li class="u-margin-s4-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-grayscale u-margin-s4-left" focusable="false" height="16" width="16">
+                  <use xlink:href="#icon-caret-right">
+                  </use>
+                </svg>
+              </li>
+              <li class="u-margin-s4-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-grayscale u-margin-s4-left" focusable="false" height="16" width="16">
+                  <use xlink:href="#icon-caret-right">
+                  </use>
+                </svg>
+              </li>
+              <li class="u-margin-s4-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-grayscale u-margin-s4-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">
@@ -121,23 +150,23 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
         """
         <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">
+            <li class="u-margin-s4-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">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-grayscale u-margin-s4-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">
+            <li class="u-margin-s4-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">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-grayscale u-margin-s4-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">
+            <li class="u-margin-s4-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">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-grayscale u-margin-s4-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
@@ -171,23 +200,23 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
         """
         <nav aria-label="breadcrumbs" data-foo="bar">
           <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">
+            <li class="u-margin-s4-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 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-grayscale u-margin-s4-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">
+            <li class="u-margin-s4-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">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-grayscale u-margin-s4-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">
+            <li class="u-margin-s4-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">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-grayscale u-margin-s4-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
@@ -215,11 +244,11 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
         <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]])}
+              class={classnames(["u-margin-s4-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-text u-margin-xs-left")} {@icon_extra} />
+              <.ui_icon name="caret-right" size="m" class={classnames("u-fg-grayscale u-margin-s4-left")} {@icon_extra} />
             </li>
           <% end %>
         </ol>
diff --git a/lib/bitstyles_phoenix/component/button.ex b/lib/bitstyles_phoenix/component/button.ex
index 358bfff..eada78f 100644
--- a/lib/bitstyles_phoenix/component/button.ex
+++ b/lib/bitstyles_phoenix/component/button.ex
@@ -430,6 +430,19 @@ defmodule BitstylesPhoenix.Component.Button do
         ...> """
     ''',
     [
+      "6.0.0": '''
+          """
+          <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>
+          """
+      ''',
       "5.0.1": '''
           """
           <a href="#" class="a-button a-button--square" title="Add">
@@ -498,6 +511,19 @@ defmodule BitstylesPhoenix.Component.Button do
         ...> """
     ''',
     [
+      "6.0.0": '''
+          """
+          <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>
+          """
+      ''',
       "5.0.1": '''
           """
           <a href="#" class="a-button a-button--square" data-theme="dark" title="Show">
diff --git a/lib/bitstyles_phoenix/component/card.ex b/lib/bitstyles_phoenix/component/card.ex
index c8ab376..380acd0 100644
--- a/lib/bitstyles_phoenix/component/card.ex
+++ b/lib/bitstyles_phoenix/component/card.ex
@@ -63,7 +63,7 @@ defmodule BitstylesPhoenix.Component.Card do
     '''
         """
         <article class="a-card a-card-l">
-          <div aria-live="polite" class="u-padding-l-y a-flash a-flash--danger a-card-l__header">
+          <div aria-live="polite" class="u-padding-l1-y a-flash a-card-l__header" data-theme="danger">
             <div class="a-content u-flex u-items-center u-font-medium">
               Its me mario
             </div>
@@ -90,7 +90,7 @@ defmodule BitstylesPhoenix.Component.Card do
     '''
         """
         <article class="a-card">
-          <div aria-live="polite" class="u-padding-l-y a-flash a-flash--danger a-card__header">
+          <div aria-live="polite" class="u-padding-l1-y a-flash a-card__header" data-theme="danger">
             <div class="a-content u-flex u-items-center u-font-medium">
               Its me mario
             </div>
diff --git a/lib/bitstyles_phoenix/component/description_list.ex b/lib/bitstyles_phoenix/component/description_list.ex
index da989e2..4412965 100644
--- a/lib/bitstyles_phoenix/component/description_list.ex
+++ b/lib/bitstyles_phoenix/component/description_list.ex
@@ -18,11 +18,11 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
         ...> """
     ''',
     [
-      "5.0.1": '''
+      "6.0.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-l">
-              <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
+              <dt class="u-font-medium u-h6 u-fg-grayscale-dark-2 u-margin-s4-bottom@s">
                 Length
               </dt>
               <dd class="u-col-span-2">
@@ -30,7 +30,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
               </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">
+              <dt class="u-font-medium u-h6 u-fg-grayscale-dark-2 u-margin-s4-bottom@s">
                 Inserted at
               </dt>
               <dd class="u-col-span-2">
@@ -89,7 +89,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-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">
+            <dt class="u-font-medium u-h6 u-fg-grayscale-dark-2 u-margin-s4-bottom@s">
               Length
             </dt>
             <dd class="u-col-span-2">
@@ -97,7 +97,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
             </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 u-fg-brand-1" data-foo="bar">
+            <dt class="u-font-medium u-h6 u-fg-grayscale-dark-2 u-margin-s4-bottom@s u-fg-brand-1" data-foo="bar">
               Some
             </dt>
             <dd class="u-col-span-2 u-fg-brand-1" data-foo="bar">
@@ -105,7 +105,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
             </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">
+            <dt class="u-font-medium u-h6 u-fg-grayscale-dark-2 u-margin-s4-bottom@s">
               <pre>
                 Tag
               </pre>
@@ -199,7 +199,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
     assigns = assign(assigns, extra: extra)
 
     ~H"""
-    <dt class={classnames(["u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s", assigns[:class]])} {@extra}>
+    <dt class={classnames(["u-font-medium u-h6 u-fg-grayscale-dark-2 u-margin-s4-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 bfbc198..283a7cb 100644
--- a/lib/bitstyles_phoenix/component/dropdown.ex
+++ b/lib/bitstyles_phoenix/component/dropdown.ex
@@ -67,6 +67,33 @@ defmodule BitstylesPhoenix.Component.Dropdown do
         ...> """
     ''',
     [
+      "6.0.0": '''
+          """
+          <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-s2-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>
+          """
+      ''',
       "5.0.1": '''
           """
           <div class="u-relative">
@@ -194,7 +221,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
                 </use>
               </svg>
             </button>
-            <ul class="a-dropdown u-overflow-y-auto u-list-none a-dropdown--top u-margin-s-bottom">
+            <ul class="a-dropdown u-overflow-y-auto u-list-none a-dropdown--top u-margin-s2-bottom">
               <li>
                 <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 1
@@ -249,7 +276,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
               </use>
             </svg>
           </button>
-          <ul class="a-dropdown u-overflow-y-auto u-list-none a-dropdown--right u-margin-s-top">
+          <ul class="a-dropdown u-overflow-y-auto u-list-none a-dropdown--right u-margin-s2-top">
             <li>
               <a href="#" class="a-button a-button--transparent a-button--menu">
                 Option 1
@@ -310,7 +337,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
                 </use>
               </svg>
             </button>
-            <ul class="a-dropdown u-overflow-y-auto u-list-none 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-s2-bottom">
               <li>
                 <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 1
@@ -360,7 +387,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 u-list-none u-margin-s-top">
+          <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s2-top">
             <li>
               <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 1
@@ -414,7 +441,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
                 </use>
               </svg>
             </button>
-            <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">
+            <ul class="a-dropdown u-overflow-y-auto u-list-none a-dropdown--full-width u-margin-s2-top" id="dropdown-1" style="display: none">
               <li>
                 <a href="#" class="a-button a-button--transparent a-button--menu foo">
                   Option 1
@@ -550,7 +577,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
   end
 
   defp margin(variant) do
-    if variant?(:top, variant), do: "u-margin-s-bottom", else: "u-margin-s-top"
+    if variant?(:top, variant), do: "u-margin-s2-bottom", else: "u-margin-s2-top"
   end
 
   defp variant_classes(nil), do: []
diff --git a/lib/bitstyles_phoenix/component/error.ex b/lib/bitstyles_phoenix/component/error.ex
index 78dd66c..42085d4 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} />
         ...> """
     ''',
+    "6.0.0": '''
+        """
+        <span class="u-fg-warning" phx-feedback-for="user[name]">
+          is too short
+        </span>
+        """
+    ''',
     "5.0.1": '''
         """
         <span class="u-fg-warning" phx-feedback-for="user[name]">
@@ -64,7 +71,7 @@ defmodule BitstylesPhoenix.Component.Error do
     ''',
     '''
         """
-        <ul class="u-padding-xl-left">
+        <ul class="u-padding-l3-left">
           <li>
             <span class="u-fg-warning" phx-feedback-for="user[email]">
               is invalid
@@ -98,7 +105,7 @@ defmodule BitstylesPhoenix.Component.Error do
         """
 
       errors ->
-        class = classnames(["u-padding-xl-left", assigns[:class]])
+        class = classnames(["u-padding-l3-left", assigns[:class]])
         assigns = assign(assigns, class: class, errors: errors)
 
         ~H"""
@@ -138,6 +145,13 @@ defmodule BitstylesPhoenix.Component.Error do
         ...> <.ui_error error={{"Foo error", []}} />
         ...> """
     ''',
+    "6.0.0": '''
+        """
+        <span class="u-fg-warning">
+          Foo error
+        </span>
+        """
+    ''',
     "5.0.1": '''
         """
         <span class="u-fg-warning">
diff --git a/lib/bitstyles_phoenix/component/flash.ex b/lib/bitstyles_phoenix/component/flash.ex
index eb03fd4..58754bd 100644
--- a/lib/bitstyles_phoenix/component/flash.ex
+++ b/lib/bitstyles_phoenix/component/flash.ex
@@ -2,6 +2,7 @@ defmodule BitstylesPhoenix.Component.Flash do
   use BitstylesPhoenix.Component
 
   import BitstylesPhoenix.Component.Content
+  alias BitstylesPhoenix.Bitstyles
 
   @moduledoc """
   Component for building flash messages.
@@ -36,15 +37,26 @@ defmodule BitstylesPhoenix.Component.Flash do
         ...>   </.ui_flash>
         ...> """)
     ''',
-    '''
-        """
-        <div aria-live="polite" class="u-padding-l-y a-flash a-flash--brand-1">
-          <div class="a-content u-flex u-items-center u-font-medium">
-            Something you may be interested to hear
+    [
+      "6.0.0": '''
+          """
+          <div aria-live="polite" class="u-padding-l1-y a-flash" data-theme="brand-1">
+            <div class="a-content u-flex u-items-center u-font-medium">
+              Something you may be interested to hear
+            </div>
           </div>
-        </div>
-        """
-    ''',
+          """
+      ''',
+      "5.0.1": '''
+          """
+          <div aria-live="polite" class="u-padding-l-y a-flash a-flash--brand-1">
+            <div class="a-content u-flex u-items-center u-font-medium">
+              Something you may be interested to hear
+            </div>
+          </div>
+          """
+      '''
+    ],
     width: "100%"
   )
 
@@ -60,7 +72,7 @@ defmodule BitstylesPhoenix.Component.Flash do
     ''',
     '''
         """
-        <div aria-live="polite" class="u-padding-l-y a-flash a-flash--positive">
+        <div aria-live="polite" class="u-padding-l1-y a-flash" data-theme="positive">
           <div class="a-content u-flex u-items-center u-font-medium">
             Saved successfully
           </div>
@@ -82,7 +94,7 @@ defmodule BitstylesPhoenix.Component.Flash do
     ''',
     '''
         """
-        <div aria-live="polite" class="u-padding-l-y a-flash a-flash--warning">
+        <div aria-live="polite" class="u-padding-l1-y a-flash" data-theme="warning">
           <div class="a-content u-flex u-items-center u-font-medium">
             Saved with errors
           </div>
@@ -104,7 +116,7 @@ defmodule BitstylesPhoenix.Component.Flash do
     ''',
     '''
         """
-        <div aria-live="polite" class="u-padding-l-y a-flash a-flash--danger">
+        <div aria-live="polite" class="u-padding-l1-y a-flash" data-theme="danger">
           <div class="a-content u-flex u-items-center u-font-medium">
             Saving failed
           </div>
@@ -126,7 +138,7 @@ defmodule BitstylesPhoenix.Component.Flash do
     ''',
     '''
         """
-        <div aria-live="polite" class="u-padding-l-y a-flash a-flash--danger">
+        <div aria-live="polite" class="u-padding-l1-y a-flash" data-theme="danger">
           <div class="a-content a-content--full u-flex u-items-center u-font-medium">
             Saving failed
           </div>
@@ -148,7 +160,7 @@ defmodule BitstylesPhoenix.Component.Flash do
     ''',
     '''
         """
-        <div aria-live="polite" class="u-padding-l-y a-flash a-flash--brand-1 extra-class" data-foo="bar">
+        <div aria-live="polite" class="u-padding-l1-y a-flash extra-class" data-theme="brand-1" data-foo="bar">
           <div class="a-content u-flex u-items-center u-font-medium extra-inner-class">
             Saving failed
           </div>
@@ -166,17 +178,24 @@ defmodule BitstylesPhoenix.Component.Flash do
     {content_variants, flash_variants} =
       Enum.split_with(variants, &Enum.member?(@content_variants, &1))
 
+    extra = assigns_to_attributes(assigns, [:class, :content_class, :variant])
+
+    {variant_class, extra} =
+      if Bitstyles.Version.version() >= {6, 0, 0} do
+        {nil, Keyword.put_new(extra, :"data-theme", Enum.at(flash_variants, 0))}
+      else
+        {flash_variants |> Enum.map_join(" ", &"a-flash--#{&1}"), extra}
+      end
+
     class =
       classnames([
-        "u-padding-l-y a-flash",
-        flash_variants |> Enum.map_join(" ", &"a-flash--#{&1}"),
+        "u-padding-l1-y a-flash",
+        variant_class,
         assigns[:class]
       ])
 
     content_class = classnames(["u-flex u-items-center u-font-medium", assigns[:content_class]])
 
-    extra = assigns_to_attributes(assigns, [:class, :content_class, :variant])
-
     assigns =
       assign(assigns,
         class: class,
diff --git a/lib/bitstyles_phoenix/component/form.ex b/lib/bitstyles_phoenix/component/form.ex
index a7ca967..74b63d6 100644
--- a/lib/bitstyles_phoenix/component/form.ex
+++ b/lib/bitstyles_phoenix/component/form.ex
@@ -146,7 +146,7 @@ defmodule BitstylesPhoenix.Component.Form do
           Email
         </label>
         <input id="user_email" name="user[email]" type="text" maxlength="255"/>
-        <ul class=\"u-padding-xl-left\">
+        <ul class=\"u-padding-l3-left\">
           <li>
             <span class=\"u-fg-warning\" phx-feedback-for=\"user[email]\">
               is invalid
diff --git a/lib/bitstyles_phoenix/component/heading.ex b/lib/bitstyles_phoenix/component/heading.ex
index e8c10b1..9c2bc9d 100644
--- a/lib/bitstyles_phoenix/component/heading.ex
+++ b/lib/bitstyles_phoenix/component/heading.ex
@@ -80,18 +80,18 @@ 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--text">
+              <span class="a-badge u-h6 u-font-medium" data-theme="grayscale">
                 Published
               </span>
             </div>
           </div>
           <ul class="u-list-none u-flex u-flex-wrap">
-            <li class="u-margin-s-right u-margin-m-bottom">
+            <li class="u-margin-s2-right u-margin-m-bottom">
               <button type="button" class="a-button">
                 Edit
               </button>
             </li>
-            <li class="u-margin-s-right u-margin-m-bottom">
+            <li class="u-margin-s2-right u-margin-m-bottom">
               <button type="button" class="a-button a-button--danger">
                 Delete
               </button>
@@ -233,17 +233,17 @@ 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--text">
+            <span class="a-badge u-h6 u-font-medium" data-theme="grayscale">
               Published
             </span>
           </div>
           <ul class="u-list-none u-flex u-flex-wrap">
-            <li class="u-margin-s-right u-margin-m-bottom">
+            <li class="u-margin-s2-right u-margin-m-bottom">
               <button type="button" class="a-button">
                 Edit
               </button>
             </li>
-            <li class="u-margin-s-right u-margin-m-bottom">
+            <li class="u-margin-s2-right u-margin-m-bottom">
               <button type="button" class="a-button a-button--danger">
                 Delete
               </button>
@@ -299,7 +299,7 @@ defmodule BitstylesPhoenix.Component.Heading do
     <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])}>
+          <li class={classnames(["u-margin-s2-right u-margin-m-bottom", action[:class]])} {assigns_to_attributes(action, [:class, :show])}>
             <%= render_slot(action) %>
           </li>
         <% end %>
diff --git a/lib/bitstyles_phoenix/component/modal.ex b/lib/bitstyles_phoenix/component/modal.ex
index d473274..6218515 100644
--- a/lib/bitstyles_phoenix/component/modal.ex
+++ b/lib/bitstyles_phoenix/component/modal.ex
@@ -49,7 +49,7 @@ defmodule BitstylesPhoenix.Component.Modal do
         <div class="o-modal" aria-modal="true" role="dialog">
           <div class="o-modal__overlay">
           </div>
-          <div class="a-content o-modal__content a-card u-padding-xl@m u-padding-l u-flex u-flex-col" role="document">
+          <div class="a-content o-modal__content a-card u-padding-xl@m u-padding-l1 u-flex u-flex-col" role="document">
             Content
           </div>
         </div>
@@ -77,7 +77,7 @@ defmodule BitstylesPhoenix.Component.Modal do
         <div class="o-modal foo" aria-modal="true" role="dialog" aria-labelledby="dialog-title">
           <div class="o-modal__overlay">
           </div>
-          <div class="a-content a-content--s o-modal__content a-card u-padding-xl@m u-padding-l u-flex u-flex-col bar" foo="bar" role="document">
+          <div class="a-content a-content--s o-modal__content a-card u-padding-xl@m u-padding-l1 u-flex u-flex-col bar" foo="bar" role="document">
             Content
           </div>
         </div>
@@ -104,7 +104,7 @@ defmodule BitstylesPhoenix.Component.Modal do
         <div class="o-modal" aria-modal="true" role="dialog">
           <div class="o-modal__overlay extra" data-foo="bar">
           </div>
-          <div class="a-content o-modal__content a-card u-padding-xl@m u-padding-l u-flex u-flex-col" role="document">
+          <div class="a-content o-modal__content a-card u-padding-xl@m u-padding-l1 u-flex u-flex-col" role="document">
             Content
           </div>
         </div>
@@ -136,7 +136,7 @@ defmodule BitstylesPhoenix.Component.Modal do
               Overlay content
             </span>
           </div>
-          <div class="a-content o-modal__content a-card u-padding-xl@m u-padding-l u-flex u-flex-col" role="document">
+          <div class="a-content o-modal__content a-card u-padding-xl@m u-padding-l1 u-flex u-flex-col" role="document">
             Content
           </div>
         </div>
@@ -156,7 +156,7 @@ defmodule BitstylesPhoenix.Component.Modal do
 
     content_class =
       classnames([
-        "o-modal__content a-card u-padding-xl@m u-padding-l u-flex u-flex-col",
+        "o-modal__content a-card u-padding-xl@m u-padding-l1 u-flex u-flex-col",
         content_extra[:class]
       ])
 
diff --git a/lib/bitstyles_phoenix/component/sidebar.ex b/lib/bitstyles_phoenix/component/sidebar.ex
index 60fc435..49fef57 100644
--- a/lib/bitstyles_phoenix/component/sidebar.ex
+++ b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -12,7 +12,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         ...> <.ui_sidebar_layout>
         ...>   <:large_sidebar>Large header</:large_sidebar>
         ...>   <:small_sidebar>Small header</:small_sidebar>
-        ...>   <:sidebar_content>
+        ...>   <:sidebar_content data-theme="dark">
         ...>     <.ui_sidebar_section border="bottom">
         ...>       Menu
         ...>     </.ui_sidebar_section>
@@ -43,24 +43,24 @@ 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">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-grayscale-dark-2 u-fg-grayscale-light-2" data-theme="dark">
                 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-dark-bottom u-margin-xs-bottom">
+                <div class="u-flex-shrink-0 u-padding-s4-y u-margin-s4-left u-margin-s4-right u-flex u-flex-col u-border-gray-dark-bottom u-margin-s4-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">
-                  <li class="u-margin-xs-bottom u-flex">
+                <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-s4-right u-padding-s4-left">
+                  <li class="u-margin-s4-bottom u-flex">
                     <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">
+                  <li class="u-margin-s4-bottom u-flex">
                     <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-dark-top u-margin-xs-top">
+                <div class="u-flex-shrink-0 u-padding-s4-y u-margin-s4-left u-margin-s4-right u-flex u-flex-col u-border-gray-dark-top u-margin-s4-top">
                   <div class="u-relative">
                     <button type="button" class="a-button a-button--transparent">
                       <div class="a-button__icon a-avatar">
@@ -70,7 +70,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                         Jane Dobermann
                       </span>
                     </button>
-                    <ul class="a-dropdown u-overflow-y-auto u-list-none 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-s2-bottom">
                       <li>
                         <a href="#" class="a-button a-button--transparent a-button--menu">
                           Logout
@@ -80,24 +80,24 @@ 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">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-grayscale-dark-2 u-fg-grayscale-light-2" data-theme="dark">
                 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-dark-bottom u-margin-xs-bottom">
+                <div class="u-flex-shrink-0 u-padding-s4-y u-margin-s4-left u-margin-s4-right u-flex u-flex-col u-border-gray-dark-bottom u-margin-s4-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">
-                  <li class="u-margin-xs-bottom u-flex">
+                <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-s4-right u-padding-s4-left">
+                  <li class="u-margin-s4-bottom u-flex">
                     <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">
+                  <li class="u-margin-s4-bottom u-flex">
                     <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-dark-top u-margin-xs-top">
+                <div class="u-flex-shrink-0 u-padding-s4-y u-margin-s4-left u-margin-s4-right u-flex u-flex-col u-border-gray-dark-top u-margin-s4-top">
                   <div class="u-relative">
                     <button type="button" class="a-button a-button--transparent">
                       <div class="a-button__icon a-avatar">
@@ -107,7 +107,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                         Jane Dobermann
                       </span>
                     </button>
-                    <ul class="a-dropdown u-overflow-y-auto u-list-none 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-s2-bottom">
                       <li>
                         <a href="#" class="a-button a-button--transparent a-button--menu">
                           Logout
@@ -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">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-grayscale-dark-2 u-fg-grayscale-light-2">
                 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">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-grayscale-dark-2 u-fg-grayscale-light-2">
                 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">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-grayscale-dark-2 u-fg-grayscale-light-2">
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-grayscale-dark-2 u-fg-grayscale-light-2">
               </div>
             </nav>
           </header>
@@ -264,8 +264,8 @@ defmodule BitstylesPhoenix.Component.Sidebar do
     transparent: false
   )
 
-  @default_bg "gray-darker"
-  @default_fg "text"
+  @default_bg "grayscale-dark-2"
+  @default_fg "grayscale-light-2"
   @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"
 
@@ -361,7 +361,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 u-list-none u-flex " <>
-                         "u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left"
+                         "u-flex-col u-items-stretch u-padding-s4-right u-padding-s4-left"
   def ui_sidebar_nav(assigns) do
     extra = assigns_to_attributes(assigns, [:class])
     class = classnames([@sidebar_nav_classes, assigns[:class]])
@@ -387,7 +387,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
   """
   def ui_sidebar_nav_item(assigns) do
     extra = assigns_to_attributes(assigns, [:class])
-    class = classnames(["u-margin-xs-bottom u-flex", assigns[:class]])
+    class = classnames(["u-margin-s4-bottom u-flex", assigns[:class]])
     assigns = assign(assigns, extra: extra, class: class)
 
     ~H"""
@@ -411,7 +411,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
   - 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_classes "u-flex-shrink-0 u-padding-s4-y u-margin-s4-left u-margin-s4-right u-flex u-flex-col"
   @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)
@@ -421,7 +421,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
       classnames([
         @sidebar_section_classes,
         assigns[:class],
-        {"u-border-#{border_color}-#{border} u-margin-xs-#{border}", !!border}
+        {"u-border-#{border_color}-#{border} u-margin-s4-#{border}", !!border}
       ])
 
     extra = assigns_to_attributes(assigns, [:class, :border, :border_color])
diff --git a/lib/bitstyles_phoenix/component/tabs.ex b/lib/bitstyles_phoenix/component/tabs.ex
index b79f062..183e6c8 100644
--- a/lib/bitstyles_phoenix/component/tabs.ex
+++ b/lib/bitstyles_phoenix/component/tabs.ex
@@ -41,17 +41,17 @@ defmodule BitstylesPhoenix.Component.Tabs do
     '''
         """
         <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">
+          <li class="u-margin-s2-right">
             <button type="button" class="a-button a-button--tab">
               Foo
             </button>
           </li>
-          <li class="u-margin-s-right">
+          <li class="u-margin-s2-right">
             <button type="button" class="a-button a-button--tab">
               Bar
             </button>
           </li>
-          <li class="u-margin-s-right">
+          <li class="u-margin-s2-right">
             <button type="button" class="a-button a-button--tab">
               Baz
             </button>
@@ -77,17 +77,17 @@ defmodule BitstylesPhoenix.Component.Tabs do
     '''
         """
         <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">
+          <li class="u-margin-s2-right">
             <button type="button" aria-selected="true" class="a-button a-button--tab">
               Foo
             </button>
           </li>
-          <li class="u-margin-s-right">
+          <li class="u-margin-s2-right">
             <button type="button" aria-selected="false" class="a-button a-button--tab">
               Bar
             </button>
           </li>
-          <li class="u-margin-s-right">
+          <li class="u-margin-s2-right">
             <button type="button" aria-selected="false" class="a-button a-button--tab">
               Baz
             </button>
@@ -113,17 +113,17 @@ defmodule BitstylesPhoenix.Component.Tabs do
     '''
         """
         <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">
+          <li class="u-margin-s2-right">
             <button type="button" aria-selected="true" class="a-button a-button--tab">
               Foo
             </button>
           </li>
-          <li class="u-margin-s-right">
+          <li class="u-margin-s2-right">
             <button type="button" aria-selected="false" class="a-button a-button--tab">
               Bar
             </button>
           </li>
-          <li class="u-margin-s-right">
+          <li class="u-margin-s2-right">
             <a href="#" aria-selected="false" class="a-button a-button--tab extra">
               Baz
             </a>
@@ -149,7 +149,7 @@ defmodule BitstylesPhoenix.Component.Tabs do
       <%= for tab <- @tab do %>
         <%= if Map.get(tab, :show, true) do %>
           <li
-            class={classnames(["u-margin-s-right"])}
+            class={classnames(["u-margin-s2-right"])}
           >
             <.ui_tab_button {button_options(tab, assigns[:active])}>
               <%= render_slot(tab) %>
diff --git a/scripts/generate_version_showcase.ex b/scripts/generate_version_showcase.ex
index 9dfaff7..27ecc7b 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 [
+    "6.0.0",
     # do not use 5.0.0, it has an incorrect CSS build on the CDN
     "5.0.1",
     "4.3.0",
diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
index d1c07e4..cc66da6 100644
--- a/test/bitstyles_phoenix/bitstyles_test.exs
+++ b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -4,16 +4,17 @@ defmodule BitstylesPhoenix.BitstylesTest do
   import ExUnit.CaptureIO
 
   describe "classname/2" do
-    test "version 6.0.0" do
+    test "version 6.1.0" do
       assert Regex.match?(
-               ~r/6.0.0 of bitstyles is not yet supported/,
-               capture_io(:stderr, fn -> classname("u-flex", {6, 0, 0}) end)
+               ~r/6.1.0 of bitstyles is not yet supported/,
+               capture_io(:stderr, fn -> classname("u-flex", {6, 1, 0}) end)
              )
     end
 
     test "chained version downgrade" do
       # those class changes are only added in the test environment, to test that chaining works
       # and won't be available to the users of bitstyles_phoenix
+      assert classname("u-version-5-0-0", {6, 0, 0}) == "u-version-5-0-0"
       assert classname("u-version-5-0-0", {5, 0, 1}) == "u-version-5-0-0"
       assert classname("u-version-5-0-0", {5, 0, 0}) == "u-version-5-0-0"
       assert classname("u-version-5-0-0", {4, 3, 0}) == "u-version-4"
@@ -28,6 +29,24 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-version-5-0-0", {1, 3, 0}) == "u-version-1-3"
     end
 
+    test "version 6.0.0" do
+      assert classname("u-margin-s7", {6, 0, 0}) == "u-margin-s7"
+      assert classname("u-margin-s6\@m", {6, 0, 0}) == "u-margin-s6\@m"
+      assert classname("u-margin-s6-bottom", {6, 0, 0}) == "u-margin-s6-bottom"
+      assert classname("u-padding-l6", {6, 0, 0}) == "u-padding-l6"
+      assert classname("u-padding-l7\@l", {6, 0, 0}) == "u-padding-l7\@l"
+      assert classname("u-margin-l7-bottom", {6, 0, 0}) == "u-margin-l7-bottom"
+      assert classname("u-margin-neg-l7-bottom", {6, 0, 0}) == "u-margin-neg-l7-bottom"
+      assert classname("u-gap-l1", {6, 0, 0}) == "u-gap-l1"
+      assert classname("u-gap-s1", {6, 0, 0}) == "u-gap-s1"
+      assert classname("u-content--s", {6, 0, 0}) == "u-content--s"
+      assert classname("u-content--l", {6, 0, 0}) == "u-content--l"
+
+      assert classname("u-fg-grayscale", {6, 0, 0}) == "u-fg-grayscale"
+      assert classname("u-fg-grayscale-dark-2", {6, 0, 0}) == "u-fg-grayscale-dark-2"
+      assert classname("u-bg-grayscale-dark-2", {6, 0, 0}) == "u-bg-grayscale-dark-2"
+    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"
@@ -60,6 +79,23 @@ defmodule BitstylesPhoenix.BitstylesTest do
       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"
+
+      assert classname("u-margin-s7", {5, 0, 0}) == "u-margin-4xs"
+      assert classname("u-margin-s6\@m", {5, 0, 0}) == "u-margin-2xs\@m"
+      assert classname("u-margin-s6-bottom", {5, 0, 0}) == "u-margin-2xs-bottom"
+      assert classname("u-padding-l6", {5, 0, 0}) == "u-padding-2xl"
+      assert classname("u-padding-l7\@l", {5, 0, 0}) == "u-padding-3xl\@l"
+      assert classname("u-margin-l7-bottom", {5, 0, 0}) == "u-margin-3xl-bottom"
+      assert classname("u-margin-neg-l7-bottom", {5, 0, 0}) == "u-margin-neg-3xl-bottom"
+      assert classname("u-gap-l1", {5, 0, 0}) == "u-gap-l"
+      assert classname("u-gap-s1", {5, 0, 0}) == "u-gap-s"
+      # content does not get changed
+      assert classname("u-content--s", {5, 0, 0}) == "u-content--s"
+      assert classname("u-content--l", {5, 0, 0}) == "u-content--l"
+
+      assert classname("u-fg-grayscale", {5, 0, 0}) == "u-fg-text"
+      assert classname("u-fg-grayscale-dark-2", {5, 0, 0}) == "u-fg-text-darker"
+      assert classname("u-bg-grayscale-dark-2", {5, 0, 0}) == "u-bg-text-darker"
     end
 
     test "version 4.3.0" do