From d13fe874bafb4ed1f524af4d0ceeeba65e721cb2 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Tue, 2 Jul 2024 15:04:48 +0200
Subject: [PATCH] New sizing values; fix tests

---
 lib/bitstyles_phoenix.ex                      |  2 +-
 lib/bitstyles_phoenix/alpine3/dropdown.ex     |  4 +-
 lib/bitstyles_phoenix/alpine3/sidebar.ex      | 20 ++++----
 lib/bitstyles_phoenix/bitstyles.ex            | 50 ++++++++++++++++++-
 lib/bitstyles_phoenix/component/avatar.ex     |  4 +-
 .../component/breadcrumbs.ex                  | 40 +++++++--------
 lib/bitstyles_phoenix/component/card.ex       |  4 +-
 .../component/description_list.ex             | 12 ++---
 lib/bitstyles_phoenix/component/dropdown.ex   | 14 +++---
 lib/bitstyles_phoenix/component/error.ex      |  4 +-
 lib/bitstyles_phoenix/component/flash.ex      | 14 +++---
 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    | 32 ++++++------
 lib/bitstyles_phoenix/component/tabs.ex       | 20 ++++----
 test/bitstyles_phoenix/bitstyles_test.exs     | 37 ++++++++++++--
 17 files changed, 181 insertions(+), 102 deletions(-)

diff --git a/lib/bitstyles_phoenix.ex b/lib/bitstyles_phoenix.ex
index ea62c15..61a143c 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 fe1c3cc..eff8370 100644
--- a/lib/bitstyles_phoenix/alpine3/dropdown.ex
+++ b/lib/bitstyles_phoenix/alpine3/dropdown.ex
@@ -56,7 +56,7 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
               </use>
             </svg>
           </button>
-          <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top" @click.away="dropdownOpen = false" x-cloak="x-cloak" x-show="dropdownOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
+          <ul class="a-dropdown u-overflow-y-auto a-list-reset 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 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 a-list-reset 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 407d62b..7871b54 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>
@@ -61,13 +61,13 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                     bitcrowd
                   </span>
                 </a>
-                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
-                  <li class="u-margin-xs-bottom u-flex">
+                <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-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>
@@ -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 a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
-                  <li class="u-margin-xs-bottom u-flex">
+                <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-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 da12a1f..0dd8a5a 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -19,10 +19,58 @@ defmodule BitstylesPhoenix.Bitstyles do
     class
   end
 
-  def classname(class, version) when version >= "5.0.0" do
+  def classname(class, version) when version >= "6.0.0" do
     class
   end
 
