From 15f82c812ced23be8c2f3dfc848577510878e41d Mon Sep 17 00:00:00 2001
From: tomasz hanaj <12088991+tomaszhanaj@users.noreply.github.com>
Date: Thu, 2 Nov 2023 13:10:05 +0100
Subject: [PATCH] [AAE-15296] added design tokens to InfoDrawerComponent
 (#9051)

* [AAE-15296] added design tokens to InfoDrawerComponent

* [AAE-15296] added access to theme to component variables
---
 .../info-drawer-layout.component.scss         |  5 ---
 .../info-drawer/info-drawer.component.html    |  5 +++
 .../info-drawer/info-drawer.component.scss    | 31 +++++++++++++++++++
 .../src/lib/styles/_components-variables.scss | 19 +++++++++++-
 lib/core/src/lib/styles/_index.scss           |  2 +-
 5 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
index f86ed3f3ed..1c59e361d4 100644
--- a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
+++ b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
@@ -20,13 +20,8 @@ $adf-info-drawer-icon-size-half: 24px !default;
         & .mat-tab-label {
             font-weight: bold;
             text-align: left;
-            color: var(--theme-accent-color);
             text-transform: uppercase;
             opacity: 1;
-
-            &-active {
-                color: var(--theme-primary-color);
-            }
         }
 
         &-header {
diff --git a/lib/core/src/lib/info-drawer/info-drawer.component.html b/lib/core/src/lib/info-drawer/info-drawer.component.html
index 1d0e7af48d..85d51c5103 100644
--- a/lib/core/src/lib/info-drawer/info-drawer.component.html
+++ b/lib/core/src/lib/info-drawer/info-drawer.component.html
@@ -9,6 +9,11 @@
     <ng-template #tabLayout>
         <mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
             <mat-tab *ngFor="let contentBlock of contentBlocks"
+                #tab
+                [labelClass]="[
+                    'adf-info-drawer-tab',
+                    tab.isActive ? 'adf-info-drawer-tab--active' : '',
+                ]"
                 [label]="contentBlock.label | translate"
                 class="adf-info-drawer-tab">
 
diff --git a/lib/core/src/lib/info-drawer/info-drawer.component.scss b/lib/core/src/lib/info-drawer/info-drawer.component.scss
index 0a05ba643e..f9c50f4955 100644
--- a/lib/core/src/lib/info-drawer/info-drawer.component.scss
+++ b/lib/core/src/lib/info-drawer/info-drawer.component.scss
@@ -55,3 +55,34 @@
         }
     }
 }
+
+.adf-info-drawer-tab {
+    color: var(--adf-info-drawer-tab-default-color);
+    background-color: var(--adf-info-drawer-tab-default-background);
+    border-bottom: var(--adf-info-drawer-tab-default-bottom-line);
+    opacity: 1;
+
+    &--active {
+        color: var(--adf-info-drawer-tab-active-unfocused-color);
+        background-color: var(--adf-info-drawer-tab-active-unfocused-background);
+        border-bottom: var(--adf-info-drawer-tab-active-unfocused-bottom-line);
+
+        &:focus {
+            color: var(--adf-info-drawer-tab-active-focused-color);
+            background-color: var(--adf-info-drawer-tab-active-focused-background);
+            border-bottom: var(--adf-info-drawer-tab-active-focused-bottom-line);
+        }
+    }
+
+    &:hover:not([class*='--disabled'], [class*='--active']) {
+        color: var(--adf-info-drawer-tab-hover-color);
+        background-color: var(--adf-info-drawer-tab-hover-background);
+        border-bottom: var(--adf-info-drawer-tab-hover-bottom-line);
+    }
+
+    &--disabled {
+        color: var(--adf-info-drawer-tab-disabled-color);
+        background-color: var(--adf-info-drawer-tab-disabled-background);
+        border-bottom: var(--adf-info-drawer-tab-disabled-bottom-line);
+    }
+}
diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss
index 4f99fded8e..cd5adcde4d 100644
--- a/lib/core/src/lib/styles/_components-variables.scss
+++ b/lib/core/src/lib/styles/_components-variables.scss
@@ -1,6 +1,10 @@
 @use './reference-variables' as *;
+@use '@angular/material' as mat;
+
+@mixin adf-components-variables($theme) {
+    $accent: map-get($theme, accent);
+    $test: mat.get-color-from-palette($accent);
 
-@mixin adf-components-variables() {
     $defaults: (
         --adf-card-view-background: $adf-ref-card-background,
         --adf-card-view-border: $adf-ref-card-border,
@@ -45,6 +49,19 @@
         --adf-identity-user-info-line-height: $adf-ref-line-height,
         --adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size),
         --adf-user-info-container-margin-right: $adf-ref-margin-right,
+
+        --adf-info-drawer-tab-default-color: mat.get-color-from-palette($accent),
+        --adf-info-drawer-tab-default-background:unset,
+        --adf-info-drawer-tab-default-bottom-line:unset,
+        --adf-info-drawer-tab-hover-color:mat.get-color-from-palette($accent),
+        --adf-info-drawer-tab-hover-background:unset,
+        --adf-info-drawer-tab-hover-bottom-line:unset,
+        --adf-info-drawer-tab-active-unfocused-color: mat.get-color-from-palette($primary),
+        --adf-info-drawer-tab-active-unfocused-background:unset,
+        --adf-info-drawer-tab-active-unfocused-bottom-line:unset,
+        --adf-info-drawer-tab-active-focused-background: mat.get-color-from-palette($primary),
+        --adf-info-drawer-tab-active-focused-color:unset,
+        --adf-info-drawer-tab-active-focused-bottom-line:unset,
     );
 
     // propagates SCSS variables into the CSS variables scope
diff --git a/lib/core/src/lib/styles/_index.scss b/lib/core/src/lib/styles/_index.scss
index 63e23e3fa0..6b3286a8f1 100644
--- a/lib/core/src/lib/styles/_index.scss
+++ b/lib/core/src/lib/styles/_index.scss
@@ -113,7 +113,7 @@
     @include mat-datetimepicker-theme($theme);
     @include adf-snackbar-theme;
     @include adf-material-theme;
-    @include adf-components-variables;
+    @include adf-components-variables($theme);
 }
 
 $adf-custom-theme-sizes: (