Create the dark theme and adjust the sidebar component (#1161)

* style: adjusting colors for the dark theme * style: applying a variation of the dark theme --------- Co-authored-by: MarcosOliveir4 <[email protected]>
Brisanet · Oct 25, 2024 · b5556d3 · b5556d3
1 parent 17c30ad
commit b5556d3
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 51 deletions.
diff --git a/projects/ion/src/lib/sidebar/_sidebar.theme.scss b/projects/ion/src/lib/sidebar/_sidebar.theme.scss
@@ -53,9 +53,63 @@ $default: (
   ),
 );
 
+$dark: (
+  background-color: ion-theme(neutral-5),
+  shadow-color: rgba(4, 42, 98, 0.15),
+  footer-divider-color: ion-theme(neutral-3),
+  scrollbar: (
+    background-color: transparent,
+    thumb-color: ion-theme(neutral-3),
+    hover-thumb-color: ion-theme(neutral-4),
+  ),
+  item: (
+    background-color: ion-theme(neutral-5),
+    text-color: ion-theme(neutral-1),
+    icon-color: ion-theme(neutral-1),
+    hover: (
+      background-color: ion-theme(neutral-6),
+      text-color: ion-theme(neutral-1),
+      icon-color: ion-theme(neutral-1),
+    ),
+    active: (
+      background-color: ion-theme(neutral-6),
+      text-color: ion-theme(neutral-1),
+      icon-color: ion-theme(neutral-1),
+    ),
+    disabled: (
+      background-color: ion-theme(neutral-1),
+      text-color: ion-theme(neutral-6),
+      icon-color: ion-theme(neutral-6),
+    ),
+    selected: (
+      background-color: ion-theme(neutral-6),
+      text-color: ion-theme(neutral-1),
+      icon-color: ion-theme(neutral-1),
+      border-color: ion-theme(neutral-1),
+      hover-border-color: ion-theme(neutral-1),
+      active-border-color: ion-theme(neutral-1),
+    ),
+  ),
+  group: (
+    border-color: ion-theme(neutral-4),
+    icon-color: ion-theme(neutral-1),
+    header-text-color: ion-theme(neutral-1),
+    selected-border-color: ion-theme(neutral-1),
+    opened: (
+      text-color: ion-theme(neutral-1),
+      icon-color: ion-theme(neutral-1),
+    ),
+    shrinked: (
+      background-color: ion-theme(neutral-5),
+      icon-color: ion-theme(neutral-1),
+    ),
+  ),
+);
+
 @include register-component(
   sidebar,
   (
     default: $default,
+    dark: $dark,
   )
 );
diff --git a/projects/ion/src/lib/sidebar/sidebar-group/sidebar-group.component.scss b/projects/ion/src/lib/sidebar/sidebar-group/sidebar-group.component.scss
@@ -58,8 +58,8 @@
       transition: color 0.25s ease-in-out;
 
       &:hover {
-        color: $primary-5;
-        @include icon-color($primary-5);
+        color: ion-theme(sidebar-group-header-text-color);
+        @include icon-color(sidebar-group-icon-color);
       }
     }
 

diff --git a/projects/ion/src/styles/themes/themes/dark.scss b/projects/ion/src/styles/themes/themes/dark.scss
@@ -1,51 +1,51 @@
 $dark-theme: (
-  base: black,
-  primary-1: #0a1c2a,
-  primary-2: #1a3557,
-  primary-3: #2c4e84,
-  primary-4: #4068b1,
-  primary-5: #5684d5,
-  primary-6: #719ef7,
-  primary-7: #9cbaf9,
-  primary-8: #c4d6fb,
-  neutral-1: #1b1c20,
-  neutral-2: #26282d,
-  neutral-3: #3b3d43,
-  neutral-4: #52555d,
-  neutral-5: #72757f,
-  neutral-6: #9c9fa9,
-  neutral-7: #c4c7d2,
-  neutral-8: #e9eaf0,
-  positive-1: #11312a,
-  positive-2: #1d463c,
-  positive-3: #296855,
-  positive-4: #388b6e,
-  positive-5: #4baf86,
-  positive-6: #5bcf9f,
-  positive-7: #80e5b6,
-  positive-8: #b0f5d4,
-  negative-1: #3d1a1c,
-  negative-2: #552425,
-  negative-3: #8c3538,
-  negative-4: #b6474b,
-  negative-5: #e25c5e,
-  negative-6: #f57b7d,
-  negative-7: #f9a0a2,
-  negative-8: #fbc7c8,
-  warning-1: #3e3120,
-  warning-2: #573e24,
-  warning-3: #876033,
-  warning-4: #b98346,
-  warning-5: #e0a55a,
-  warning-6: #f4c274,
-  warning-7: #f6db9a,
-  warning-8: #f9f0c3,
-  info-1: #0a1e23,
-  info-2: #102f34,
-  info-3: #1c5b60,
-  info-4: #287d88,
-  info-5: #36a2b3,
-  info-6: #53c9d6,
-  info-7: #82e0ea,
-  info-8: #b5f4f8,
+  base: #141414,
+  primary-1: #e8f2ff,
+  primary-2: #d5e7ff,
+  primary-3: #b3d1ff,
+  primary-4: #5681ff,
+  primary-5: #2f53ff,
+  primary-6: #1d2cde,
+  primary-7: #0616cd,
+  primary-8: #0a115c,
+  neutral-1: #fcfcfd,
+  neutral-2: #ced2db,
+  neutral-3: #8d93a5,
+  neutral-4: #383838,
+  neutral-5: #2e2e2e,
+  neutral-6: #222222,
+  neutral-7: #1e1e1e,
+  neutral-8: #121212,
+  positive-1: #e7f9f1,
+  positive-2: #b5eec8,
+  positive-3: #83e7a4,
+  positive-4: #38dd6f,
+  positive-5: #0dca4b,
+  positive-6: #00ac39,
+  positive-7: #007f2a,
+  positive-8: #004528,
+  negative-1: #faeaec,
+  negative-2: #f7d4d8,
+  negative-3: #efa9b0,
+  negative-4: #e77e89,
+  negative-5: #de5462,
+  negative-6: #d6293a,
+  negative-7: #ab212f,
+  negative-8: #8d1b26,
+  warning-1: #fff5e0,
+  warning-2: #feedcd,
+  warning-3: #fcdb9c,
+  warning-4: #fbc86a,
+  warning-5: #faba42,
+  warning-6: #f9a915,
+  warning-7: #e09306,
+  warning-8: #b87905,
+  info-1: #e2f9fd,
+  info-2: #cff6fc,
+  info-3: #9eeefa,
+  info-4: #55e1f6,
+  info-5: #0ccbe9,
+  info-6: #0bb2cb,
+  info-7: #0994aa,
+  info-8: #077283,
 );