[AAE-15296] added design tokens to InfoDrawerComponent (#9051)

* [AAE-15296] added design tokens to InfoDrawerComponent

* [AAE-15296] added access to theme to component variables

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 {

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">
 

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);
+    }
+}

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

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: (