style: adjusting dark theme in sidebar and triple toggle (#1227)

* style: adjusting dark theme in sidebar and triple toggle * style: adjusting dark theme in sidebar and triple toggle
Brisanet · Jan 13, 2025 · 2ab0b81 · 2ab0b81
1 parent 837bd15
commit 2ab0b81
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/projects/ion/src/lib/sidebar/_sidebar.theme.scss b/projects/ion/src/lib/sidebar/_sidebar.theme.scss
@@ -4,6 +4,7 @@ $default: (
   background-color: ion-theme(neutral-1),
   shadow-color: rgba(4, 42, 98, 0.15),
   footer-divider-color: ion-theme(neutral-4),
+  border-color: ion-theme(neutral-1),
   scrollbar: (
     background-color: transparent,
     thumb-color: ion-theme(neutral-3),
@@ -57,6 +58,7 @@ $dark: (
   background-color: ion-theme(neutral-5),
   shadow-color: rgba(4, 42, 98, 0.15),
   footer-divider-color: ion-theme(neutral-3),
+  border-color: ion-theme(neutral-3),
   scrollbar: (
     background-color: transparent,
     thumb-color: ion-theme(neutral-3),

diff --git a/projects/ion/src/lib/sidebar/sidebar.component.scss b/projects/ion/src/lib/sidebar/sidebar.component.scss
@@ -28,7 +28,8 @@
   grid-template-rows: max-content 1fr max-content;
   transform: translateX(-110%);
   transition: transform 0.25s ease-in-out, width 0.25s ease-in-out;
-
+  border-right: 1px solid ion-theme(sidebar-border-color);
+
   &__header {
     display: flex;
     align-items: center;

diff --git a/projects/ion/src/lib/triple-toggle/_triple-toggle.theme.scss b/projects/ion/src/lib/triple-toggle/_triple-toggle.theme.scss
@@ -7,28 +7,32 @@ $default: (
     text-color: ion-theme(primary-6),
     disabled-color: ion-theme(neutral-1),
     disabled-bg-color: ion-theme(neutral-5),
+    disabled-border-color: ion-theme(neutral-3),
   ),
   secondary: (
     border: ion-theme(neutral-4),
     text-color: ion-theme(primary-6),
     disabled-color: ion-theme(neutral-5),
     disabled-bg-color: ion-theme(neutral-3),
+    hover-text-color: ion-theme(primary-6),
   ),
 );
 
 $dark: (
-  icon-color: ion-theme(primary-1),
+  icon-color: ion-theme(primary-3),
   primary: (
-    border-color: ion-theme(neutral-1),
+    border-color: transparent,
     text-color: ion-theme(neutral-1),
     disabled-color: ion-theme(neutral-3),
-    disabled-bg-color: ion-theme(neutral-7),
+    disabled-bg-color: ion-theme(neutral-6),
+    disabled-border-color: ion-theme(neutral-3),
   ),
   secondary: (
-    border: ion-theme(neutral-1),
-    text-color: ion-theme(neutral-1),
+    border: ion-theme(primary-3),
+    text-color: ion-theme(primary-3),
     disabled-color: ion-theme(neutral-3),
     disabled-bg-color: ion-theme(neutral-6),
+    hover-text-color: ion-theme(primary-6),
   ),
 );
 

diff --git a/projects/ion/src/lib/triple-toggle/triple-toggle.component.scss b/projects/ion/src/lib/triple-toggle/triple-toggle.component.scss
@@ -34,10 +34,14 @@
   ion-button ::ng-deep {
     .ion-btn-primary {
       border: 1px solid ion-theme(triple-toggle-primary-border-color);
+
       &:disabled {
         background-color: ion-theme(
           triple-toggle-primary-disabled-bg-color
         ) !important;
+
+        border: 1px solid ion-theme(triple-toggle-primary-disabled-border-color);
+
         color: ion-theme(triple-toggle-primary-disabled-color) !important;
       }
     }
@@ -48,6 +52,15 @@
       ion-icon svg {
         fill: ion-theme(triple-toggle-icon-color);
       }
+
+      &:hover {
+        color: ion-theme(triple-toggle-secondary-hover-text-color);
+
+        ion-icon svg {
+          fill: ion-theme(triple-toggle-secondary-hover-text-color);
+        }
+      }
+
       &:disabled {
         color: ion-theme(triple-toggle-secondary-disabled-color);
         background-color: ion-theme(