+  def classname(class, version) when version >= "5.0.0" do
+    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("margin-#{new_size}", "margin-#{old_size}")
+        |> String.replace("margin-neg-#{new_size}", "margin-neg-#{old_size}")
+        |> String.replace("padding-#{new_size}", "padding-#{old_size}")
+        |> String.replace("padding-neg-#{new_size}", "padding-neg-#{old_size}")
+        |> String.replace("gap-#{new_size}", "gap-#{old_size}")
+      end)
+
+    class =
+      case class do
+        "u-fg-grayscale" -> "u-fg-text"
+        class -> class
+      end
+
+    classname(class, "6.0.0")
+  end
+
   def classname(class, version) when version >= "4.2.0" do
     sizes_renaming = %{
       "3xs" => "xxxs",
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/breadcrumbs.ex b/lib/bitstyles_phoenix/component/breadcrumbs.ex
index df19722..bbf2bba 100644
--- a/lib/bitstyles_phoenix/component/breadcrumbs.ex
+++ b/lib/bitstyles_phoenix/component/breadcrumbs.ex
@@ -45,23 +45,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>
@@ -150,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>
@@ -200,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>
@@ -244,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/card.ex b/lib/bitstyles_phoenix/component/card.ex
index c8ab376..0455c69 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-flash--danger a-card-l__header">
             <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-flash--danger a-card__header">
             <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 3cb350e..c1c73a6 100644
--- a/lib/bitstyles_phoenix/component/description_list.ex
+++ b/lib/bitstyles_phoenix/component/description_list.ex
@@ -20,7 +20,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
         """
         <dl class="a-dl">
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-s4-bottom@s">
               Length
             </dt>
             <dd class="u-col-span-2">
@@ -28,7 +28,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-s4-bottom@s">
               Inserted at
             </dt>
             <dd class="u-col-span-2">
@@ -64,7 +64,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
         """
         <dl class="a-dl extra" data-foo="baz">
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline u-fg-brand-2">
-            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-s4-bottom@s">
               Length
             </dt>
             <dd class="u-col-span-2">
@@ -72,7 +72,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-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">
@@ -80,7 +80,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-s4-bottom@s">
               <pre>
                 Tag
               </pre>
@@ -162,7 +162,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
     assigns = assign(assigns, extra: extra)
 
     ~H"""
-    <dt class={classnames(["u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s", assigns[:class]])} {@extra}>
+    <dt class={classnames(["u-font-medium u-h6 u-fg-text-darker 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 66bc1e2..1b5f192 100644
--- a/lib/bitstyles_phoenix/component/dropdown.ex
+++ b/lib/bitstyles_phoenix/component/dropdown.ex
@@ -79,7 +79,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
                 </use>
               </svg>
             </button>
-            <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top">
+            <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s2-top">
               <li>
                 <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 1
@@ -221,7 +221,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
                 </use>
               </svg>
             </button>
-            <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top u-margin-s-bottom">
+            <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top u-margin-s2-bottom">
               <li>
                 <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 1
@@ -276,7 +276,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
               </use>
             </svg>
           </button>
-          <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--right u-margin-s-top">
+          <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--right u-margin-s2-top">
             <li>
               <a href="#" class="a-button a-button--transparent a-button--menu">
                 Option 1
@@ -337,7 +337,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
                 </use>
               </svg>
             </button>
-            <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top a-dropdown--right u-margin-s-bottom">
+            <ul class="a-dropdown u-overflow-y-auto a-list-reset 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
@@ -387,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 a-list-reset u-margin-s-top">
+          <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s2-top">
             <li>
               <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 1
@@ -441,7 +441,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
                 </use>
               </svg>
             </button>
-            <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--full-width u-margin-s-top" id="dropdown-1" style="display: none">
+            <ul class="a-dropdown u-overflow-y-auto a-list-reset 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
@@ -577,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 57fa37e..42085d4 100644
--- a/lib/bitstyles_phoenix/component/error.ex
+++ b/lib/bitstyles_phoenix/component/error.ex
@@ -71,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
@@ -105,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"""
diff --git a/lib/bitstyles_phoenix/component/flash.ex b/lib/bitstyles_phoenix/component/flash.ex
index eb03fd4..8b53702 100644
--- a/lib/bitstyles_phoenix/component/flash.ex
+++ b/lib/bitstyles_phoenix/component/flash.ex
@@ -38,7 +38,7 @@ defmodule BitstylesPhoenix.Component.Flash do
     ''',
     '''
         """
-        <div aria-live="polite" class="u-padding-l-y a-flash a-flash--brand-1">
+        <div aria-live="polite" class="u-padding-l1-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>
@@ -60,7 +60,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 a-flash--positive">
           <div class="a-content u-flex u-items-center u-font-medium">
             Saved successfully
           </div>
@@ -82,7 +82,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 a-flash--warning">
           <div class="a-content u-flex u-items-center u-font-medium">
             Saved with errors
           </div>
@@ -104,7 +104,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 a-flash--danger">
           <div class="a-content u-flex u-items-center u-font-medium">
             Saving failed
           </div>
@@ -126,7 +126,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 a-flash--danger">
           <div class="a-content a-content--full u-flex u-items-center u-font-medium">
             Saving failed
           </div>
@@ -148,7 +148,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 a-flash--brand-1 extra-class" data-foo="bar">
           <div class="a-content u-flex u-items-center u-font-medium extra-inner-class">
             Saving failed
           </div>
@@ -168,7 +168,7 @@ defmodule BitstylesPhoenix.Component.Flash do
 
     class =
       classnames([
-        "u-padding-l-y a-flash",
+        "u-padding-l1-y a-flash",
         flash_variants |> Enum.map_join(" ", &"a-flash--#{&1}"),
         assigns[:class]
       ])
diff --git a/lib/bitstyles_phoenix/component/form.ex b/lib/bitstyles_phoenix/component/form.ex
index 7b542ae..bd7df79 100644
--- a/lib/bitstyles_phoenix/component/form.ex
+++ b/lib/bitstyles_phoenix/component/form.ex
@@ -140,7 +140,7 @@ defmodule BitstylesPhoenix.Component.Form do
           Email
         </label>
         <input id="user_email" maxlength="255" name="user[email]" type="text"/>
-        <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 ef179fd..5de818a 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="a-list-reset 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="a-list-reset 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("a-list-reset 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 4eaa63a..130753c 100644
--- a/lib/bitstyles_phoenix/component/sidebar.ex
+++ b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -45,22 +45,22 @@ defmodule BitstylesPhoenix.Component.Sidebar do
             <nav class="u-flex">
               <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text">
                 Large header
-                <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-bottom u-margin-xs-bottom">
+                <div class="u-flex-shrink-0 u-padding-s4-y u-margin-s4-left u-margin-s4-right u-flex u-flex-col u-border-gray-70-bottom u-margin-s4-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">
-                  <li class="u-margin-xs-bottom u-flex">
+                <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-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-70-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-70-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 a-list-reset a-dropdown--top a-dropdown--full-width u-margin-s-bottom">
+                    <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top a-dropdown--full-width u-margin-s2-bottom">
                       <li>
                         <a href="#" class="a-button a-button--transparent a-button--menu">
                           Logout
@@ -82,22 +82,22 @@ defmodule BitstylesPhoenix.Component.Sidebar do
               </div>
               <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text">
                 Small header
-                <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-bottom u-margin-xs-bottom">
+                <div class="u-flex-shrink-0 u-padding-s4-y u-margin-s4-left u-margin-s4-right u-flex u-flex-col u-border-gray-70-bottom u-margin-s4-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">
-                  <li class="u-margin-xs-bottom u-flex">
+                <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-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-70-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-70-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 a-list-reset a-dropdown--top a-dropdown--full-width u-margin-s-bottom">
+                    <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top a-dropdown--full-width u-margin-s2-bottom">
                       <li>
                         <a href="#" class="a-button a-button--transparent a-button--menu">
                           Logout
@@ -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 a-list-reset 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-70"
   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 436b21c..0bff330 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="a-list-reset 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="a-list-reset 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="a-list-reset 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/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
index 16c9d65..f42bc23 100644
--- a/test/bitstyles_phoenix/bitstyles_test.exs
+++ b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -4,13 +4,29 @@ 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 "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"
+    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"
@@ -41,6 +57,21 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-fg-text", "5.0.0") == "u-fg-text"
       assert classname("u-fg-text-darker", "5.0.0") == "u-fg-text-darker"
       assert classname("u-bg-gray-darker", "5.0.0") == "u-bg-gray-darker"
+
+      assert classname("u-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"
     end
 
     test "version 4.3.0" do