Make sidebar demo look better

bitcrowd · Jul 2, 2024 · 3b45bd9 · 3b45bd9
1 parent 094f5f8
commit 3b45bd9
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 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">
+              <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">
@@ -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" @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"/>

diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
@@ -64,6 +64,7 @@ defmodule BitstylesPhoenix.Bitstyles do
 
     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

diff --git 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,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">
+              <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-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
@@ -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">
+              <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-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
@@ -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"
 

diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -26,6 +26,7 @@ defmodule BitstylesPhoenix.BitstylesTest do
 
       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
@@ -77,6 +78,7 @@ defmodule BitstylesPhoenix.BitstylesTest do
 
       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