1228 style add dark theme style in tab (#1229)

* style: adding dark theme styles in tab * style: adding dark theme styles in tab
Brisanet · Jan 14, 2025 · b151b77 · b151b77
1 parent fc0e1a4
commit b151b77
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 23 deletions.
diff --git a/projects/ion/src/lib/tab/_tab.theme.scss b/projects/ion/src/lib/tab/_tab.theme.scss
@@ -0,0 +1,87 @@
+@import '../../styles/themes/theme.scss';
+
+$default: (
+  inactive: (
+    text-color: var(--ion-neutral-7),
+    icon-color: var(--ion-neutral-7),
+    border-color: var(--ion-neutral-4),
+    background-color: var(--ion-neutral-1),
+  ),
+  active: (
+    text-color: var(--ion-primary-7),
+    icon-color: var(--ion-primary-7),
+    border-color: var(--ion-primary-5),
+    background-color: var(--ion-primary-2),
+  ),
+  selected: (
+    icon-color: var(--ion-primary-6),
+    text-color: var(--ion-primary-6),
+    border-color: var(--ion-primary-6),
+    background-color: var(--ion-neutral-1),
+  ),
+  hover: (
+    text-color: var(--ion-primary-5),
+    icon-color: var(--ion-primary-5),
+    border-color: var(--ion-primary-3),
+    background-color: var(--ion-primary-1),
+  ),
+  focus: (
+    text-color: var(--ion-primary-5),
+    icon-color: var(--ion-primary-5),
+    border-color: var(--ion-primary-3),
+    background-color: var(--ion-primary-1),
+  ),
+  disabled: (
+    text-color: var(--ion-neutral-5),
+    icon-color: var(--ion-neutral-5),
+    border-color: var(--ion-neutral-5),
+    background-color: var(--ion-neutral-3),
+  ),
+);
+
+$dark: (
+  inactive: (
+    text-color: var(--ion-neutral-1),
+    icon-color: var(--ion-neutral-1),
+    border-color: var(--ion-neutral-1),
+    background-color: var(--ion-base),
+  ),
+  active: (
+    text-color: var(--ion-primary-6),
+    icon-color: var(--ion-primary-6),
+    border-color: var(--ion-primary-6),
+    background-color: var(--ion-primary-3),
+  ),
+  selected: (
+    text-color: var(--ion-primary-3),
+    icon-color: var(--ion-primary-3),
+    border-color: var(--ion-primary-3),
+    background-color: var(--ion-base),
+  ),
+  hover: (
+    text-color: var(--ion-primary-3),
+    icon-color: var(--ion-primary-3),
+    border-color: var(--ion-primary-3),
+    background-color: var(--ion-neutral-5),
+  ),
+  focus: (
+    text-color: var(--ion-primary-3),
+    icon-color: var(--ion-primary-3),
+    border-color: var(--ion-primary-3),
+    background-color: var(--ion-neutral-5),
+  ),
+  disabled: (
+    text-color: var(--ion-neutral-3),
+    icon-color: var(--ion-neutral-3),
+    border-color: var(--ion-neutral-3),
+    background-color: var(--ion-neutral-7),
+  ),
+);
+
+@include register-component(
+  tab,
+  (
+    default: $default,
+    dark: $dark,
+  )
+);
diff --git a/projects/ion/src/lib/tab/tab.component.scss b/projects/ion/src/lib/tab/tab.component.scss
@@ -1,15 +1,18 @@
+@use 'tab.theme';
+
 @import '../../styles/index.scss';
+@import '../../styles/themes/theme.scss';
 
-@mixin tab-colors($color, $background, $border) {
-  color: $color;
-  background-color: $background;
-  border-color: $border !important;
+@mixin tab-colors($prefix) {
+  color: ion-theme(#{$prefix}-text-color);
+  background-color: ion-theme(#{$prefix}-background-color);
+  border-color: ion-theme(#{$prefix}-border-color) !important;
 }
 
 @mixin icon-color($color) {
   .tab-icon {
     ::ng-deep svg {
-      fill: $color;
+      fill: ion-theme($color);
     }
   }
 }
@@ -27,9 +30,9 @@
 }
 
 @mixin tab-focus {
-  @include tab-colors($primary-5, $primary-1, $primary-3);
+  @include tab-colors(tab-focus);
   @include focus;
-  @include icon-color($primary-5);
+  @include icon-color(tab-focus-icon-color);
   position: relative;
 }
 
@@ -39,58 +42,59 @@
   color: $neutral-7;
 
   border: none;
-  background-color: $neutral-1;
+  color: ion-theme(tab-inactive-text-color);
+  background-color: ion-theme(tab-inactive-background-color);
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: spacing(1);
-  @include icon-color($neutral-7);
+  @include icon-color(tab-inactive-icon-color);
 
   &:hover {
-    @include tab-colors($primary-5, $primary-1, $primary-3);
-    @include icon-color($primary-5);
+    @include tab-colors(tab-hover);
+    @include icon-color(tab-hover-icon-color);
   }
   &:focus-visible {
     @include tab-focus();
   }
   &:active {
-    @include tab-colors($primary-7, $primary-2, $primary-5);
+    @include tab-colors(tab-active);
     outline: none;
-    @include icon-color($primary-7);
+    @include icon-color(tab-active-icon-color);
   }
   &:disabled {
-    @include tab-colors($neutral-5, $neutral-3, $neutral-5);
+    @include tab-colors(tab-disabled);
     cursor: not-allowed;
-    @include icon-color($neutral-5);
+    @include icon-color(tab-disabled-icon-color);
   }
 }
 
 .tab-selected {
   font-style: normal;
   font-weight: 600;
   border: none;
-  @include tab-colors($primary-color, $neutral-1, $primary-color);
+  @include tab-colors(tab-selected);
   cursor: pointer;
   display: flex;
   align-items: center;
-  @include icon-color($primary-color);
+  @include icon-color(tab-selected-icon-color);
 
   &:hover {
-    @include tab-colors($primary-5, $primary-1, $primary-3);
-    @include icon-color($primary-5);
+    @include tab-colors(tab-hover);
+    @include icon-color(tab-hover-icon-color);
   }
   &:focus-visible {
     @include tab-focus();
   }
   &:active {
-    @include tab-colors($primary-7, $primary-2, $primary-5);
+    @include tab-colors(tab-active);
     outline: none;
-    @include icon-color($primary-7);
+    @include icon-color(tab-active-icon-color);
   }
   &:disabled {
-    @include tab-colors($neutral-5, $neutral-3, $neutral-5);
+    @include tab-colors(tab-disabled);
     cursor: not-allowed;
-    @include icon-color($neutral-5);
+    @include icon-color(tab-disabled-icon-color);
   }
 }