Color replacement advice from Darren; tests

bitcrowd · Jul 1, 2024 · b9dc051 · b9dc051
1 parent d3c26dc
commit b9dc051
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 28 deletions.
diff --git a/lib/bitstyles_phoenix/alpine3/sidebar.ex b/lib/bitstyles_phoenix/alpine3/sidebar.ex
@@ -54,7 +54,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
         <div class="u-flex u-height-100vh" x-data="{ sidebarOpen: false }">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text">
                 <a href="#" class="u-padding-l">
                   <img src="assets/logo.svg" aria-hidden="true" width="100"/>
                   <span class="u-sr-only">
@@ -74,7 +74,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                   </li>
                 </ul>
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light" @click.away="sidebarOpen = false" id="sidebar-small" x-cloak="x-cloak" x-show="sidebarOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text" @click.away="sidebarOpen = false" id="sidebar-small" x-cloak="x-cloak" x-show="sidebarOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
                 <div class="u-flex">
                   <a href="#" class="u-flex-grow-1 u-padding-l">
                     <img src="assets/logo.svg" aria-hidden="true" width="100"/>

diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
@@ -41,9 +41,8 @@ defmodule BitstylesPhoenix.Bitstyles do
         "u-list-none" -> "a-list-reset"
         "a-badge--text" -> "a-badge--gray"
         "u-gap-l" -> "u-gap-m"
-        "u-fg-text-light" -> "u-fg-gray-30"
-        "u-fg-gray-light" -> "u-fg-gray-30"
-        "u-fg-text" -> "u-fg-gray-50"
+        "u-fg-text" -> "u-fg-gray-30"
+        "u-fg-text-darker" -> "u-fg-gray-50"
         "u-bg-gray-darker" -> "u-bg-gray-80"
         class -> class
       end

diff --git a/lib/bitstyles_phoenix/component/breadcrumbs.ex b/lib/bitstyles_phoenix/component/breadcrumbs.ex
@@ -47,21 +47,21 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
             <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center">
               <li class="u-margin-xs-right u-flex u-items-center">
                 Foo
-                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-caret-right">
                   </use>
                 </svg>
               </li>
               <li class="u-margin-xs-right u-flex u-items-center">
                 Bar
-                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-caret-right">
                   </use>
                 </svg>
               </li>
               <li class="u-margin-xs-right u-flex u-items-center">
                 Baz
-                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-caret-right">
                   </use>
                 </svg>
@@ -123,21 +123,21 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
           <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center">
             <li class="u-margin-xs-right u-flex u-items-center">
               Foo
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Bar
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Baz
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
@@ -173,21 +173,21 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
           <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center u-fg-warning">
             <li class="u-margin-xs-right u-flex u-items-center u-fg-brand-2" data-baz="foo">
               Foo
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Bar
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Baz
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
@@ -219,7 +219,7 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
               {assigns[:item] && assigns_to_attributes(item, [:class]) || []}
             >
               <%= if assigns[:item], do: render_slot(item), else: item %>
-              <.ui_icon name="caret-right" size="m" class={classnames("u-fg-text-light u-margin-xs-left")} {@icon_extra} />
+              <.ui_icon name="caret-right" size="m" class={classnames("u-fg-text u-margin-xs-left")} {@icon_extra} />
             </li>
           <% end %>
         </ol>

diff --git a/lib/bitstyles_phoenix/component/description_list.ex b/lib/bitstyles_phoenix/component/description_list.ex
@@ -20,15 +20,15 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
         """
         <dl class="a-dl">
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
               Length
             </dt>
             <dd class="u-col-span-2">
               8
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
               Inserted at
             </dt>
             <dd class="u-col-span-2">
@@ -64,23 +64,23 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
         """
         <dl class="a-dl extra" data-foo="baz">
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline u-fg-brand-2">
-            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
               Length
             </dt>
             <dd class="u-col-span-2">
               8
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
               Some
             </dt>
             <dd class="u-col-span-2 u-fg-brand-1" data-foo="bar">
               Tag
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
               <pre>
                 Tag
               </pre>
@@ -162,7 +162,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
     assigns = assign(assigns, extra: extra)
 
     ~H"""
-    <dt class={classnames(["u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s", assigns[:class]])} {@extra}>
+    <dt class={classnames(["u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s", assigns[:class]])} {@extra}>
       <%= render_slot(@inner_block) %>
     </dt>
     """

diff --git a/lib/bitstyles_phoenix/component/sidebar.ex b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -43,7 +43,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         <div class="u-flex u-height-100vh">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text">
                 Large header
                 <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-bottom u-margin-xs-bottom">
                   Menu
@@ -80,7 +80,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                   </div>
                 </div>
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text">
                 Small header
                 <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-bottom u-margin-xs-bottom">
                   Menu
@@ -207,13 +207,13 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         <div class="u-flex u-height-100vh">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text">
                 Large header
                 <div>
                   Sidebar
                 </div>
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text">
                 Small header
                 <div>
                   Sidebar
@@ -247,9 +247,9 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         <div class="u-flex u-height-100vh">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text">
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text">
               </div>
             </nav>
           </header>
@@ -265,7 +265,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
   )
 
   @default_bg "gray-darker"
-  @default_fg "text-light"
+  @default_fg "text"
   @large_classes "u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col"
   @small_classes "o-sidebar--small u-flex u-flex-col u-hidden@l"
 

diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -36,6 +36,11 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-margin-3xl-bottom", "5.0.0") == "u-margin-3xl-bottom"
       assert classname("u-margin-neg-3xl-bottom", "5.0.0") == "u-margin-neg-3xl-bottom"
       assert classname("u-list-none", "5.0.0") == "u-list-none"
+      assert classname("a-badge--text", "5.0.0") == "a-badge--text"
+      assert classname("u-gap-l", "5.0.0") == "u-gap-l"
+      assert classname("u-fg-text", "5.0.0") == "u-fg-text"
+      assert classname("u-fg-text-darker", "5.0.0") == "u-fg-text-darker"
+      assert classname("u-bg-gray-darker", "5.0.0") == "u-bg-gray-darker"
     end
 
     test "version 4.3.0" do
@@ -63,6 +68,11 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-margin-3xl-bottom", "4.3.0") == "u-margin-xxxl-bottom"
       assert classname("u-margin-neg-3xl-bottom", "4.3.0") == "u-margin-neg-xxxl-bottom"
       assert classname("u-list-none", "4.3.0") == "a-list-reset"
+      assert classname("a-badge--text", "4.3.0") == "a-badge--gray"
+      assert classname("u-gap-l", "4.3.0") == "u-gap-m"
+      assert classname("u-fg-text", "4.3.0") == "u-fg-gray-30"
+      assert classname("u-fg-text-darker", "4.3.0") == "u-fg-gray-50"
+      assert classname("u-bg-gray-darker", "4.3.0") == "u-bg-gray-80"
     end
 
     test "version 4.2.0" do