From d1d815f8ea57024ffed06334f0b54c0c009b6fe2 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 7 Nov 2023 23:37:41 +0300
Subject: [PATCH 01/49] feat: calendars v3 colors #987

---
 .../calendar-month.component.html             |  2 +-
 .../calendar-month.component.less             |  8 ++-
 .../calendar-month/calendar-month.module.ts   |  2 -
 .../calendar-range.component.html             |  2 +-
 .../calendar-range.component.less             |  2 +-
 .../primitive-calendar-range.component.html   |  1 -
 .../primitive-calendar-range.component.less   |  4 --
 .../primitive-calendar-range.component.ts     |  1 -
 .../primitive-calendar.component.html         |  5 +-
 .../primitive-calendar.component.less         | 33 ++++++-----
 .../primitive-month-picker.component.less     |  3 -
 .../primitive-spin-button.component.less      |  4 +-
 .../primitive-spin-button.component.ts        |  1 -
 .../primitive-spin-button.template.html       |  4 +-
 ...itive-year-month-pagination.component.html | 20 +++----
 ...itive-year-month-pagination.component.less | 44 +++++----------
 .../primitive-year-month-pagination.module.ts |  2 -
 .../primitive-year-picker.component.less      |  6 --
 libs/components/src/styles/mixins/mixins.less | 27 +++++++++
 libs/components/src/styles/mixins/picker.less | 56 +++++++++++--------
 20 files changed, 117 insertions(+), 110 deletions(-)

diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.component.html b/libs/components/src/lib/components/calendar-month/calendar-month.component.html
index 4d18288612..d3ca2afc9e 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.component.html
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.component.html
@@ -17,9 +17,9 @@
     prizmStopPropagation="mousedown"
   >
     <button
+      class="year-btn"
       [prizmFocusable]="false"
       (click)="onYearClick()"
-      prizmLink
       automation-id="prizm-calendar-month__active-year"
     >
       {{ year.formattedYear }}
diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.component.less b/libs/components/src/lib/components/calendar-month/calendar-month.component.less
index c189f39a7c..1b91ea6b33 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.component.less
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.component.less
@@ -8,6 +8,10 @@
   width: 15.75rem;
   padding: 1.125rem;
   box-sizing: content-box;
+
+  .year-btn {
+    .pagination-btn();
+  }
 }
 
 .z-row {
@@ -23,10 +27,10 @@
   }
 
   &:not([data-range='start']):not([data-range='single']):not([data-range='end']):hover {
-    background-color: var(--prizm-g2-g11);
+    background-color: var(--prizm-v3-button-ghost-hover);
 
     .z-item {
-      color: var(--prizm-index-plan) !important;
+      color: var(--prizm-v3-button-primary-solid-hover) !important;
     }
   }
 }
diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
index b3f5ff5066..150aee8526 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
@@ -6,7 +6,6 @@ import { PrizmHoveredModule } from '../../directives/hovered/hovered.module';
 import { PrizmPressedModule } from '../../directives/pressed/pressed.module';
 import { PrizmPrimitiveSpinButtonModule } from '../internal/primitive-spin-button/primitive-spin-button.module';
 import { PrizmPrimitiveYearPickerModule } from '../internal/primitive-year-picker/primitive-year-picker.module';
-import { PrizmLinkModule } from '../link/link.module';
 import { PrizmScrollbarModule } from '../scrollbar/scrollbar.module';
 import { PrizmCalendarMonthComponent } from './calendar-month.component';
 import { PrizmStopPropagationModule } from '../../directives/stop-propagation/stop-propagation.module';
@@ -18,7 +17,6 @@ import { PrizmStopPropagationModule } from '../../directives/stop-propagation/st
     PrizmPrimitiveYearPickerModule,
     PrizmPrimitiveSpinButtonModule,
     PrizmScrollbarModule,
-    PrizmLinkModule,
     PrizmLetModule,
     PrizmHoveredModule,
     PrizmPressedModule,
diff --git a/libs/components/src/lib/components/calendar-range/calendar-range.component.html b/libs/components/src/lib/components/calendar-range/calendar-range.component.html
index 4707764b4d..653d5941b9 100644
--- a/libs/components/src/lib/components/calendar-range/calendar-range.component.html
+++ b/libs/components/src/lib/components/calendar-range/calendar-range.component.html
@@ -42,7 +42,7 @@
     <prizm-data-list
       class="z-menu"
       [style.--prizm-data-list-border]="0"
-      [style.--prizm-data-list-border-left]="'1px solid var(--prizm-border-widget)'"
+      [style.--prizm-data-list-border-left]="'1px solid var(--prizm-v3-background-stroke)'"
       role="menu"
       automation-id="prizm-calendar-range__menu"
     >
diff --git a/libs/components/src/lib/components/calendar-range/calendar-range.component.less b/libs/components/src/lib/components/calendar-range/calendar-range.component.less
index b378d0d629..94ed736ee6 100644
--- a/libs/components/src/lib/components/calendar-range/calendar-range.component.less
+++ b/libs/components/src/lib/components/calendar-range/calendar-range.component.less
@@ -10,7 +10,7 @@
 
 .z-menu {
   width: 11rem;
-  border-left: 1px solid var(--prizm-base-03);
+  border-left: 1px solid var(--prizm-v3-background-stroke);
 }
 
 .z-checkmark {
diff --git a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html
index 802c52f3ff..d8dac6196b 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html
+++ b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html
@@ -16,7 +16,6 @@
 </prizm-calendar>
 
 <prizm-calendar
-  class="z-border"
   [(hoveredItem)]="hoveredItem"
   [min]="min"
   [max]="max"
diff --git a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less
index 0b276ae295..79ff2d5269 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less
+++ b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less
@@ -1,7 +1,3 @@
 :host {
   display: flex;
 }
-
-.z-border {
-  border-left: 1px solid var(--prizm-base-03);
-}
diff --git a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.ts b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.ts
index 5dea12a606..c91e21dd95 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.ts
+++ b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.ts
@@ -3,7 +3,6 @@ import {
   ChangeDetectorRef,
   Component,
   EventEmitter,
-  HostBinding,
   Inject,
   Input,
   OnInit,
diff --git a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html
index 6281262a20..db55d45e85 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html
+++ b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html
@@ -4,7 +4,8 @@
 <div class="z-row z-row_weekday prizm-font-main-body-12">
   <div
     class="z-cell"
-    *ngFor="let day of weekDays$ | async"
+    *ngFor="let day of weekDays$ | async; let i = index"
+    [class.z-cell_weekend]="i > 4"
     [innerText]="day | prizmCallFunc : capitalizeFirstLetter"
   ></div>
 </div>
@@ -19,7 +20,6 @@
         <div
           class="z-cell"
           *ngIf="!itemIsUnavailable(item) || showAdjacent"
-          [class.z-cell_weekend]="item.isWeekend"
           [class.z-cell_today]="itemIsToday(item)"
           [class.z-cell_interval]="itemIsInterval(item)"
           [attr.data-range]="getItemRange(item)"
@@ -32,6 +32,7 @@
           <div
             class="z-item prizm-font-btn-links-14"
             [class.z-item_unavailable]="itemIsUnavailable(item)"
+            [class.z-item_weekend]="item.isWeekend"
             automation-id="prizm-primitive-calendar__item"
           >
             {{ item.day }}
diff --git a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
index c049edfa7b..3b0d40a153 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
+++ b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
@@ -9,10 +9,10 @@
 }
 
 .z-item {
-  color: var(--prizm-text-main);
+  color: var(--prizm-v3-text-icon-secondary);
 
   &.z-item_unavailable {
-    color: var(--prizm-grey-g10-g4);
+    color: var(--prizm-v3-text-icon-disable);
   }
 }
 
@@ -25,23 +25,22 @@
 
   &_weekday {
     font: var(--prizm-font-text-s);
-    color: var(--prizm-text-subscript);
+    color: var(--prizm-v3-text-icon-tertiary);
     pointer-events: none;
     text-transform: capitalize;
+    .z-cell_weekend {
+      color: var(--prizm-v3-status-alarm-primary-default);
+    }
   }
 }
 
 .z-item {
   display: flex;
   flex-direction: column;
-}
-
-.z-cell_weekend {
-  color: var(--prizm-negative);
-}
 
-.z-item_unavailable {
-  opacity: var(--prizm-disabled-opacity);
+  &_weekend {
+    color: var(--prizm-calendar-day-weekend-color);
+  }
 }
 
 .z-dots {
@@ -69,18 +68,24 @@
   background-color: var(--prizm-status-day-color);
 
   &[data-prizm-status='index'] {
-    background-color: var(--prizm-calendar-day-status-default, var(--prizm-index-plan));
+    background-color: var(--prizm-calendar-day-status-default, var(--prizm-v3-status-info-primary-default));
   }
 
   &[data-prizm-status='warning'] {
-    background-color: var(--prizm-calendar-day-status-warning, var(--prizm-index-warning));
+    background-color: var(
+      --prizm-calendar-day-status-warning,
+      var(--prizm-v3-status-warning-primary-default)
+    );
   }
 
   &[data-prizm-status='danger'] {
-    background-color: var(--prizm-calendar-day-status-danger, var(--prizm-index-danger));
+    background-color: var(--prizm-calendar-day-status-danger, var(--prizm-v3-status-alarm-primary-default));
   }
 
   &[data-prizm-status='success'] {
-    background-color: var(--prizm-calendar-day-status-success, var(--prizm-index-good));
+    background-color: var(
+      --prizm-calendar-day-status-success,
+      var(--prizm-v3-status-success-primary-default)
+    );
   }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less b/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less
index 7feb9024fa..161c50d2aa 100644
--- a/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less
+++ b/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less
@@ -24,7 +24,4 @@
 .z-cell {
   flex-grow: 1;
   width: 100%;
-  &[data-state='pressed'] .z-item {
-    background-color: var(--prizm-index-plan);
-  }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
index 0b16423f0b..a3cdd3a714 100644
--- a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
+++ b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
@@ -22,10 +22,10 @@
   }
 }
 
-.z-content {
+.z-content:not(:empty) {
   padding: 0 2 * @space;
 
   :host._focus-visible & {
-    box-shadow: 0 0 0 1px var(--prizm-focus);
+    box-shadow: 0 0 0 1px var(--prizm-v3-background-stroke-focus);
   }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts
index fb84f5c66f..38f56833ea 100644
--- a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts
+++ b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts
@@ -3,7 +3,6 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  HostBinding,
   Inject,
   Input,
   Output,
diff --git a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html
index bba54674a7..eb4e7e54e8 100644
--- a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html
+++ b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html
@@ -13,7 +13,7 @@
     class="z-arrow"
     prizmIconButton
     type="button"
-    size="xs"
+    size="l"
     [appearanceType]="mode"
     automation-id="prizm-primitive-spin-button__left"
     icon="arrows-chevron-left"
@@ -30,7 +30,7 @@
     class="z-arrow"
     prizmIconButton
     type="button"
-    size="xs"
+    size="l"
     appearance="secondary"
     automation-id="prizm-primitive-spin-button__right"
     icon="arrows-chevron-right"
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
index baec304d6b..34e3a99734 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
@@ -24,33 +24,33 @@
 <ng-template #button>
   <div class="year-box" (click)="onYearClick($event)">
     <button
+      class="pagination-btn"
       [attr.data-testid]="'prizm-primitive-year-month-pagination__year-button'"
-      [prizmFocusable]="false"
+      [prizmFocusable]="true"
       [class.active]="yearActive"
       type="button"
-      prizmLink
     >
       {{ value.formattedYear }}
+      <span>
+        <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
+      </span>
     </button>
-    <span>
-      <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
-    </span>
   </div>
 </ng-template>
 
 <ng-template #buttonMonth>
   <div class="month-box" (click)="onMonthClick($event)">
     <button
+      class="pagination-btn"
       [attr.testId]="'prizm-primitive-year-month-pagination__year-button'"
       [class.active]="monthActive"
-      [prizmFocusable]="false"
+      [prizmFocusable]="true"
       type="button"
-      prizmLink
     >
       {{ value | prizmMonth | async }}
+      <span>
+        <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
+      </span>
     </button>
-    <span>
-      <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
-    </span>
   </div>
 </ng-template>
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
index e77789ca54..537a55bffe 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
@@ -1,40 +1,22 @@
+@import '../../../../styles/ui-local.less';
+
 :host {
   display: block;
-}
 
-.box {
-  display: flex;
-  justify-content: space-between;
-}
-
-.year-month {
-  color: var(--prizm-text-contrast);
-  display: flex;
-  gap: 8px;
-}
-
-.year-box,
-.month-box {
-  display: flex;
-  justify-content: space-between;
-  color: var(--prizm-text-contrast);
-  gap: 4px;
-  cursor: pointer;
-
-  prizm-icon {
-    color: var(--prizm-border-icon);
+  .box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 
-  &:hover,
-  &:hover prizm-icon {
-    color: var(--prizm-index-plan);
+  .year-month {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--prizm-v3-text-icon-secondary);
   }
-}
-
-[prizmLink] {
-  --prizm-link: var(--prizm-text-contrast);
 
-  &.active {
-    --prizm-link: var(--prizm-index-plan);
+  .pagination-btn {
+    .pagination-btn();
   }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
index e49e3b9b39..ac333894b6 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
 import { PrizmMonthPipeModule } from '../../../pipes/month';
 import { PrizmPrimitiveYearMonthPaginationComponent } from './primitive-year-month-pagination.component';
 import { PrizmPrimitiveSpinButtonModule } from '../primitive-spin-button';
-import { PrizmLinkModule } from '../../link/link.module';
 import { PrizmFocusableModule } from '../../../directives/focusable/focusable.module';
 import { PrizmIconModule } from '../../icon/icon.module';
 
@@ -12,7 +11,6 @@ import { PrizmIconModule } from '../../icon/icon.module';
     CommonModule,
     PrizmFocusableModule,
     PrizmPrimitiveSpinButtonModule,
-    PrizmLinkModule,
     PrizmIconModule,
     PrizmMonthPipeModule,
   ],
diff --git a/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less b/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less
index 88495fdbc4..ffcd8262c3 100644
--- a/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less
+++ b/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less
@@ -19,9 +19,3 @@
     margin-bottom: 0;
   }
 }
-
-.z-cell {
-  &[data-state='pressed'] .z-item {
-    background-color: var(--prizm-index-plan);
-  }
-}
diff --git a/libs/components/src/styles/mixins/mixins.less b/libs/components/src/styles/mixins/mixins.less
index 9991911a5a..94ec307954 100644
--- a/libs/components/src/styles/mixins/mixins.less
+++ b/libs/components/src/styles/mixins/mixins.less
@@ -121,3 +121,30 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.pagination-btn() {
+  border: none;
+  background: none;
+  outline: none;
+  display: flex;
+  gap: 4px;
+  padding: 8px;
+  text-align: left;
+  cursor: pointer;
+
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 400;
+
+  color: var(--prizm-v3-text-icon-secondary);
+
+  &:hover:not(.active):not(:active) {
+    background-color: var(--prizm-v3-button-ghost-hover);
+    border-radius: 2px;
+  }
+
+  &:active,
+  &.active {
+    color: var(--prizm-v3-button-primary-solid-active);
+  }
+}
diff --git a/libs/components/src/styles/mixins/picker.less b/libs/components/src/styles/mixins/picker.less
index b9754122b7..62b49b9304 100644
--- a/libs/components/src/styles/mixins/picker.less
+++ b/libs/components/src/styles/mixins/picker.less
@@ -16,7 +16,7 @@
     flex: 1;
     line-height: 2rem;
     border-radius: 2px;
-    color: var(--prizm-text-contrast);
+    color: var(--prizm-v3-text-icon-secondary);
 
     &:before,
     &:after {
@@ -47,9 +47,21 @@
     &_today {
       border-radius: 2px;
 
+      &[data-state='hovered'] {
+        & > .z-item {
+          border-color: var(--prizm-v3-button-primary-solid-hover);
+          color: var(--prizm-v3-button-primary-solid-hover);
+          background-color: var(--prizm-v3-button-ghost-hover);
+        }
+      }
+
       .z-item {
-        border: 1px solid var(--prizm-index-plan);
-        color: var(--prizm-exeptions-g1-b1);
+        border: 1px solid var(--prizm-v3-button-primary-solid-default);
+        color: var(--prizm-v3-button-primary-solid-default);
+
+        &_unavailable {
+          color: var(--prizm-v3-text-icon-disable);
+        }
       }
     }
 
@@ -66,10 +78,10 @@
 
     &_interval {
       &:before {
-        background: var(--prizm-lite-b130-20);
+        background: var(--prizm-v3-button-primary-ghost-active);
 
         :host._single & {
-          background-color: var(--prizm-lite-b130-20);
+          background-color: var(--prizm-v3-button-primary-ghost-active);
         }
       }
 
@@ -93,39 +105,34 @@
 
       & > .z-item {
         border-radius: 0;
-        color: var(--prizm-index-plan);
+        color: var(--prizm-v3-button-primary-solid-default);
       }
     }
 
     &[data-range] {
-      &:after {
-        background-color: var(--prizm-primary-text);
-      }
-
       &:not([data-state='hovered']) > .z-item {
-        color: var(--prizm-grey-g13-g1);
+        color: var(--prizm-v3-text-icon-exception);
 
         &:before,
         &:after {
-          background-color: var(--prizm-index-plan);
+          background-color: var(--prizm-v3-button-primary-solid-default);
         }
       }
 
       &[data-state='hovered'] > .z-item {
-        background-color: var(--prizm-g2-g11);
-        color: var(--prizm-index-plan);
+        background-color: var(--prizm-v3-button-ghost-hover);
+        color: var(--prizm-v3-button-primary-solid-hover);
       }
 
       &[data-state='hovered'] > .z-item:before,
       &[data-state='hovered'] > .z-item:after {
-        background-color: var(--prizm-grey-g12-g2);
-        color: var(--prizm-index-plan);
+        background-color: var(--prizm-v3-button-ghost-hover);
+        color: var(--prizm-v3-button-primary-solid-hover);
       }
 
       &[data-state='pressed'] > .z-item:before,
       &[data-state='pressed'] > .z-item:after {
-        //background-color: var(--prizm-primary-active);
-        background-color: var(--prizm-index-plan);
+        background-color: var(--prizm-v3-button-primary-solid-default);
       }
     }
 
@@ -160,19 +167,20 @@
       cursor: not-allowed;
 
       & > .z-item {
-        opacity: 0.36;
+        text-decoration: line-through;
+        opacity: 0.3;
       }
     }
 
-    &[data-state='hovered']:not([data-range]) > .z-item {
-      background-color: var(--prizm-g2-g11);
-      color: var(--prizm-exeptions-g1-b1);
+    &[data-state='hovered']:not([data-range]):not(.z-cell_today) > .z-item {
+      background-color: var(--prizm-v3-button-ghost-hover);
+      color: var(--prizm-v3-button-primary-solid-hover);
     }
 
     &[data-state='pressed']:hover:not([data-range]) > .z-item {
-      background-color: var(--prizm-index-plan);
+      background-color: var(--prizm-v3-button-primary-solid-default);
       border-radius: 2px;
-      color: var(--prizm-grey-g13-g1);
+      color: var(--prizm-v3-text-icon-exception);
     }
   }
 }

From 5b5a3fb639d917dbff32af03d829c0f352726e67 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 7 Nov 2023 23:37:41 +0300
Subject: [PATCH 02/49] feat: calendars v3 colors #987

---
 .../calendar-month.component.html             |  2 +-
 .../calendar-month.component.less             |  8 ++-
 .../calendar-month.component.ts               |  2 -
 .../calendar-month/calendar-month.module.ts   |  7 +--
 .../calendar-range.component.html             |  2 +-
 .../calendar-range.component.less             |  2 +-
 .../primitive-calendar-range.component.html   |  1 -
 .../primitive-calendar-range.component.less   |  4 --
 .../primitive-calendar-range.component.ts     |  1 -
 .../primitive-calendar.component.html         |  5 +-
 .../primitive-calendar.component.less         | 33 ++++++-----
 .../primitive-month-picker.component.less     |  3 -
 .../primitive-spin-button.component.less      |  4 +-
 .../primitive-spin-button.component.ts        |  1 -
 .../primitive-spin-button.template.html       |  4 +-
 ...itive-year-month-pagination.component.html | 20 +++----
 ...itive-year-month-pagination.component.less | 44 +++++----------
 .../primitive-year-month-pagination.module.ts |  2 -
 .../primitive-year-picker.component.less      |  6 --
 libs/components/src/styles/mixins/mixins.less | 27 +++++++++
 libs/components/src/styles/mixins/picker.less | 56 +++++++++++--------
 21 files changed, 118 insertions(+), 116 deletions(-)

diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.component.html b/libs/components/src/lib/components/calendar-month/calendar-month.component.html
index 4d18288612..d3ca2afc9e 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.component.html
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.component.html
@@ -17,9 +17,9 @@
     prizmStopPropagation="mousedown"
   >
     <button
+      class="year-btn"
       [prizmFocusable]="false"
       (click)="onYearClick()"
-      prizmLink
       automation-id="prizm-calendar-month__active-year"
     >
       {{ year.formattedYear }}
diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.component.less b/libs/components/src/lib/components/calendar-month/calendar-month.component.less
index c189f39a7c..1b91ea6b33 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.component.less
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.component.less
@@ -8,6 +8,10 @@
   width: 15.75rem;
   padding: 1.125rem;
   box-sizing: content-box;
+
+  .year-btn {
+    .pagination-btn();
+  }
 }
 
 .z-row {
@@ -23,10 +27,10 @@
   }
 
   &:not([data-range='start']):not([data-range='single']):not([data-range='end']):hover {
-    background-color: var(--prizm-g2-g11);
+    background-color: var(--prizm-v3-button-ghost-hover);
 
     .z-item {
-      color: var(--prizm-index-plan) !important;
+      color: var(--prizm-v3-button-primary-solid-hover) !important;
     }
   }
 }
diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.component.ts b/libs/components/src/lib/components/calendar-month/calendar-month.component.ts
index 6671b5d935..a8f7af4e44 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.component.ts
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.component.ts
@@ -33,7 +33,6 @@ import {
 } from '../../directives';
 import { PrizmPrimitiveSpinButtonModule, PrizmPrimitiveYearPickerModule } from '../internal';
 import { PrizmScrollbarModule } from '../scrollbar';
-import { PrizmLinkModule } from '../link';
 import { PrizmLetModule } from '@prizm-ui/helpers';
 
 const TODAY = PrizmDay.currentLocal();
@@ -49,7 +48,6 @@ const TODAY = PrizmDay.currentLocal();
     PrizmPrimitiveYearPickerModule,
     PrizmPrimitiveSpinButtonModule,
     PrizmScrollbarModule,
-    PrizmLinkModule,
     PrizmLetModule,
     PrizmHoveredModule,
     PrizmPressedModule,
diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
index d54e9be971..1f045c10c9 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
@@ -3,13 +3,8 @@ import { NgModule } from '@angular/core';
 import { PrizmLetModule } from '@prizm-ui/helpers';
 import { PrizmFocusableModule } from '../../directives/focusable/focusable.module';
 import { PrizmHoveredModule } from '../../directives/hovered/hovered.module';
-import { PrizmPressedModule } from '../../directives/pressed/pressed.module';
-import { PrizmPrimitiveSpinButtonModule } from '../internal/primitive-spin-button/primitive-spin-button.module';
-import { PrizmPrimitiveYearPickerModule } from '../internal/primitive-year-picker/primitive-year-picker.module';
-import { PrizmLinkModule } from '../link/link.module';
-import { PrizmScrollbarModule } from '../scrollbar/scrollbar.module';
 import { PrizmCalendarMonthComponent } from './calendar-month.component';
-import { PrizmStopPropagationModule } from '../../directives/stop-propagation/stop-propagation.module';
+
 
 /**
  * @deprecated
diff --git a/libs/components/src/lib/components/calendar-range/calendar-range.component.html b/libs/components/src/lib/components/calendar-range/calendar-range.component.html
index 4707764b4d..653d5941b9 100644
--- a/libs/components/src/lib/components/calendar-range/calendar-range.component.html
+++ b/libs/components/src/lib/components/calendar-range/calendar-range.component.html
@@ -42,7 +42,7 @@
     <prizm-data-list
       class="z-menu"
       [style.--prizm-data-list-border]="0"
-      [style.--prizm-data-list-border-left]="'1px solid var(--prizm-border-widget)'"
+      [style.--prizm-data-list-border-left]="'1px solid var(--prizm-v3-background-stroke)'"
       role="menu"
       automation-id="prizm-calendar-range__menu"
     >
diff --git a/libs/components/src/lib/components/calendar-range/calendar-range.component.less b/libs/components/src/lib/components/calendar-range/calendar-range.component.less
index b378d0d629..94ed736ee6 100644
--- a/libs/components/src/lib/components/calendar-range/calendar-range.component.less
+++ b/libs/components/src/lib/components/calendar-range/calendar-range.component.less
@@ -10,7 +10,7 @@
 
 .z-menu {
   width: 11rem;
-  border-left: 1px solid var(--prizm-base-03);
+  border-left: 1px solid var(--prizm-v3-background-stroke);
 }
 
 .z-checkmark {
diff --git a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html
index 802c52f3ff..d8dac6196b 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html
+++ b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html
@@ -16,7 +16,6 @@
 </prizm-calendar>
 
 <prizm-calendar
-  class="z-border"
   [(hoveredItem)]="hoveredItem"
   [min]="min"
   [max]="max"
diff --git a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less
index 0b276ae295..79ff2d5269 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less
+++ b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less
@@ -1,7 +1,3 @@
 :host {
   display: flex;
 }
-
-.z-border {
-  border-left: 1px solid var(--prizm-base-03);
-}
diff --git a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.ts b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.ts
index 5dea12a606..c91e21dd95 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.ts
+++ b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.ts
@@ -3,7 +3,6 @@ import {
   ChangeDetectorRef,
   Component,
   EventEmitter,
-  HostBinding,
   Inject,
   Input,
   OnInit,
diff --git a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html
index 6281262a20..db55d45e85 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html
+++ b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html
@@ -4,7 +4,8 @@
 <div class="z-row z-row_weekday prizm-font-main-body-12">
   <div
     class="z-cell"
-    *ngFor="let day of weekDays$ | async"
+    *ngFor="let day of weekDays$ | async; let i = index"
+    [class.z-cell_weekend]="i > 4"
     [innerText]="day | prizmCallFunc : capitalizeFirstLetter"
   ></div>
 </div>
@@ -19,7 +20,6 @@
         <div
           class="z-cell"
           *ngIf="!itemIsUnavailable(item) || showAdjacent"
-          [class.z-cell_weekend]="item.isWeekend"
           [class.z-cell_today]="itemIsToday(item)"
           [class.z-cell_interval]="itemIsInterval(item)"
           [attr.data-range]="getItemRange(item)"
@@ -32,6 +32,7 @@
           <div
             class="z-item prizm-font-btn-links-14"
             [class.z-item_unavailable]="itemIsUnavailable(item)"
+            [class.z-item_weekend]="item.isWeekend"
             automation-id="prizm-primitive-calendar__item"
           >
             {{ item.day }}
diff --git a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
index c049edfa7b..3b0d40a153 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
+++ b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
@@ -9,10 +9,10 @@
 }
 
 .z-item {
-  color: var(--prizm-text-main);
+  color: var(--prizm-v3-text-icon-secondary);
 
   &.z-item_unavailable {
-    color: var(--prizm-grey-g10-g4);
+    color: var(--prizm-v3-text-icon-disable);
   }
 }
 
@@ -25,23 +25,22 @@
 
   &_weekday {
     font: var(--prizm-font-text-s);
-    color: var(--prizm-text-subscript);
+    color: var(--prizm-v3-text-icon-tertiary);
     pointer-events: none;
     text-transform: capitalize;
+    .z-cell_weekend {
+      color: var(--prizm-v3-status-alarm-primary-default);
+    }
   }
 }
 
 .z-item {
   display: flex;
   flex-direction: column;
-}
-
-.z-cell_weekend {
-  color: var(--prizm-negative);
-}
 
-.z-item_unavailable {
-  opacity: var(--prizm-disabled-opacity);
+  &_weekend {
+    color: var(--prizm-calendar-day-weekend-color);
+  }
 }
 
 .z-dots {
@@ -69,18 +68,24 @@
   background-color: var(--prizm-status-day-color);
 
   &[data-prizm-status='index'] {
-    background-color: var(--prizm-calendar-day-status-default, var(--prizm-index-plan));
+    background-color: var(--prizm-calendar-day-status-default, var(--prizm-v3-status-info-primary-default));
   }
 
   &[data-prizm-status='warning'] {
-    background-color: var(--prizm-calendar-day-status-warning, var(--prizm-index-warning));
+    background-color: var(
+      --prizm-calendar-day-status-warning,
+      var(--prizm-v3-status-warning-primary-default)
+    );
   }
 
   &[data-prizm-status='danger'] {
-    background-color: var(--prizm-calendar-day-status-danger, var(--prizm-index-danger));
+    background-color: var(--prizm-calendar-day-status-danger, var(--prizm-v3-status-alarm-primary-default));
   }
 
   &[data-prizm-status='success'] {
-    background-color: var(--prizm-calendar-day-status-success, var(--prizm-index-good));
+    background-color: var(
+      --prizm-calendar-day-status-success,
+      var(--prizm-v3-status-success-primary-default)
+    );
   }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less b/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less
index 7feb9024fa..161c50d2aa 100644
--- a/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less
+++ b/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less
@@ -24,7 +24,4 @@
 .z-cell {
   flex-grow: 1;
   width: 100%;
-  &[data-state='pressed'] .z-item {
-    background-color: var(--prizm-index-plan);
-  }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
index 0b16423f0b..a3cdd3a714 100644
--- a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
+++ b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
@@ -22,10 +22,10 @@
   }
 }
 
-.z-content {
+.z-content:not(:empty) {
   padding: 0 2 * @space;
 
   :host._focus-visible & {
-    box-shadow: 0 0 0 1px var(--prizm-focus);
+    box-shadow: 0 0 0 1px var(--prizm-v3-background-stroke-focus);
   }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts
index fb84f5c66f..38f56833ea 100644
--- a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts
+++ b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts
@@ -3,7 +3,6 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  HostBinding,
   Inject,
   Input,
   Output,
diff --git a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html
index bba54674a7..eb4e7e54e8 100644
--- a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html
+++ b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html
@@ -13,7 +13,7 @@
     class="z-arrow"
     prizmIconButton
     type="button"
-    size="xs"
+    size="l"
     [appearanceType]="mode"
     automation-id="prizm-primitive-spin-button__left"
     icon="arrows-chevron-left"
@@ -30,7 +30,7 @@
     class="z-arrow"
     prizmIconButton
     type="button"
-    size="xs"
+    size="l"
     appearance="secondary"
     automation-id="prizm-primitive-spin-button__right"
     icon="arrows-chevron-right"
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
index baec304d6b..34e3a99734 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
@@ -24,33 +24,33 @@
 <ng-template #button>
   <div class="year-box" (click)="onYearClick($event)">
     <button
+      class="pagination-btn"
       [attr.data-testid]="'prizm-primitive-year-month-pagination__year-button'"
-      [prizmFocusable]="false"
+      [prizmFocusable]="true"
       [class.active]="yearActive"
       type="button"
-      prizmLink
     >
       {{ value.formattedYear }}
+      <span>
+        <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
+      </span>
     </button>
-    <span>
-      <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
-    </span>
   </div>
 </ng-template>
 
 <ng-template #buttonMonth>
   <div class="month-box" (click)="onMonthClick($event)">
     <button
+      class="pagination-btn"
       [attr.testId]="'prizm-primitive-year-month-pagination__year-button'"
       [class.active]="monthActive"
-      [prizmFocusable]="false"
+      [prizmFocusable]="true"
       type="button"
-      prizmLink
     >
       {{ value | prizmMonth | async }}
+      <span>
+        <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
+      </span>
     </button>
-    <span>
-      <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
-    </span>
   </div>
 </ng-template>
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
index e77789ca54..537a55bffe 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
@@ -1,40 +1,22 @@
+@import '../../../../styles/ui-local.less';
+
 :host {
   display: block;
-}
 
-.box {
-  display: flex;
-  justify-content: space-between;
-}
-
-.year-month {
-  color: var(--prizm-text-contrast);
-  display: flex;
-  gap: 8px;
-}
-
-.year-box,
-.month-box {
-  display: flex;
-  justify-content: space-between;
-  color: var(--prizm-text-contrast);
-  gap: 4px;
-  cursor: pointer;
-
-  prizm-icon {
-    color: var(--prizm-border-icon);
+  .box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 
-  &:hover,
-  &:hover prizm-icon {
-    color: var(--prizm-index-plan);
+  .year-month {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--prizm-v3-text-icon-secondary);
   }
-}
-
-[prizmLink] {
-  --prizm-link: var(--prizm-text-contrast);
 
-  &.active {
-    --prizm-link: var(--prizm-index-plan);
+  .pagination-btn {
+    .pagination-btn();
   }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
index e49e3b9b39..ac333894b6 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
 import { PrizmMonthPipeModule } from '../../../pipes/month';
 import { PrizmPrimitiveYearMonthPaginationComponent } from './primitive-year-month-pagination.component';
 import { PrizmPrimitiveSpinButtonModule } from '../primitive-spin-button';
-import { PrizmLinkModule } from '../../link/link.module';
 import { PrizmFocusableModule } from '../../../directives/focusable/focusable.module';
 import { PrizmIconModule } from '../../icon/icon.module';
 
@@ -12,7 +11,6 @@ import { PrizmIconModule } from '../../icon/icon.module';
     CommonModule,
     PrizmFocusableModule,
     PrizmPrimitiveSpinButtonModule,
-    PrizmLinkModule,
     PrizmIconModule,
     PrizmMonthPipeModule,
   ],
diff --git a/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less b/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less
index 88495fdbc4..ffcd8262c3 100644
--- a/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less
+++ b/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less
@@ -19,9 +19,3 @@
     margin-bottom: 0;
   }
 }
-
-.z-cell {
-  &[data-state='pressed'] .z-item {
-    background-color: var(--prizm-index-plan);
-  }
-}
diff --git a/libs/components/src/styles/mixins/mixins.less b/libs/components/src/styles/mixins/mixins.less
index 9991911a5a..94ec307954 100644
--- a/libs/components/src/styles/mixins/mixins.less
+++ b/libs/components/src/styles/mixins/mixins.less
@@ -121,3 +121,30 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.pagination-btn() {
+  border: none;
+  background: none;
+  outline: none;
+  display: flex;
+  gap: 4px;
+  padding: 8px;
+  text-align: left;
+  cursor: pointer;
+
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 400;
+
+  color: var(--prizm-v3-text-icon-secondary);
+
+  &:hover:not(.active):not(:active) {
+    background-color: var(--prizm-v3-button-ghost-hover);
+    border-radius: 2px;
+  }
+
+  &:active,
+  &.active {
+    color: var(--prizm-v3-button-primary-solid-active);
+  }
+}
diff --git a/libs/components/src/styles/mixins/picker.less b/libs/components/src/styles/mixins/picker.less
index b9754122b7..62b49b9304 100644
--- a/libs/components/src/styles/mixins/picker.less
+++ b/libs/components/src/styles/mixins/picker.less
@@ -16,7 +16,7 @@
     flex: 1;
     line-height: 2rem;
     border-radius: 2px;
-    color: var(--prizm-text-contrast);
+    color: var(--prizm-v3-text-icon-secondary);
 
     &:before,
     &:after {
@@ -47,9 +47,21 @@
     &_today {
       border-radius: 2px;
 
+      &[data-state='hovered'] {
+        & > .z-item {
+          border-color: var(--prizm-v3-button-primary-solid-hover);
+          color: var(--prizm-v3-button-primary-solid-hover);
+          background-color: var(--prizm-v3-button-ghost-hover);
+        }
+      }
+
       .z-item {
-        border: 1px solid var(--prizm-index-plan);
-        color: var(--prizm-exeptions-g1-b1);
+        border: 1px solid var(--prizm-v3-button-primary-solid-default);
+        color: var(--prizm-v3-button-primary-solid-default);
+
+        &_unavailable {
+          color: var(--prizm-v3-text-icon-disable);
+        }
       }
     }
 
@@ -66,10 +78,10 @@
 
     &_interval {
       &:before {
-        background: var(--prizm-lite-b130-20);
+        background: var(--prizm-v3-button-primary-ghost-active);
 
         :host._single & {
-          background-color: var(--prizm-lite-b130-20);
+          background-color: var(--prizm-v3-button-primary-ghost-active);
         }
       }
 
@@ -93,39 +105,34 @@
 
       & > .z-item {
         border-radius: 0;
-        color: var(--prizm-index-plan);
+        color: var(--prizm-v3-button-primary-solid-default);
       }
     }
 
     &[data-range] {
-      &:after {
-        background-color: var(--prizm-primary-text);
-      }
-
       &:not([data-state='hovered']) > .z-item {
-        color: var(--prizm-grey-g13-g1);
+        color: var(--prizm-v3-text-icon-exception);
 
         &:before,
         &:after {
-          background-color: var(--prizm-index-plan);
+          background-color: var(--prizm-v3-button-primary-solid-default);
         }
       }
 
       &[data-state='hovered'] > .z-item {
-        background-color: var(--prizm-g2-g11);
-        color: var(--prizm-index-plan);
+        background-color: var(--prizm-v3-button-ghost-hover);
+        color: var(--prizm-v3-button-primary-solid-hover);
       }
 
       &[data-state='hovered'] > .z-item:before,
       &[data-state='hovered'] > .z-item:after {
-        background-color: var(--prizm-grey-g12-g2);
-        color: var(--prizm-index-plan);
+        background-color: var(--prizm-v3-button-ghost-hover);
+        color: var(--prizm-v3-button-primary-solid-hover);
       }
 
       &[data-state='pressed'] > .z-item:before,
       &[data-state='pressed'] > .z-item:after {
-        //background-color: var(--prizm-primary-active);
-        background-color: var(--prizm-index-plan);
+        background-color: var(--prizm-v3-button-primary-solid-default);
       }
     }
 
@@ -160,19 +167,20 @@
       cursor: not-allowed;
 
       & > .z-item {
-        opacity: 0.36;
+        text-decoration: line-through;
+        opacity: 0.3;
       }
     }
 
-    &[data-state='hovered']:not([data-range]) > .z-item {
-      background-color: var(--prizm-g2-g11);
-      color: var(--prizm-exeptions-g1-b1);
+    &[data-state='hovered']:not([data-range]):not(.z-cell_today) > .z-item {
+      background-color: var(--prizm-v3-button-ghost-hover);
+      color: var(--prizm-v3-button-primary-solid-hover);
     }
 
     &[data-state='pressed']:hover:not([data-range]) > .z-item {
-      background-color: var(--prizm-index-plan);
+      background-color: var(--prizm-v3-button-primary-solid-default);
       border-radius: 2px;
-      color: var(--prizm-grey-g13-g1);
+      color: var(--prizm-v3-text-icon-exception);
     }
   }
 }

From 68579b5ed463eee147b2fe03db3f9a6c24d8719e Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Sun, 19 Nov 2023 22:57:23 +0300
Subject: [PATCH 03/49] feat: inputs v3 colors in progress

---
 .../input-icon-button/input-icon-button.component.less |  4 ++--
 .../input-status-subtext.component.less                |  2 +-
 .../common/input-layout/input-layout.component.less    | 10 +++++-----
 .../input/common/styles/input.component.less           |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
index f8d2616c36..75a021485a 100644
--- a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
+++ b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
@@ -10,10 +10,10 @@
   width: 32px;
   font-size: inherit;
 
-  color: var(--prizm-text-contrast);
+  color: var(--prizm-v3-text-icon-secondary);
 
   &.disabled {
-    color: var(--prizm-grey-g9-g5);
+    color: red;
     pointer-events: none;
     cursor: not-allowed;
   }
diff --git a/libs/components/src/lib/components/input/common/input-invalid-subtext/input-status-subtext.component.less b/libs/components/src/lib/components/input/common/input-invalid-subtext/input-status-subtext.component.less
index b6bef9edc9..53e7beb0af 100644
--- a/libs/components/src/lib/components/input/common/input-invalid-subtext/input-status-subtext.component.less
+++ b/libs/components/src/lib/components/input/common/input-invalid-subtext/input-status-subtext.component.less
@@ -1,6 +1,6 @@
 :host {
   display: block;
-  color: var(--prizm-index-danger);
+  color: var(--prizm-v3-status-alarm-primary-default);
   // by default for invalid text
   min-height: 22px;
 }
diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
index 7b3ec6ec27..65de42a2fd 100644
--- a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
+++ b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
@@ -36,7 +36,7 @@
 .prizm-input-label {
   font-weight: 600;
   font-size: 12px;
-  color: var(--prizm-text-subscript);
+  color: var(--prizm-v3-text-icon-tertiary);
   padding-left: 16px;
   line-height: 16px;
   transition: top 200ms ease 0s;
@@ -46,7 +46,7 @@
   gap: 4px;
 
   &-required {
-    color: var(--prizm-index-danger);
+    color: var(--prizm-v3-status-alarm-primary-default);
   }
 
   &-inner {
@@ -90,8 +90,8 @@
 }
 
 .prizm-input-form {
-  background-color: var(--prizm-bg-dashboard-forms);
-  border: 1px solid var(--prizm-border-forms);
+  background-color: var(--prizm-v3-form-fill-default);
+  border: 1px solid var(--prizm-v3-form-stroke-default);
   border-radius: 2px;
   display: flex;
   flex-direction: column;
@@ -113,7 +113,7 @@
   }
 
   &:hover {
-    border-color: var(--prizm-index-plan);
+    border-color: var(--prizm-v3-form-active);
   }
 
   &__first {
diff --git a/libs/components/src/lib/components/input/common/styles/input.component.less b/libs/components/src/lib/components/input/common/styles/input.component.less
index 433ce50ac3..bc10e03ce8 100644
--- a/libs/components/src/lib/components/input/common/styles/input.component.less
+++ b/libs/components/src/lib/components/input/common/styles/input.component.less
@@ -6,7 +6,7 @@
   height: 100%;
   line-height: 16px;
   font-size: 14px;
-  color: var(--prizm-text-contrast);
+  color: var(--prizm-v3-text-icon-secondary);
   display: block;
   text-overflow: ellipsis;
 }

From 1133f817149b1e3dbfd363c275ad750aca8e4950 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 20 Nov 2023 12:14:18 +0300
Subject: [PATCH 04/49] feat: input icon button colors #1064

---
 .../input-icon-button.component.less                | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
index 75a021485a..20d4dc2c69 100644
--- a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
+++ b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
@@ -13,7 +13,7 @@
   color: var(--prizm-v3-text-icon-secondary);
 
   &.disabled {
-    color: red;
+    color: var();
     pointer-events: none;
     cursor: not-allowed;
   }
@@ -22,16 +22,19 @@
 :host-context(.interactive) {
   &:not(.disabled) {
     &:hover {
-      color: var(--prizm-index-plan);
+      color: var(--prizm-v3-button-secondary-solid-hover);
     }
 
     &:focus {
-      color: var(--prizm-index-plan);
-      text-shadow: 0 0 1px var(--prizm-index-plan);
+      color: var(--prizm-v3-button-primary-solid-active);
     }
 
     cursor: pointer;
   }
 
-  color: var(--prizm-border-icon);
+  color: var(--prizm-v3-button-secondary-solid-default);
+}
+
+:host-context(.disabled) {
+  display: none;
 }

From 0f3fe21fe66395925734b9ef84a6d46e99b286c5 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 20 Nov 2023 12:55:15 +0300
Subject: [PATCH 05/49] feat: input layout v3 colors #1064

---
 .../input-layout-textarea.component.less      |  2 +-
 .../input-layout/input-layout.component.less  | 36 +++++++++----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less
index 1c6c4d0e17..980da716ca 100644
--- a/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less
+++ b/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less
@@ -30,7 +30,7 @@
 .prizm-input-label {
   &-textarea {
     &.@{label}-inner {
-      background-color: var(--prizm-bg-dashboard-forms);
+      background-color: var(--prizm-v3-form-fill-default);
       width: 100%;
       &[data-size='l'] {
         top: 0;
diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
index 65de42a2fd..88959f8be9 100644
--- a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
+++ b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
@@ -129,57 +129,57 @@
 
   &-status {
     &-success {
-      border-color: var(--prizm-index-good);
+      border-color: var(--prizm-v3-status-success-primary-default);
       &:hover {
-        border-color: var(--prizm-index-good);
+        border-color: var(--prizm-v3-status-success-primary-hover);
       }
 
       .prizm-input-form-status-button {
-        color: var(--prizm-index-good);
+        color: var(--prizm-v3-status-success-primary-default);
       }
     }
 
     &-warning {
-      border-color: var(--prizm-index-warning);
+      border-color: var(--prizm-v3-status-warning-primary-default);
       &:hover {
-        border-color: var(--prizm-index-warning);
+        border-color: var(--prizm-v3-status-warning-primary-hover);
       }
 
       .prizm-input-form-status-button {
-        color: var(--prizm-index-warning);
+        color: var(--prizm-v3-status-warning-primary-default);
       }
     }
 
     &-danger {
-      border-color: var(--prizm-index-danger);
+      border-color: var(--prizm-v3-status-alarm-primary-default);
       &:hover {
-        border-color: var(--prizm-index-danger);
+        border-color: var(--prizm-v3-status-alarm-primary-hover);
       }
 
       .prizm-input-form-status-button {
-        color: var(--prizm-index-danger);
+        color: var(--prizm-v3-status-alarm-primary-default);
       }
     }
   }
 
   &-invalid {
     &.prizm-input-form-touched {
-      border-color: var(--prizm-index-danger);
+      border-color: var(--prizm-v3-status-alarm-primary-default);
     }
 
     .prizm-input-form-status-button {
-      color: var(--prizm-index-danger);
+      color: var(--prizm-v3-status-alarm-primary-default);
     }
   }
 
   // rewrite all if focused
   &-focused:host-context(.enabled),
   &:focus-within:host-context(.enabled) {
-    border-color: var(--prizm-index-plan);
-    box-shadow: 0 0 0 2px var(--prizm-lite-b130-20);
+    border-color: var(--prizm-v3-background-stroke-focus);
+    box-shadow: 0 0 0 2px var(--prizm-v3-background-stroke-focus);
 
     &:hover {
-      border-color: var(--prizm-index-plan);
+      border-color: var(--prizm-v3-background-stroke-focus);
     }
 
     .prizm-input-button-default {
@@ -230,7 +230,7 @@
       .prizm-input-button-default {
         position: absolute;
         z-index: 100;
-        background-color: var(--prizm-bg-dashboard-forms);
+        background-color: var(--prizm-v3-form-fill-default);
       }
 
       .prizm-input-button-default {
@@ -257,15 +257,15 @@
   line-height: 22px;
 
   &-success {
-    color: var(--prizm-index-good);
+    color: var(--prizm-v3-status-success-primary-default);
   }
 
   &-warning {
-    color: var(--prizm-index-warning);
+    color: var(--prizm-v3-status-warning-primary-default);
   }
 
   &-danger {
-    color: var(--prizm-index-danger);
+    color: var(--prizm-v3-status-alarm-primary-default);
   }
 }
 

From 92e5ea6d8862de25e7663294ac336173a14b30ba Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 20 Nov 2023 13:37:42 +0300
Subject: [PATCH 06/49] refactor: replace deprecated import to inputDateMulti

---
 .../input-date-multi/input-date-multi.component.ts   |  1 -
 .../input-date-multi/input-date-multi.module.ts      | 12 ++++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.ts b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.ts
index 0b0fc4054e..109d5c27a0 100644
--- a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.ts
+++ b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.ts
@@ -13,7 +13,6 @@ import {
   ViewChild,
 } from '@angular/core';
 import { prizmDefaultProp } from '@prizm-ui/core';
-import { PrizmInputSize } from '../common/models/prizm-input.models';
 import {
   getProviderPrizmDateLeftButtons,
   PRIZM_DATE_RIGHT_BUTTONS,
diff --git a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.module.ts b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.module.ts
index 84045b4c97..57a02bfe24 100644
--- a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.module.ts
+++ b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.module.ts
@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { PrizmInputDateMultiComponent } from './input-date-multi.component';
-import { PrizmDropdownHostModule } from '../../dropdowns/dropdown-host/dropdown-host.module';
 import { ReactiveFormsModule } from '@angular/forms';
 import { PrizmInputTextModule } from '../input-text/input-text.module';
-import { PolymorphModule, PrizmLifecycleModule } from '../../../directives';
-import { PrizmDataListModule } from '../../data-list';
+import { PolymorphOutletDirective, PrizmLifecycleModule } from '../../../directives';
+import { PrizmDataListComponent } from '../../data-list';
+import { PrizmDropdownHostComponent } from '../../dropdowns/dropdown-host';
 
 @NgModule({
   imports: [
@@ -13,9 +13,9 @@ import { PrizmDataListModule } from '../../data-list';
     PrizmInputTextModule,
     PrizmLifecycleModule,
     ReactiveFormsModule,
-    PrizmDataListModule,
-    PolymorphModule,
-    PrizmDropdownHostModule,
+    PrizmDataListComponent,
+    PolymorphOutletDirective,
+    PrizmDropdownHostComponent,
   ],
   declarations: [PrizmInputDateMultiComponent],
   exports: [PrizmInputDateMultiComponent],

From 0f1f0f4dfe52c75654d3787da319cd83f711a732 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 20 Nov 2023 14:05:53 +0300
Subject: [PATCH 07/49] feat: textarea v3 colors update #1064

---
 .../input-date-range/input-date-range.component.ts     |  1 -
 .../input-layout-month-range.module.ts                 | 10 ++++------
 .../input-month-range/input-month-range.module.ts      |  8 ++++----
 .../input/input-number/input-number.component.ts       |  2 +-
 .../input/input-text/input-text.component.ts           |  1 -
 .../input/input-text/input-textarea.component.less     |  2 +-
 6 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/libs/components/src/lib/components/input/input-date-range/input-date-range.component.ts b/libs/components/src/lib/components/input/input-date-range/input-date-range.component.ts
index 12167247e9..0151cb6fd4 100644
--- a/libs/components/src/lib/components/input/input-date-range/input-date-range.component.ts
+++ b/libs/components/src/lib/components/input/input-date-range/input-date-range.component.ts
@@ -3,7 +3,6 @@ import {
   Component,
   ContentChild,
   ElementRef,
-  HostBinding,
   HostListener,
   Inject,
   Injector,
diff --git a/libs/components/src/lib/components/input/input-month-range/input-layout-month-range.module.ts b/libs/components/src/lib/components/input/input-month-range/input-layout-month-range.module.ts
index bde116c20e..584ae49117 100644
--- a/libs/components/src/lib/components/input/input-month-range/input-layout-month-range.module.ts
+++ b/libs/components/src/lib/components/input/input-month-range/input-layout-month-range.module.ts
@@ -1,11 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { PrizmCalendarMonthModule } from '../../calendar-month';
+import { PrizmCalendarMonthComponent } from '../../calendar-month';
 import { PrizmMapperPipeModule } from '../../table/pipes/mapper/mapper.module';
-import { PrizmInputMonthRangeComponent } from './input-month-range.component';
-import { PrizmInputMonthRangeDirective } from './input-month-range.directive';
 import { FormsModule } from '@angular/forms';
-import { PrizmDropdownHostModule } from '../../dropdowns/dropdown-host';
+import { PrizmDropdownHostComponent } from '../../dropdowns/dropdown-host';
 import { PrizmPreventDefaultModule } from '../../../directives/prevent-default';
 import { PrizmInputTextModule } from '../input-text/input-text.module';
 import { PrizmInputLayoutMonthRangeComponent } from './input-layout-month-range.component';
@@ -16,8 +14,8 @@ import { PrizmLifecycleModule } from '../../../directives';
   imports: [
     CommonModule,
     PrizmLifecycleModule,
-    PrizmCalendarMonthModule,
-    PrizmDropdownHostModule,
+    PrizmCalendarMonthComponent,
+    PrizmDropdownHostComponent,
     PrizmPreventDefaultModule,
     PrizmMapperPipeModule,
     PrizmInputTextModule,
diff --git a/libs/components/src/lib/components/input/input-month-range/input-month-range.module.ts b/libs/components/src/lib/components/input/input-month-range/input-month-range.module.ts
index 52a0cbc1cb..30ba739e8a 100644
--- a/libs/components/src/lib/components/input/input-month-range/input-month-range.module.ts
+++ b/libs/components/src/lib/components/input/input-month-range/input-month-range.module.ts
@@ -1,19 +1,19 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { PrizmCalendarMonthModule } from '../../calendar-month';
+import { PrizmCalendarMonthComponent } from '../../calendar-month';
 import { PrizmMapperPipeModule } from '../../table/pipes/mapper/mapper.module';
 import { PrizmInputMonthRangeComponent } from './input-month-range.component';
 import { PrizmInputMonthRangeDirective } from './input-month-range.directive';
 import { FormsModule } from '@angular/forms';
-import { PrizmDropdownHostModule } from '../../dropdowns/dropdown-host';
+import { PrizmDropdownHostComponent } from '../../dropdowns/dropdown-host';
 import { PrizmPreventDefaultModule } from '../../../directives/prevent-default';
 import { PrizmInputTextModule } from '../input-text/input-text.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    PrizmCalendarMonthModule,
-    PrizmDropdownHostModule,
+    PrizmCalendarMonthComponent,
+    PrizmDropdownHostComponent,
     PrizmPreventDefaultModule,
     PrizmMapperPipeModule,
     PrizmInputTextModule,
diff --git a/libs/components/src/lib/components/input/input-number/input-number.component.ts b/libs/components/src/lib/components/input/input-number/input-number.component.ts
index 2ef858199a..a925ddb4a5 100644
--- a/libs/components/src/lib/components/input/input-number/input-number.component.ts
+++ b/libs/components/src/lib/components/input/input-number/input-number.component.ts
@@ -15,7 +15,7 @@ import { AbstractControl, NgControl, Validators } from '@angular/forms';
 import { prizmIsNativeFocused } from '../../../util';
 import { PrizmDestroyService, prizmFormatNumber } from '@prizm-ui/helpers';
 import { fromEvent, merge, Subject } from 'rxjs';
-import { debounceTime, map, takeUntil, tap, throttleTime } from 'rxjs/operators';
+import { map, takeUntil, tap, throttleTime } from 'rxjs/operators';
 import { PrizmDecimal } from '@prizm-ui/core';
 import { PrizmHintDirective } from '../../../directives';
 
diff --git a/libs/components/src/lib/components/input/input-text/input-text.component.ts b/libs/components/src/lib/components/input/input-text/input-text.component.ts
index 12a35da500..21ecf969a6 100644
--- a/libs/components/src/lib/components/input/input-text/input-text.component.ts
+++ b/libs/components/src/lib/components/input/input-text/input-text.component.ts
@@ -18,7 +18,6 @@ import { NgControl, NgModel, UntypedFormControl, Validators } from '@angular/for
 import { PrizmDestroyService } from '@prizm-ui/helpers';
 import { takeUntil, tap } from 'rxjs/operators';
 import { PrizmInputControl } from '../common/base/input-control.class';
-import { PrizmHintDirective } from '../../../directives';
 import { PrizmInputHintDirective } from '../common';
 
 @Component({
diff --git a/libs/components/src/lib/components/input/input-text/input-textarea.component.less b/libs/components/src/lib/components/input/input-text/input-textarea.component.less
index 3ee1eeab08..83470c10dc 100644
--- a/libs/components/src/lib/components/input/input-text/input-textarea.component.less
+++ b/libs/components/src/lib/components/input/input-text/input-textarea.component.less
@@ -20,7 +20,7 @@
   &:hover {
     &::-webkit-scrollbar-thumb {
       border-radius: var(--prizm-scrollbar-thumb-border-radius, 8px);
-      background-color: var(--prizm-scrollbar-thumb-color, var(--grey-g10-g4, #bfc6d7));
+      background-color: var(--prizm-scrollbar-thumb-color, var(--prizm-v3-form-stroke-default));
       opacity: var(--prizm-scrollbar-thumb-opacity, 0.4);
       width: 6px;
       height: 20%;

From d91d5de8b5a9747c43b09d4610ae53a4d28cfae8 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 7 Nov 2023 23:37:41 +0300
Subject: [PATCH 08/49] feat: calendars v3 colors #987

---
 .../calendar-month.component.html             |  2 +-
 .../calendar-month.component.less             |  8 ++-
 .../calendar-month.component.ts               |  2 -
 .../calendar-month/calendar-month.module.ts   |  7 +--
 .../calendar-range.component.html             |  2 +-
 .../calendar-range.component.less             |  2 +-
 .../primitive-calendar-range.component.html   |  1 -
 .../primitive-calendar-range.component.less   |  4 --
 .../primitive-calendar.component.html         |  5 +-
 .../primitive-calendar.component.less         | 33 ++++++-----
 .../primitive-month-picker.component.less     |  3 -
 .../primitive-spin-button.component.less      |  4 +-
 .../primitive-spin-button.component.ts        |  1 -
 .../primitive-spin-button.template.html       |  4 +-
 ...itive-year-month-pagination.component.html | 20 +++----
 ...itive-year-month-pagination.component.less | 44 +++++----------
 .../primitive-year-month-pagination.module.ts |  6 --
 .../primitive-year-picker.component.less      |  6 --
 libs/components/src/styles/mixins/mixins.less | 27 +++++++++
 libs/components/src/styles/mixins/picker.less | 56 +++++++++++--------
 20 files changed, 118 insertions(+), 119 deletions(-)

diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.component.html b/libs/components/src/lib/components/calendar-month/calendar-month.component.html
index 4d18288612..d3ca2afc9e 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.component.html
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.component.html
@@ -17,9 +17,9 @@
     prizmStopPropagation="mousedown"
   >
     <button
+      class="year-btn"
       [prizmFocusable]="false"
       (click)="onYearClick()"
-      prizmLink
       automation-id="prizm-calendar-month__active-year"
     >
       {{ year.formattedYear }}
diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.component.less b/libs/components/src/lib/components/calendar-month/calendar-month.component.less
index c189f39a7c..1b91ea6b33 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.component.less
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.component.less
@@ -8,6 +8,10 @@
   width: 15.75rem;
   padding: 1.125rem;
   box-sizing: content-box;
+
+  .year-btn {
+    .pagination-btn();
+  }
 }
 
 .z-row {
@@ -23,10 +27,10 @@
   }
 
   &:not([data-range='start']):not([data-range='single']):not([data-range='end']):hover {
-    background-color: var(--prizm-g2-g11);
+    background-color: var(--prizm-v3-button-ghost-hover);
 
     .z-item {
-      color: var(--prizm-index-plan) !important;
+      color: var(--prizm-v3-button-primary-solid-hover) !important;
     }
   }
 }
diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.component.ts b/libs/components/src/lib/components/calendar-month/calendar-month.component.ts
index 6671b5d935..a8f7af4e44 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.component.ts
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.component.ts
@@ -33,7 +33,6 @@ import {
 } from '../../directives';
 import { PrizmPrimitiveSpinButtonModule, PrizmPrimitiveYearPickerModule } from '../internal';
 import { PrizmScrollbarModule } from '../scrollbar';
-import { PrizmLinkModule } from '../link';
 import { PrizmLetModule } from '@prizm-ui/helpers';
 
 const TODAY = PrizmDay.currentLocal();
@@ -49,7 +48,6 @@ const TODAY = PrizmDay.currentLocal();
     PrizmPrimitiveYearPickerModule,
     PrizmPrimitiveSpinButtonModule,
     PrizmScrollbarModule,
-    PrizmLinkModule,
     PrizmLetModule,
     PrizmHoveredModule,
     PrizmPressedModule,
diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
index d54e9be971..1f045c10c9 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
@@ -3,13 +3,8 @@ import { NgModule } from '@angular/core';
 import { PrizmLetModule } from '@prizm-ui/helpers';
 import { PrizmFocusableModule } from '../../directives/focusable/focusable.module';
 import { PrizmHoveredModule } from '../../directives/hovered/hovered.module';
-import { PrizmPressedModule } from '../../directives/pressed/pressed.module';
-import { PrizmPrimitiveSpinButtonModule } from '../internal/primitive-spin-button/primitive-spin-button.module';
-import { PrizmPrimitiveYearPickerModule } from '../internal/primitive-year-picker/primitive-year-picker.module';
-import { PrizmLinkModule } from '../link/link.module';
-import { PrizmScrollbarModule } from '../scrollbar/scrollbar.module';
 import { PrizmCalendarMonthComponent } from './calendar-month.component';
-import { PrizmStopPropagationModule } from '../../directives/stop-propagation/stop-propagation.module';
+
 
 /**
  * @deprecated
diff --git a/libs/components/src/lib/components/calendar-range/calendar-range.component.html b/libs/components/src/lib/components/calendar-range/calendar-range.component.html
index 4707764b4d..653d5941b9 100644
--- a/libs/components/src/lib/components/calendar-range/calendar-range.component.html
+++ b/libs/components/src/lib/components/calendar-range/calendar-range.component.html
@@ -42,7 +42,7 @@
     <prizm-data-list
       class="z-menu"
       [style.--prizm-data-list-border]="0"
-      [style.--prizm-data-list-border-left]="'1px solid var(--prizm-border-widget)'"
+      [style.--prizm-data-list-border-left]="'1px solid var(--prizm-v3-background-stroke)'"
       role="menu"
       automation-id="prizm-calendar-range__menu"
     >
diff --git a/libs/components/src/lib/components/calendar-range/calendar-range.component.less b/libs/components/src/lib/components/calendar-range/calendar-range.component.less
index b378d0d629..94ed736ee6 100644
--- a/libs/components/src/lib/components/calendar-range/calendar-range.component.less
+++ b/libs/components/src/lib/components/calendar-range/calendar-range.component.less
@@ -10,7 +10,7 @@
 
 .z-menu {
   width: 11rem;
-  border-left: 1px solid var(--prizm-base-03);
+  border-left: 1px solid var(--prizm-v3-background-stroke);
 }
 
 .z-checkmark {
diff --git a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html
index 802c52f3ff..d8dac6196b 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html
+++ b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html
@@ -16,7 +16,6 @@
 </prizm-calendar>
 
 <prizm-calendar
-  class="z-border"
   [(hoveredItem)]="hoveredItem"
   [min]="min"
   [max]="max"
diff --git a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less
index 0b276ae295..79ff2d5269 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less
+++ b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less
@@ -1,7 +1,3 @@
 :host {
   display: flex;
 }
-
-.z-border {
-  border-left: 1px solid var(--prizm-base-03);
-}
diff --git a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html
index 6281262a20..db55d45e85 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html
+++ b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html
@@ -4,7 +4,8 @@
 <div class="z-row z-row_weekday prizm-font-main-body-12">
   <div
     class="z-cell"
-    *ngFor="let day of weekDays$ | async"
+    *ngFor="let day of weekDays$ | async; let i = index"
+    [class.z-cell_weekend]="i > 4"
     [innerText]="day | prizmCallFunc : capitalizeFirstLetter"
   ></div>
 </div>
@@ -19,7 +20,6 @@
         <div
           class="z-cell"
           *ngIf="!itemIsUnavailable(item) || showAdjacent"
-          [class.z-cell_weekend]="item.isWeekend"
           [class.z-cell_today]="itemIsToday(item)"
           [class.z-cell_interval]="itemIsInterval(item)"
           [attr.data-range]="getItemRange(item)"
@@ -32,6 +32,7 @@
           <div
             class="z-item prizm-font-btn-links-14"
             [class.z-item_unavailable]="itemIsUnavailable(item)"
+            [class.z-item_weekend]="item.isWeekend"
             automation-id="prizm-primitive-calendar__item"
           >
             {{ item.day }}
diff --git a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
index c049edfa7b..3b0d40a153 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
+++ b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
@@ -9,10 +9,10 @@
 }
 
 .z-item {
-  color: var(--prizm-text-main);
+  color: var(--prizm-v3-text-icon-secondary);
 
   &.z-item_unavailable {
-    color: var(--prizm-grey-g10-g4);
+    color: var(--prizm-v3-text-icon-disable);
   }
 }
 
@@ -25,23 +25,22 @@
 
   &_weekday {
     font: var(--prizm-font-text-s);
-    color: var(--prizm-text-subscript);
+    color: var(--prizm-v3-text-icon-tertiary);
     pointer-events: none;
     text-transform: capitalize;
+    .z-cell_weekend {
+      color: var(--prizm-v3-status-alarm-primary-default);
+    }
   }
 }
 
 .z-item {
   display: flex;
   flex-direction: column;
-}
-
-.z-cell_weekend {
-  color: var(--prizm-negative);
-}
 
-.z-item_unavailable {
-  opacity: var(--prizm-disabled-opacity);
+  &_weekend {
+    color: var(--prizm-calendar-day-weekend-color);
+  }
 }
 
 .z-dots {
@@ -69,18 +68,24 @@
   background-color: var(--prizm-status-day-color);
 
   &[data-prizm-status='index'] {
-    background-color: var(--prizm-calendar-day-status-default, var(--prizm-index-plan));
+    background-color: var(--prizm-calendar-day-status-default, var(--prizm-v3-status-info-primary-default));
   }
 
   &[data-prizm-status='warning'] {
-    background-color: var(--prizm-calendar-day-status-warning, var(--prizm-index-warning));
+    background-color: var(
+      --prizm-calendar-day-status-warning,
+      var(--prizm-v3-status-warning-primary-default)
+    );
   }
 
   &[data-prizm-status='danger'] {
-    background-color: var(--prizm-calendar-day-status-danger, var(--prizm-index-danger));
+    background-color: var(--prizm-calendar-day-status-danger, var(--prizm-v3-status-alarm-primary-default));
   }
 
   &[data-prizm-status='success'] {
-    background-color: var(--prizm-calendar-day-status-success, var(--prizm-index-good));
+    background-color: var(
+      --prizm-calendar-day-status-success,
+      var(--prizm-v3-status-success-primary-default)
+    );
   }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less b/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less
index 7feb9024fa..161c50d2aa 100644
--- a/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less
+++ b/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less
@@ -24,7 +24,4 @@
 .z-cell {
   flex-grow: 1;
   width: 100%;
-  &[data-state='pressed'] .z-item {
-    background-color: var(--prizm-index-plan);
-  }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
index 0b16423f0b..a3cdd3a714 100644
--- a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
+++ b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
@@ -22,10 +22,10 @@
   }
 }
 
-.z-content {
+.z-content:not(:empty) {
   padding: 0 2 * @space;
 
   :host._focus-visible & {
-    box-shadow: 0 0 0 1px var(--prizm-focus);
+    box-shadow: 0 0 0 1px var(--prizm-v3-background-stroke-focus);
   }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts
index fb84f5c66f..38f56833ea 100644
--- a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts
+++ b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts
@@ -3,7 +3,6 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  HostBinding,
   Inject,
   Input,
   Output,
diff --git a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html
index bba54674a7..eb4e7e54e8 100644
--- a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html
+++ b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html
@@ -13,7 +13,7 @@
     class="z-arrow"
     prizmIconButton
     type="button"
-    size="xs"
+    size="l"
     [appearanceType]="mode"
     automation-id="prizm-primitive-spin-button__left"
     icon="arrows-chevron-left"
@@ -30,7 +30,7 @@
     class="z-arrow"
     prizmIconButton
     type="button"
-    size="xs"
+    size="l"
     appearance="secondary"
     automation-id="prizm-primitive-spin-button__right"
     icon="arrows-chevron-right"
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
index baec304d6b..34e3a99734 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
@@ -24,33 +24,33 @@
 <ng-template #button>
   <div class="year-box" (click)="onYearClick($event)">
     <button
+      class="pagination-btn"
       [attr.data-testid]="'prizm-primitive-year-month-pagination__year-button'"
-      [prizmFocusable]="false"
+      [prizmFocusable]="true"
       [class.active]="yearActive"
       type="button"
-      prizmLink
     >
       {{ value.formattedYear }}
+      <span>
+        <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
+      </span>
     </button>
-    <span>
-      <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
-    </span>
   </div>
 </ng-template>
 
 <ng-template #buttonMonth>
   <div class="month-box" (click)="onMonthClick($event)">
     <button
+      class="pagination-btn"
       [attr.testId]="'prizm-primitive-year-month-pagination__year-button'"
       [class.active]="monthActive"
-      [prizmFocusable]="false"
+      [prizmFocusable]="true"
       type="button"
-      prizmLink
     >
       {{ value | prizmMonth | async }}
+      <span>
+        <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
+      </span>
     </button>
-    <span>
-      <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
-    </span>
   </div>
 </ng-template>
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
index e77789ca54..537a55bffe 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
@@ -1,40 +1,22 @@
+@import '../../../../styles/ui-local.less';
+
 :host {
   display: block;
-}
 
-.box {
-  display: flex;
-  justify-content: space-between;
-}
-
-.year-month {
-  color: var(--prizm-text-contrast);
-  display: flex;
-  gap: 8px;
-}
-
-.year-box,
-.month-box {
-  display: flex;
-  justify-content: space-between;
-  color: var(--prizm-text-contrast);
-  gap: 4px;
-  cursor: pointer;
-
-  prizm-icon {
-    color: var(--prizm-border-icon);
+  .box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 
-  &:hover,
-  &:hover prizm-icon {
-    color: var(--prizm-index-plan);
+  .year-month {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--prizm-v3-text-icon-secondary);
   }
-}
-
-[prizmLink] {
-  --prizm-link: var(--prizm-text-contrast);
 
-  &.active {
-    --prizm-link: var(--prizm-index-plan);
+  .pagination-btn {
+    .pagination-btn();
   }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
index e6c9eaf694..ef339d7aba 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
@@ -1,11 +1,5 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { PrizmMonthPipeModule } from '../../../pipes/month';
 import { PrizmPrimitiveYearMonthPaginationComponent } from './primitive-year-month-pagination.component';
-import { PrizmPrimitiveSpinButtonModule } from '../primitive-spin-button';
-import { PrizmLinkModule } from '../../link/link.module';
-import { PrizmFocusableModule } from '../../../directives/focusable/focusable.module';
-import { PrizmIconModule } from '../../icon/icon.module';
 
 /**
  * @deprecated
diff --git a/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less b/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less
index 88495fdbc4..ffcd8262c3 100644
--- a/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less
+++ b/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less
@@ -19,9 +19,3 @@
     margin-bottom: 0;
   }
 }
-
-.z-cell {
-  &[data-state='pressed'] .z-item {
-    background-color: var(--prizm-index-plan);
-  }
-}
diff --git a/libs/components/src/styles/mixins/mixins.less b/libs/components/src/styles/mixins/mixins.less
index 9991911a5a..94ec307954 100644
--- a/libs/components/src/styles/mixins/mixins.less
+++ b/libs/components/src/styles/mixins/mixins.less
@@ -121,3 +121,30 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.pagination-btn() {
+  border: none;
+  background: none;
+  outline: none;
+  display: flex;
+  gap: 4px;
+  padding: 8px;
+  text-align: left;
+  cursor: pointer;
+
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 400;
+
+  color: var(--prizm-v3-text-icon-secondary);
+
+  &:hover:not(.active):not(:active) {
+    background-color: var(--prizm-v3-button-ghost-hover);
+    border-radius: 2px;
+  }
+
+  &:active,
+  &.active {
+    color: var(--prizm-v3-button-primary-solid-active);
+  }
+}
diff --git a/libs/components/src/styles/mixins/picker.less b/libs/components/src/styles/mixins/picker.less
index b9754122b7..62b49b9304 100644
--- a/libs/components/src/styles/mixins/picker.less
+++ b/libs/components/src/styles/mixins/picker.less
@@ -16,7 +16,7 @@
     flex: 1;
     line-height: 2rem;
     border-radius: 2px;
-    color: var(--prizm-text-contrast);
+    color: var(--prizm-v3-text-icon-secondary);
 
     &:before,
     &:after {
@@ -47,9 +47,21 @@
     &_today {
       border-radius: 2px;
 
+      &[data-state='hovered'] {
+        & > .z-item {
+          border-color: var(--prizm-v3-button-primary-solid-hover);
+          color: var(--prizm-v3-button-primary-solid-hover);
+          background-color: var(--prizm-v3-button-ghost-hover);
+        }
+      }
+
       .z-item {
-        border: 1px solid var(--prizm-index-plan);
-        color: var(--prizm-exeptions-g1-b1);
+        border: 1px solid var(--prizm-v3-button-primary-solid-default);
+        color: var(--prizm-v3-button-primary-solid-default);
+
+        &_unavailable {
+          color: var(--prizm-v3-text-icon-disable);
+        }
       }
     }
 
@@ -66,10 +78,10 @@
 
     &_interval {
       &:before {
-        background: var(--prizm-lite-b130-20);
+        background: var(--prizm-v3-button-primary-ghost-active);
 
         :host._single & {
-          background-color: var(--prizm-lite-b130-20);
+          background-color: var(--prizm-v3-button-primary-ghost-active);
         }
       }
 
@@ -93,39 +105,34 @@
 
       & > .z-item {
         border-radius: 0;
-        color: var(--prizm-index-plan);
+        color: var(--prizm-v3-button-primary-solid-default);
       }
     }
 
     &[data-range] {
-      &:after {
-        background-color: var(--prizm-primary-text);
-      }
-
       &:not([data-state='hovered']) > .z-item {
-        color: var(--prizm-grey-g13-g1);
+        color: var(--prizm-v3-text-icon-exception);
 
         &:before,
         &:after {
-          background-color: var(--prizm-index-plan);
+          background-color: var(--prizm-v3-button-primary-solid-default);
         }
       }
 
       &[data-state='hovered'] > .z-item {
-        background-color: var(--prizm-g2-g11);
-        color: var(--prizm-index-plan);
+        background-color: var(--prizm-v3-button-ghost-hover);
+        color: var(--prizm-v3-button-primary-solid-hover);
       }
 
       &[data-state='hovered'] > .z-item:before,
       &[data-state='hovered'] > .z-item:after {
-        background-color: var(--prizm-grey-g12-g2);
-        color: var(--prizm-index-plan);
+        background-color: var(--prizm-v3-button-ghost-hover);
+        color: var(--prizm-v3-button-primary-solid-hover);
       }
 
       &[data-state='pressed'] > .z-item:before,
       &[data-state='pressed'] > .z-item:after {
-        //background-color: var(--prizm-primary-active);
-        background-color: var(--prizm-index-plan);
+        background-color: var(--prizm-v3-button-primary-solid-default);
       }
     }
 
@@ -160,19 +167,20 @@
       cursor: not-allowed;
 
       & > .z-item {
-        opacity: 0.36;
+        text-decoration: line-through;
+        opacity: 0.3;
       }
     }
 
-    &[data-state='hovered']:not([data-range]) > .z-item {
-      background-color: var(--prizm-g2-g11);
-      color: var(--prizm-exeptions-g1-b1);
+    &[data-state='hovered']:not([data-range]):not(.z-cell_today) > .z-item {
+      background-color: var(--prizm-v3-button-ghost-hover);
+      color: var(--prizm-v3-button-primary-solid-hover);
     }
 
     &[data-state='pressed']:hover:not([data-range]) > .z-item {
-      background-color: var(--prizm-index-plan);
+      background-color: var(--prizm-v3-button-primary-solid-default);
       border-radius: 2px;
-      color: var(--prizm-grey-g13-g1);
+      color: var(--prizm-v3-text-icon-exception);
     }
   }
 }

From 885e724d2a1efbd732d563a4591f63610fac2ce2 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 7 Nov 2023 23:37:41 +0300
Subject: [PATCH 09/49] feat: calendars v3 colors #987

---
 .../lib/components/calendar-month/calendar-month.module.ts    | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
index 1f045c10c9..4edd1426c9 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
@@ -1,8 +1,4 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { PrizmLetModule } from '@prizm-ui/helpers';
-import { PrizmFocusableModule } from '../../directives/focusable/focusable.module';
-import { PrizmHoveredModule } from '../../directives/hovered/hovered.module';
 import { PrizmCalendarMonthComponent } from './calendar-month.component';
 
 

From 42ae9826451a94f37dbaecac104a559537d3aa49 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Sun, 19 Nov 2023 22:57:23 +0300
Subject: [PATCH 10/49] feat: inputs v3 colors in progress

---
 .../input-icon-button/input-icon-button.component.less |  4 ++--
 .../input-status-subtext.component.less                |  2 +-
 .../common/input-layout/input-layout.component.less    | 10 +++++-----
 .../input/common/styles/input.component.less           |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
index 028c115d35..252bf07686 100644
--- a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
+++ b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
@@ -10,10 +10,10 @@
   width: var(--prizm-input-icon-button-width, 32px);
   font-size: inherit;
 
-  color: var(--prizm-text-contrast);
+  color: var(--prizm-v3-text-icon-secondary);
 
   &.disabled {
-    color: var(--prizm-grey-g9-g5);
+    color: red;
     pointer-events: none;
     cursor: not-allowed;
   }
diff --git a/libs/components/src/lib/components/input/common/input-invalid-subtext/input-status-subtext.component.less b/libs/components/src/lib/components/input/common/input-invalid-subtext/input-status-subtext.component.less
index b6bef9edc9..53e7beb0af 100644
--- a/libs/components/src/lib/components/input/common/input-invalid-subtext/input-status-subtext.component.less
+++ b/libs/components/src/lib/components/input/common/input-invalid-subtext/input-status-subtext.component.less
@@ -1,6 +1,6 @@
 :host {
   display: block;
-  color: var(--prizm-index-danger);
+  color: var(--prizm-v3-status-alarm-primary-default);
   // by default for invalid text
   min-height: 22px;
 }
diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
index 7b3ec6ec27..65de42a2fd 100644
--- a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
+++ b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
@@ -36,7 +36,7 @@
 .prizm-input-label {
   font-weight: 600;
   font-size: 12px;
-  color: var(--prizm-text-subscript);
+  color: var(--prizm-v3-text-icon-tertiary);
   padding-left: 16px;
   line-height: 16px;
   transition: top 200ms ease 0s;
@@ -46,7 +46,7 @@
   gap: 4px;
 
   &-required {
-    color: var(--prizm-index-danger);
+    color: var(--prizm-v3-status-alarm-primary-default);
   }
 
   &-inner {
@@ -90,8 +90,8 @@
 }
 
 .prizm-input-form {
-  background-color: var(--prizm-bg-dashboard-forms);
-  border: 1px solid var(--prizm-border-forms);
+  background-color: var(--prizm-v3-form-fill-default);
+  border: 1px solid var(--prizm-v3-form-stroke-default);
   border-radius: 2px;
   display: flex;
   flex-direction: column;
@@ -113,7 +113,7 @@
   }
 
   &:hover {
-    border-color: var(--prizm-index-plan);
+    border-color: var(--prizm-v3-form-active);
   }
 
   &__first {
diff --git a/libs/components/src/lib/components/input/common/styles/input.component.less b/libs/components/src/lib/components/input/common/styles/input.component.less
index 433ce50ac3..bc10e03ce8 100644
--- a/libs/components/src/lib/components/input/common/styles/input.component.less
+++ b/libs/components/src/lib/components/input/common/styles/input.component.less
@@ -6,7 +6,7 @@
   height: 100%;
   line-height: 16px;
   font-size: 14px;
-  color: var(--prizm-text-contrast);
+  color: var(--prizm-v3-text-icon-secondary);
   display: block;
   text-overflow: ellipsis;
 }

From 2e76830d2edfcfa32d938f839f03feeded95db65 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 20 Nov 2023 12:14:18 +0300
Subject: [PATCH 11/49] feat: input icon button colors #1064

---
 .../input-icon-button.component.less                | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
index 252bf07686..322e33a5a6 100644
--- a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
+++ b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
@@ -13,7 +13,7 @@
   color: var(--prizm-v3-text-icon-secondary);
 
   &.disabled {
-    color: red;
+    color: var();
     pointer-events: none;
     cursor: not-allowed;
   }
@@ -22,16 +22,19 @@
 :host-context(.interactive) {
   &:not(.disabled) {
     &:hover {
-      color: var(--prizm-index-plan);
+      color: var(--prizm-v3-button-secondary-solid-hover);
     }
 
     &:focus {
-      color: var(--prizm-index-plan);
-      text-shadow: 0 0 1px var(--prizm-index-plan);
+      color: var(--prizm-v3-button-primary-solid-active);
     }
 
     cursor: pointer;
   }
 
-  color: var(--prizm-border-icon);
+  color: var(--prizm-v3-button-secondary-solid-default);
+}
+
+:host-context(.disabled) {
+  display: none;
 }

From 6ebd66e24e57606924792b400f03e74708e7b4b4 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 20 Nov 2023 12:55:15 +0300
Subject: [PATCH 12/49] feat: input layout v3 colors #1064

---
 .../input-layout-textarea.component.less      |  2 +-
 .../input-layout/input-layout.component.less  | 36 +++++++++----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less
index 1c6c4d0e17..980da716ca 100644
--- a/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less
+++ b/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less
@@ -30,7 +30,7 @@
 .prizm-input-label {
   &-textarea {
     &.@{label}-inner {
-      background-color: var(--prizm-bg-dashboard-forms);
+      background-color: var(--prizm-v3-form-fill-default);
       width: 100%;
       &[data-size='l'] {
         top: 0;
diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
index 65de42a2fd..88959f8be9 100644
--- a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
+++ b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
@@ -129,57 +129,57 @@
 
   &-status {
     &-success {
-      border-color: var(--prizm-index-good);
+      border-color: var(--prizm-v3-status-success-primary-default);
       &:hover {
-        border-color: var(--prizm-index-good);
+        border-color: var(--prizm-v3-status-success-primary-hover);
       }
 
       .prizm-input-form-status-button {
-        color: var(--prizm-index-good);
+        color: var(--prizm-v3-status-success-primary-default);
       }
     }
 
     &-warning {
-      border-color: var(--prizm-index-warning);
+      border-color: var(--prizm-v3-status-warning-primary-default);
       &:hover {
-        border-color: var(--prizm-index-warning);
+        border-color: var(--prizm-v3-status-warning-primary-hover);
       }
 
       .prizm-input-form-status-button {
-        color: var(--prizm-index-warning);
+        color: var(--prizm-v3-status-warning-primary-default);
       }
     }
 
     &-danger {
-      border-color: var(--prizm-index-danger);
+      border-color: var(--prizm-v3-status-alarm-primary-default);
       &:hover {
-        border-color: var(--prizm-index-danger);
+        border-color: var(--prizm-v3-status-alarm-primary-hover);
       }
 
       .prizm-input-form-status-button {
-        color: var(--prizm-index-danger);
+        color: var(--prizm-v3-status-alarm-primary-default);
       }
     }
   }
 
   &-invalid {
     &.prizm-input-form-touched {
-      border-color: var(--prizm-index-danger);
+      border-color: var(--prizm-v3-status-alarm-primary-default);
     }
 
     .prizm-input-form-status-button {
-      color: var(--prizm-index-danger);
+      color: var(--prizm-v3-status-alarm-primary-default);
     }
   }
 
   // rewrite all if focused
   &-focused:host-context(.enabled),
   &:focus-within:host-context(.enabled) {
-    border-color: var(--prizm-index-plan);
-    box-shadow: 0 0 0 2px var(--prizm-lite-b130-20);
+    border-color: var(--prizm-v3-background-stroke-focus);
+    box-shadow: 0 0 0 2px var(--prizm-v3-background-stroke-focus);
 
     &:hover {
-      border-color: var(--prizm-index-plan);
+      border-color: var(--prizm-v3-background-stroke-focus);
     }
 
     .prizm-input-button-default {
@@ -230,7 +230,7 @@
       .prizm-input-button-default {
         position: absolute;
         z-index: 100;
-        background-color: var(--prizm-bg-dashboard-forms);
+        background-color: var(--prizm-v3-form-fill-default);
       }
 
       .prizm-input-button-default {
@@ -257,15 +257,15 @@
   line-height: 22px;
 
   &-success {
-    color: var(--prizm-index-good);
+    color: var(--prizm-v3-status-success-primary-default);
   }
 
   &-warning {
-    color: var(--prizm-index-warning);
+    color: var(--prizm-v3-status-warning-primary-default);
   }
 
   &-danger {
-    color: var(--prizm-index-danger);
+    color: var(--prizm-v3-status-alarm-primary-default);
   }
 }
 

From 6d2c9082881c03613996596c6efd5d598975bebf Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 20 Nov 2023 14:05:53 +0300
Subject: [PATCH 13/49] feat: textarea v3 colors update #1064

---
 .../input/input-date-range/input-date-range.component.ts  | 1 -
 .../input/input-month-range/input-month-range.module.ts   | 8 ++++----
 .../input/input-text/input-textarea.component.less        | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/libs/components/src/lib/components/input/input-date-range/input-date-range.component.ts b/libs/components/src/lib/components/input/input-date-range/input-date-range.component.ts
index 12167247e9..0151cb6fd4 100644
--- a/libs/components/src/lib/components/input/input-date-range/input-date-range.component.ts
+++ b/libs/components/src/lib/components/input/input-date-range/input-date-range.component.ts
@@ -3,7 +3,6 @@ import {
   Component,
   ContentChild,
   ElementRef,
-  HostBinding,
   HostListener,
   Inject,
   Injector,
diff --git a/libs/components/src/lib/components/input/input-month-range/input-month-range.module.ts b/libs/components/src/lib/components/input/input-month-range/input-month-range.module.ts
index 52a0cbc1cb..30ba739e8a 100644
--- a/libs/components/src/lib/components/input/input-month-range/input-month-range.module.ts
+++ b/libs/components/src/lib/components/input/input-month-range/input-month-range.module.ts
@@ -1,19 +1,19 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { PrizmCalendarMonthModule } from '../../calendar-month';
+import { PrizmCalendarMonthComponent } from '../../calendar-month';
 import { PrizmMapperPipeModule } from '../../table/pipes/mapper/mapper.module';
 import { PrizmInputMonthRangeComponent } from './input-month-range.component';
 import { PrizmInputMonthRangeDirective } from './input-month-range.directive';
 import { FormsModule } from '@angular/forms';
-import { PrizmDropdownHostModule } from '../../dropdowns/dropdown-host';
+import { PrizmDropdownHostComponent } from '../../dropdowns/dropdown-host';
 import { PrizmPreventDefaultModule } from '../../../directives/prevent-default';
 import { PrizmInputTextModule } from '../input-text/input-text.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    PrizmCalendarMonthModule,
-    PrizmDropdownHostModule,
+    PrizmCalendarMonthComponent,
+    PrizmDropdownHostComponent,
     PrizmPreventDefaultModule,
     PrizmMapperPipeModule,
     PrizmInputTextModule,
diff --git a/libs/components/src/lib/components/input/input-text/input-textarea.component.less b/libs/components/src/lib/components/input/input-text/input-textarea.component.less
index 3ee1eeab08..83470c10dc 100644
--- a/libs/components/src/lib/components/input/input-text/input-textarea.component.less
+++ b/libs/components/src/lib/components/input/input-text/input-textarea.component.less
@@ -20,7 +20,7 @@
   &:hover {
     &::-webkit-scrollbar-thumb {
       border-radius: var(--prizm-scrollbar-thumb-border-radius, 8px);
-      background-color: var(--prizm-scrollbar-thumb-color, var(--grey-g10-g4, #bfc6d7));
+      background-color: var(--prizm-scrollbar-thumb-color, var(--prizm-v3-form-stroke-default));
       opacity: var(--prizm-scrollbar-thumb-opacity, 0.4);
       width: 6px;
       height: 20%;

From af3f6a131fee7c5ac91b8ce50972103daea98be4 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 7 Nov 2023 23:37:41 +0300
Subject: [PATCH 14/49] feat: calendars v3 colors #987

---
 .../calendar-month.component.html             |  2 +-
 .../calendar-month.component.less             |  8 ++-
 .../calendar-month.component.ts               |  2 -
 .../calendar-month/calendar-month.module.ts   |  7 +--
 .../calendar-range.component.html             |  2 +-
 .../calendar-range.component.less             |  2 +-
 .../primitive-calendar-range.component.html   |  1 -
 .../primitive-calendar-range.component.less   |  4 --
 .../primitive-calendar.component.html         |  5 +-
 .../primitive-calendar.component.less         | 33 ++++++-----
 .../primitive-month-picker.component.less     |  3 -
 .../primitive-spin-button.component.less      |  4 +-
 .../primitive-spin-button.component.ts        |  1 -
 .../primitive-spin-button.template.html       |  4 +-
 ...itive-year-month-pagination.component.html | 20 +++----
 ...itive-year-month-pagination.component.less | 44 +++++----------
 .../primitive-year-month-pagination.module.ts |  6 --
 .../primitive-year-picker.component.less      |  6 --
 libs/components/src/styles/mixins/mixins.less | 27 +++++++++
 libs/components/src/styles/mixins/picker.less | 56 +++++++++++--------
 20 files changed, 118 insertions(+), 119 deletions(-)

diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.component.html b/libs/components/src/lib/components/calendar-month/calendar-month.component.html
index 4d18288612..d3ca2afc9e 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.component.html
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.component.html
@@ -17,9 +17,9 @@
     prizmStopPropagation="mousedown"
   >
     <button
+      class="year-btn"
       [prizmFocusable]="false"
       (click)="onYearClick()"
-      prizmLink
       automation-id="prizm-calendar-month__active-year"
     >
       {{ year.formattedYear }}
diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.component.less b/libs/components/src/lib/components/calendar-month/calendar-month.component.less
index c189f39a7c..1b91ea6b33 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.component.less
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.component.less
@@ -8,6 +8,10 @@
   width: 15.75rem;
   padding: 1.125rem;
   box-sizing: content-box;
+
+  .year-btn {
+    .pagination-btn();
+  }
 }
 
 .z-row {
@@ -23,10 +27,10 @@
   }
 
   &:not([data-range='start']):not([data-range='single']):not([data-range='end']):hover {
-    background-color: var(--prizm-g2-g11);
+    background-color: var(--prizm-v3-button-ghost-hover);
 
     .z-item {
-      color: var(--prizm-index-plan) !important;
+      color: var(--prizm-v3-button-primary-solid-hover) !important;
     }
   }
 }
diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.component.ts b/libs/components/src/lib/components/calendar-month/calendar-month.component.ts
index 6671b5d935..a8f7af4e44 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.component.ts
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.component.ts
@@ -33,7 +33,6 @@ import {
 } from '../../directives';
 import { PrizmPrimitiveSpinButtonModule, PrizmPrimitiveYearPickerModule } from '../internal';
 import { PrizmScrollbarModule } from '../scrollbar';
-import { PrizmLinkModule } from '../link';
 import { PrizmLetModule } from '@prizm-ui/helpers';
 
 const TODAY = PrizmDay.currentLocal();
@@ -49,7 +48,6 @@ const TODAY = PrizmDay.currentLocal();
     PrizmPrimitiveYearPickerModule,
     PrizmPrimitiveSpinButtonModule,
     PrizmScrollbarModule,
-    PrizmLinkModule,
     PrizmLetModule,
     PrizmHoveredModule,
     PrizmPressedModule,
diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
index d54e9be971..1f045c10c9 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
@@ -3,13 +3,8 @@ import { NgModule } from '@angular/core';
 import { PrizmLetModule } from '@prizm-ui/helpers';
 import { PrizmFocusableModule } from '../../directives/focusable/focusable.module';
 import { PrizmHoveredModule } from '../../directives/hovered/hovered.module';
-import { PrizmPressedModule } from '../../directives/pressed/pressed.module';
-import { PrizmPrimitiveSpinButtonModule } from '../internal/primitive-spin-button/primitive-spin-button.module';
-import { PrizmPrimitiveYearPickerModule } from '../internal/primitive-year-picker/primitive-year-picker.module';
-import { PrizmLinkModule } from '../link/link.module';
-import { PrizmScrollbarModule } from '../scrollbar/scrollbar.module';
 import { PrizmCalendarMonthComponent } from './calendar-month.component';
-import { PrizmStopPropagationModule } from '../../directives/stop-propagation/stop-propagation.module';
+
 
 /**
  * @deprecated
diff --git a/libs/components/src/lib/components/calendar-range/calendar-range.component.html b/libs/components/src/lib/components/calendar-range/calendar-range.component.html
index 4707764b4d..653d5941b9 100644
--- a/libs/components/src/lib/components/calendar-range/calendar-range.component.html
+++ b/libs/components/src/lib/components/calendar-range/calendar-range.component.html
@@ -42,7 +42,7 @@
     <prizm-data-list
       class="z-menu"
       [style.--prizm-data-list-border]="0"
-      [style.--prizm-data-list-border-left]="'1px solid var(--prizm-border-widget)'"
+      [style.--prizm-data-list-border-left]="'1px solid var(--prizm-v3-background-stroke)'"
       role="menu"
       automation-id="prizm-calendar-range__menu"
     >
diff --git a/libs/components/src/lib/components/calendar-range/calendar-range.component.less b/libs/components/src/lib/components/calendar-range/calendar-range.component.less
index b378d0d629..94ed736ee6 100644
--- a/libs/components/src/lib/components/calendar-range/calendar-range.component.less
+++ b/libs/components/src/lib/components/calendar-range/calendar-range.component.less
@@ -10,7 +10,7 @@
 
 .z-menu {
   width: 11rem;
-  border-left: 1px solid var(--prizm-base-03);
+  border-left: 1px solid var(--prizm-v3-background-stroke);
 }
 
 .z-checkmark {
diff --git a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html
index 802c52f3ff..d8dac6196b 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html
+++ b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.html
@@ -16,7 +16,6 @@
 </prizm-calendar>
 
 <prizm-calendar
-  class="z-border"
   [(hoveredItem)]="hoveredItem"
   [min]="min"
   [max]="max"
diff --git a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less
index 0b276ae295..79ff2d5269 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less
+++ b/libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.less
@@ -1,7 +1,3 @@
 :host {
   display: flex;
 }
-
-.z-border {
-  border-left: 1px solid var(--prizm-base-03);
-}
diff --git a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html
index 6281262a20..db55d45e85 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html
+++ b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.html
@@ -4,7 +4,8 @@
 <div class="z-row z-row_weekday prizm-font-main-body-12">
   <div
     class="z-cell"
-    *ngFor="let day of weekDays$ | async"
+    *ngFor="let day of weekDays$ | async; let i = index"
+    [class.z-cell_weekend]="i > 4"
     [innerText]="day | prizmCallFunc : capitalizeFirstLetter"
   ></div>
 </div>
@@ -19,7 +20,6 @@
         <div
           class="z-cell"
           *ngIf="!itemIsUnavailable(item) || showAdjacent"
-          [class.z-cell_weekend]="item.isWeekend"
           [class.z-cell_today]="itemIsToday(item)"
           [class.z-cell_interval]="itemIsInterval(item)"
           [attr.data-range]="getItemRange(item)"
@@ -32,6 +32,7 @@
           <div
             class="z-item prizm-font-btn-links-14"
             [class.z-item_unavailable]="itemIsUnavailable(item)"
+            [class.z-item_weekend]="item.isWeekend"
             automation-id="prizm-primitive-calendar__item"
           >
             {{ item.day }}
diff --git a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
index c049edfa7b..3b0d40a153 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
+++ b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
@@ -9,10 +9,10 @@
 }
 
 .z-item {
-  color: var(--prizm-text-main);
+  color: var(--prizm-v3-text-icon-secondary);
 
   &.z-item_unavailable {
-    color: var(--prizm-grey-g10-g4);
+    color: var(--prizm-v3-text-icon-disable);
   }
 }
 
@@ -25,23 +25,22 @@
 
   &_weekday {
     font: var(--prizm-font-text-s);
-    color: var(--prizm-text-subscript);
+    color: var(--prizm-v3-text-icon-tertiary);
     pointer-events: none;
     text-transform: capitalize;
+    .z-cell_weekend {
+      color: var(--prizm-v3-status-alarm-primary-default);
+    }
   }
 }
 
 .z-item {
   display: flex;
   flex-direction: column;
-}
-
-.z-cell_weekend {
-  color: var(--prizm-negative);
-}
 
-.z-item_unavailable {
-  opacity: var(--prizm-disabled-opacity);
+  &_weekend {
+    color: var(--prizm-calendar-day-weekend-color);
+  }
 }
 
 .z-dots {
@@ -69,18 +68,24 @@
   background-color: var(--prizm-status-day-color);
 
   &[data-prizm-status='index'] {
-    background-color: var(--prizm-calendar-day-status-default, var(--prizm-index-plan));
+    background-color: var(--prizm-calendar-day-status-default, var(--prizm-v3-status-info-primary-default));
   }
 
   &[data-prizm-status='warning'] {
-    background-color: var(--prizm-calendar-day-status-warning, var(--prizm-index-warning));
+    background-color: var(
+      --prizm-calendar-day-status-warning,
+      var(--prizm-v3-status-warning-primary-default)
+    );
   }
 
   &[data-prizm-status='danger'] {
-    background-color: var(--prizm-calendar-day-status-danger, var(--prizm-index-danger));
+    background-color: var(--prizm-calendar-day-status-danger, var(--prizm-v3-status-alarm-primary-default));
   }
 
   &[data-prizm-status='success'] {
-    background-color: var(--prizm-calendar-day-status-success, var(--prizm-index-good));
+    background-color: var(
+      --prizm-calendar-day-status-success,
+      var(--prizm-v3-status-success-primary-default)
+    );
   }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less b/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less
index 7feb9024fa..161c50d2aa 100644
--- a/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less
+++ b/libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.less
@@ -24,7 +24,4 @@
 .z-cell {
   flex-grow: 1;
   width: 100%;
-  &[data-state='pressed'] .z-item {
-    background-color: var(--prizm-index-plan);
-  }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
index 0b16423f0b..a3cdd3a714 100644
--- a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
+++ b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
@@ -22,10 +22,10 @@
   }
 }
 
-.z-content {
+.z-content:not(:empty) {
   padding: 0 2 * @space;
 
   :host._focus-visible & {
-    box-shadow: 0 0 0 1px var(--prizm-focus);
+    box-shadow: 0 0 0 1px var(--prizm-v3-background-stroke-focus);
   }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts
index fb84f5c66f..38f56833ea 100644
--- a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts
+++ b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts
@@ -3,7 +3,6 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  HostBinding,
   Inject,
   Input,
   Output,
diff --git a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html
index bba54674a7..eb4e7e54e8 100644
--- a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html
+++ b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.template.html
@@ -13,7 +13,7 @@
     class="z-arrow"
     prizmIconButton
     type="button"
-    size="xs"
+    size="l"
     [appearanceType]="mode"
     automation-id="prizm-primitive-spin-button__left"
     icon="arrows-chevron-left"
@@ -30,7 +30,7 @@
     class="z-arrow"
     prizmIconButton
     type="button"
-    size="xs"
+    size="l"
     appearance="secondary"
     automation-id="prizm-primitive-spin-button__right"
     icon="arrows-chevron-right"
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
index baec304d6b..34e3a99734 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
@@ -24,33 +24,33 @@
 <ng-template #button>
   <div class="year-box" (click)="onYearClick($event)">
     <button
+      class="pagination-btn"
       [attr.data-testid]="'prizm-primitive-year-month-pagination__year-button'"
-      [prizmFocusable]="false"
+      [prizmFocusable]="true"
       [class.active]="yearActive"
       type="button"
-      prizmLink
     >
       {{ value.formattedYear }}
+      <span>
+        <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
+      </span>
     </button>
-    <span>
-      <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
-    </span>
   </div>
 </ng-template>
 
 <ng-template #buttonMonth>
   <div class="month-box" (click)="onMonthClick($event)">
     <button
+      class="pagination-btn"
       [attr.testId]="'prizm-primitive-year-month-pagination__year-button'"
       [class.active]="monthActive"
-      [prizmFocusable]="false"
+      [prizmFocusable]="true"
       type="button"
-      prizmLink
     >
       {{ value | prizmMonth | async }}
+      <span>
+        <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
+      </span>
     </button>
-    <span>
-      <prizm-icon iconClass="chevrons-dropdown-small"></prizm-icon>
-    </span>
   </div>
 </ng-template>
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
index e77789ca54..537a55bffe 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
@@ -1,40 +1,22 @@
+@import '../../../../styles/ui-local.less';
+
 :host {
   display: block;
-}
 
-.box {
-  display: flex;
-  justify-content: space-between;
-}
-
-.year-month {
-  color: var(--prizm-text-contrast);
-  display: flex;
-  gap: 8px;
-}
-
-.year-box,
-.month-box {
-  display: flex;
-  justify-content: space-between;
-  color: var(--prizm-text-contrast);
-  gap: 4px;
-  cursor: pointer;
-
-  prizm-icon {
-    color: var(--prizm-border-icon);
+  .box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 
-  &:hover,
-  &:hover prizm-icon {
-    color: var(--prizm-index-plan);
+  .year-month {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--prizm-v3-text-icon-secondary);
   }
-}
-
-[prizmLink] {
-  --prizm-link: var(--prizm-text-contrast);
 
-  &.active {
-    --prizm-link: var(--prizm-index-plan);
+  .pagination-btn {
+    .pagination-btn();
   }
 }
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
index e6c9eaf694..ef339d7aba 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
@@ -1,11 +1,5 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { PrizmMonthPipeModule } from '../../../pipes/month';
 import { PrizmPrimitiveYearMonthPaginationComponent } from './primitive-year-month-pagination.component';
-import { PrizmPrimitiveSpinButtonModule } from '../primitive-spin-button';
-import { PrizmLinkModule } from '../../link/link.module';
-import { PrizmFocusableModule } from '../../../directives/focusable/focusable.module';
-import { PrizmIconModule } from '../../icon/icon.module';
 
 /**
  * @deprecated
diff --git a/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less b/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less
index 88495fdbc4..ffcd8262c3 100644
--- a/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less
+++ b/libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.less
@@ -19,9 +19,3 @@
     margin-bottom: 0;
   }
 }
-
-.z-cell {
-  &[data-state='pressed'] .z-item {
-    background-color: var(--prizm-index-plan);
-  }
-}
diff --git a/libs/components/src/styles/mixins/mixins.less b/libs/components/src/styles/mixins/mixins.less
index 9991911a5a..94ec307954 100644
--- a/libs/components/src/styles/mixins/mixins.less
+++ b/libs/components/src/styles/mixins/mixins.less
@@ -121,3 +121,30 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.pagination-btn() {
+  border: none;
+  background: none;
+  outline: none;
+  display: flex;
+  gap: 4px;
+  padding: 8px;
+  text-align: left;
+  cursor: pointer;
+
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 400;
+
+  color: var(--prizm-v3-text-icon-secondary);
+
+  &:hover:not(.active):not(:active) {
+    background-color: var(--prizm-v3-button-ghost-hover);
+    border-radius: 2px;
+  }
+
+  &:active,
+  &.active {
+    color: var(--prizm-v3-button-primary-solid-active);
+  }
+}
diff --git a/libs/components/src/styles/mixins/picker.less b/libs/components/src/styles/mixins/picker.less
index b9754122b7..62b49b9304 100644
--- a/libs/components/src/styles/mixins/picker.less
+++ b/libs/components/src/styles/mixins/picker.less
@@ -16,7 +16,7 @@
     flex: 1;
     line-height: 2rem;
     border-radius: 2px;
-    color: var(--prizm-text-contrast);
+    color: var(--prizm-v3-text-icon-secondary);
 
     &:before,
     &:after {
@@ -47,9 +47,21 @@
     &_today {
       border-radius: 2px;
 
+      &[data-state='hovered'] {
+        & > .z-item {
+          border-color: var(--prizm-v3-button-primary-solid-hover);
+          color: var(--prizm-v3-button-primary-solid-hover);
+          background-color: var(--prizm-v3-button-ghost-hover);
+        }
+      }
+
       .z-item {
-        border: 1px solid var(--prizm-index-plan);
-        color: var(--prizm-exeptions-g1-b1);
+        border: 1px solid var(--prizm-v3-button-primary-solid-default);
+        color: var(--prizm-v3-button-primary-solid-default);
+
+        &_unavailable {
+          color: var(--prizm-v3-text-icon-disable);
+        }
       }
     }
 
@@ -66,10 +78,10 @@
 
     &_interval {
       &:before {
-        background: var(--prizm-lite-b130-20);
+        background: var(--prizm-v3-button-primary-ghost-active);
 
         :host._single & {
-          background-color: var(--prizm-lite-b130-20);
+          background-color: var(--prizm-v3-button-primary-ghost-active);
         }
       }
 
@@ -93,39 +105,34 @@
 
       & > .z-item {
         border-radius: 0;
-        color: var(--prizm-index-plan);
+        color: var(--prizm-v3-button-primary-solid-default);
       }
     }
 
     &[data-range] {
-      &:after {
-        background-color: var(--prizm-primary-text);
-      }
-
       &:not([data-state='hovered']) > .z-item {
-        color: var(--prizm-grey-g13-g1);
+        color: var(--prizm-v3-text-icon-exception);
 
         &:before,
         &:after {
-          background-color: var(--prizm-index-plan);
+          background-color: var(--prizm-v3-button-primary-solid-default);
         }
       }
 
       &[data-state='hovered'] > .z-item {
-        background-color: var(--prizm-g2-g11);
-        color: var(--prizm-index-plan);
+        background-color: var(--prizm-v3-button-ghost-hover);
+        color: var(--prizm-v3-button-primary-solid-hover);
       }
 
       &[data-state='hovered'] > .z-item:before,
       &[data-state='hovered'] > .z-item:after {
-        background-color: var(--prizm-grey-g12-g2);
-        color: var(--prizm-index-plan);
+        background-color: var(--prizm-v3-button-ghost-hover);
+        color: var(--prizm-v3-button-primary-solid-hover);
       }
 
       &[data-state='pressed'] > .z-item:before,
       &[data-state='pressed'] > .z-item:after {
-        //background-color: var(--prizm-primary-active);
-        background-color: var(--prizm-index-plan);
+        background-color: var(--prizm-v3-button-primary-solid-default);
       }
     }
 
@@ -160,19 +167,20 @@
       cursor: not-allowed;
 
       & > .z-item {
-        opacity: 0.36;
+        text-decoration: line-through;
+        opacity: 0.3;
       }
     }
 
-    &[data-state='hovered']:not([data-range]) > .z-item {
-      background-color: var(--prizm-g2-g11);
-      color: var(--prizm-exeptions-g1-b1);
+    &[data-state='hovered']:not([data-range]):not(.z-cell_today) > .z-item {
+      background-color: var(--prizm-v3-button-ghost-hover);
+      color: var(--prizm-v3-button-primary-solid-hover);
     }
 
     &[data-state='pressed']:hover:not([data-range]) > .z-item {
-      background-color: var(--prizm-index-plan);
+      background-color: var(--prizm-v3-button-primary-solid-default);
       border-radius: 2px;
-      color: var(--prizm-grey-g13-g1);
+      color: var(--prizm-v3-text-icon-exception);
     }
   }
 }

From c8c5e57374aa6eaf5bfc4bbc3415f4a7df186abb Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 7 Nov 2023 23:37:41 +0300
Subject: [PATCH 15/49] feat: calendars v3 colors #987

---
 .../lib/components/calendar-month/calendar-month.module.ts    | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
index 1f045c10c9..4edd1426c9 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
@@ -1,8 +1,4 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { PrizmLetModule } from '@prizm-ui/helpers';
-import { PrizmFocusableModule } from '../../directives/focusable/focusable.module';
-import { PrizmHoveredModule } from '../../directives/hovered/hovered.module';
 import { PrizmCalendarMonthComponent } from './calendar-month.component';
 
 

From a6f7a57169fc5fde222518a234aa40f8f56ff418 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Sun, 19 Nov 2023 22:57:23 +0300
Subject: [PATCH 16/49] feat: inputs v3 colors in progress

---
 .../input-icon-button/input-icon-button.component.less |  4 ++--
 .../input-status-subtext.component.less                |  2 +-
 .../common/input-layout/input-layout.component.less    | 10 +++++-----
 .../input/common/styles/input.component.less           |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
index 028c115d35..252bf07686 100644
--- a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
+++ b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
@@ -10,10 +10,10 @@
   width: var(--prizm-input-icon-button-width, 32px);
   font-size: inherit;
 
-  color: var(--prizm-text-contrast);
+  color: var(--prizm-v3-text-icon-secondary);
 
   &.disabled {
-    color: var(--prizm-grey-g9-g5);
+    color: red;
     pointer-events: none;
     cursor: not-allowed;
   }
diff --git a/libs/components/src/lib/components/input/common/input-invalid-subtext/input-status-subtext.component.less b/libs/components/src/lib/components/input/common/input-invalid-subtext/input-status-subtext.component.less
index b6bef9edc9..53e7beb0af 100644
--- a/libs/components/src/lib/components/input/common/input-invalid-subtext/input-status-subtext.component.less
+++ b/libs/components/src/lib/components/input/common/input-invalid-subtext/input-status-subtext.component.less
@@ -1,6 +1,6 @@
 :host {
   display: block;
-  color: var(--prizm-index-danger);
+  color: var(--prizm-v3-status-alarm-primary-default);
   // by default for invalid text
   min-height: 22px;
 }
diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
index 7b3ec6ec27..65de42a2fd 100644
--- a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
+++ b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
@@ -36,7 +36,7 @@
 .prizm-input-label {
   font-weight: 600;
   font-size: 12px;
-  color: var(--prizm-text-subscript);
+  color: var(--prizm-v3-text-icon-tertiary);
   padding-left: 16px;
   line-height: 16px;
   transition: top 200ms ease 0s;
@@ -46,7 +46,7 @@
   gap: 4px;
 
   &-required {
-    color: var(--prizm-index-danger);
+    color: var(--prizm-v3-status-alarm-primary-default);
   }
 
   &-inner {
@@ -90,8 +90,8 @@
 }
 
 .prizm-input-form {
-  background-color: var(--prizm-bg-dashboard-forms);
-  border: 1px solid var(--prizm-border-forms);
+  background-color: var(--prizm-v3-form-fill-default);
+  border: 1px solid var(--prizm-v3-form-stroke-default);
   border-radius: 2px;
   display: flex;
   flex-direction: column;
@@ -113,7 +113,7 @@
   }
 
   &:hover {
-    border-color: var(--prizm-index-plan);
+    border-color: var(--prizm-v3-form-active);
   }
 
   &__first {
diff --git a/libs/components/src/lib/components/input/common/styles/input.component.less b/libs/components/src/lib/components/input/common/styles/input.component.less
index 433ce50ac3..bc10e03ce8 100644
--- a/libs/components/src/lib/components/input/common/styles/input.component.less
+++ b/libs/components/src/lib/components/input/common/styles/input.component.less
@@ -6,7 +6,7 @@
   height: 100%;
   line-height: 16px;
   font-size: 14px;
-  color: var(--prizm-text-contrast);
+  color: var(--prizm-v3-text-icon-secondary);
   display: block;
   text-overflow: ellipsis;
 }

From 0bdca995ac63d755dcf77292fc655eecc3253edf Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 20 Nov 2023 12:14:18 +0300
Subject: [PATCH 17/49] feat: input icon button colors #1064

---
 .../input-icon-button.component.less                | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
index 252bf07686..322e33a5a6 100644
--- a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
+++ b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
@@ -13,7 +13,7 @@
   color: var(--prizm-v3-text-icon-secondary);
 
   &.disabled {
-    color: red;
+    color: var();
     pointer-events: none;
     cursor: not-allowed;
   }
@@ -22,16 +22,19 @@
 :host-context(.interactive) {
   &:not(.disabled) {
     &:hover {
-      color: var(--prizm-index-plan);
+      color: var(--prizm-v3-button-secondary-solid-hover);
     }
 
     &:focus {
-      color: var(--prizm-index-plan);
-      text-shadow: 0 0 1px var(--prizm-index-plan);
+      color: var(--prizm-v3-button-primary-solid-active);
     }
 
     cursor: pointer;
   }
 
-  color: var(--prizm-border-icon);
+  color: var(--prizm-v3-button-secondary-solid-default);
+}
+
+:host-context(.disabled) {
+  display: none;
 }

From ce895eadcc2c4477b067e3dff0f51bb4c62a70e4 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 20 Nov 2023 12:55:15 +0300
Subject: [PATCH 18/49] feat: input layout v3 colors #1064

---
 .../input-layout-textarea.component.less      |  2 +-
 .../input-layout/input-layout.component.less  | 36 +++++++++----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less
index 1c6c4d0e17..980da716ca 100644
--- a/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less
+++ b/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less
@@ -30,7 +30,7 @@
 .prizm-input-label {
   &-textarea {
     &.@{label}-inner {
-      background-color: var(--prizm-bg-dashboard-forms);
+      background-color: var(--prizm-v3-form-fill-default);
       width: 100%;
       &[data-size='l'] {
         top: 0;
diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
index 65de42a2fd..88959f8be9 100644
--- a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
+++ b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
@@ -129,57 +129,57 @@
 
   &-status {
     &-success {
-      border-color: var(--prizm-index-good);
+      border-color: var(--prizm-v3-status-success-primary-default);
       &:hover {
-        border-color: var(--prizm-index-good);
+        border-color: var(--prizm-v3-status-success-primary-hover);
       }
 
       .prizm-input-form-status-button {
-        color: var(--prizm-index-good);
+        color: var(--prizm-v3-status-success-primary-default);
       }
     }
 
     &-warning {
-      border-color: var(--prizm-index-warning);
+      border-color: var(--prizm-v3-status-warning-primary-default);
       &:hover {
-        border-color: var(--prizm-index-warning);
+        border-color: var(--prizm-v3-status-warning-primary-hover);
       }
 
       .prizm-input-form-status-button {
-        color: var(--prizm-index-warning);
+        color: var(--prizm-v3-status-warning-primary-default);
       }
     }
 
     &-danger {
-      border-color: var(--prizm-index-danger);
+      border-color: var(--prizm-v3-status-alarm-primary-default);
       &:hover {
-        border-color: var(--prizm-index-danger);
+        border-color: var(--prizm-v3-status-alarm-primary-hover);
       }
 
       .prizm-input-form-status-button {
-        color: var(--prizm-index-danger);
+        color: var(--prizm-v3-status-alarm-primary-default);
       }
     }
   }
 
   &-invalid {
     &.prizm-input-form-touched {
-      border-color: var(--prizm-index-danger);
+      border-color: var(--prizm-v3-status-alarm-primary-default);
     }
 
     .prizm-input-form-status-button {
-      color: var(--prizm-index-danger);
+      color: var(--prizm-v3-status-alarm-primary-default);
     }
   }
 
   // rewrite all if focused
   &-focused:host-context(.enabled),
   &:focus-within:host-context(.enabled) {
-    border-color: var(--prizm-index-plan);
-    box-shadow: 0 0 0 2px var(--prizm-lite-b130-20);
+    border-color: var(--prizm-v3-background-stroke-focus);
+    box-shadow: 0 0 0 2px var(--prizm-v3-background-stroke-focus);
 
     &:hover {
-      border-color: var(--prizm-index-plan);
+      border-color: var(--prizm-v3-background-stroke-focus);
     }
 
     .prizm-input-button-default {
@@ -230,7 +230,7 @@
       .prizm-input-button-default {
         position: absolute;
         z-index: 100;
-        background-color: var(--prizm-bg-dashboard-forms);
+        background-color: var(--prizm-v3-form-fill-default);
       }
 
       .prizm-input-button-default {
@@ -257,15 +257,15 @@
   line-height: 22px;
 
   &-success {
-    color: var(--prizm-index-good);
+    color: var(--prizm-v3-status-success-primary-default);
   }
 
   &-warning {
-    color: var(--prizm-index-warning);
+    color: var(--prizm-v3-status-warning-primary-default);
   }
 
   &-danger {
-    color: var(--prizm-index-danger);
+    color: var(--prizm-v3-status-alarm-primary-default);
   }
 }
 

From 02da468465e8da45e63e36580c2e77bfda389f5e Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 20 Nov 2023 14:05:53 +0300
Subject: [PATCH 19/49] feat: textarea v3 colors update #1064

---
 .../input/input-date-range/input-date-range.component.ts  | 1 -
 .../input/input-month-range/input-month-range.module.ts   | 8 ++++----
 .../input/input-text/input-textarea.component.less        | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/libs/components/src/lib/components/input/input-date-range/input-date-range.component.ts b/libs/components/src/lib/components/input/input-date-range/input-date-range.component.ts
index 12167247e9..0151cb6fd4 100644
--- a/libs/components/src/lib/components/input/input-date-range/input-date-range.component.ts
+++ b/libs/components/src/lib/components/input/input-date-range/input-date-range.component.ts
@@ -3,7 +3,6 @@ import {
   Component,
   ContentChild,
   ElementRef,
-  HostBinding,
   HostListener,
   Inject,
   Injector,
diff --git a/libs/components/src/lib/components/input/input-month-range/input-month-range.module.ts b/libs/components/src/lib/components/input/input-month-range/input-month-range.module.ts
index 52a0cbc1cb..30ba739e8a 100644
--- a/libs/components/src/lib/components/input/input-month-range/input-month-range.module.ts
+++ b/libs/components/src/lib/components/input/input-month-range/input-month-range.module.ts
@@ -1,19 +1,19 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { PrizmCalendarMonthModule } from '../../calendar-month';
+import { PrizmCalendarMonthComponent } from '../../calendar-month';
 import { PrizmMapperPipeModule } from '../../table/pipes/mapper/mapper.module';
 import { PrizmInputMonthRangeComponent } from './input-month-range.component';
 import { PrizmInputMonthRangeDirective } from './input-month-range.directive';
 import { FormsModule } from '@angular/forms';
-import { PrizmDropdownHostModule } from '../../dropdowns/dropdown-host';
+import { PrizmDropdownHostComponent } from '../../dropdowns/dropdown-host';
 import { PrizmPreventDefaultModule } from '../../../directives/prevent-default';
 import { PrizmInputTextModule } from '../input-text/input-text.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    PrizmCalendarMonthModule,
-    PrizmDropdownHostModule,
+    PrizmCalendarMonthComponent,
+    PrizmDropdownHostComponent,
     PrizmPreventDefaultModule,
     PrizmMapperPipeModule,
     PrizmInputTextModule,
diff --git a/libs/components/src/lib/components/input/input-text/input-textarea.component.less b/libs/components/src/lib/components/input/input-text/input-textarea.component.less
index 3ee1eeab08..83470c10dc 100644
--- a/libs/components/src/lib/components/input/input-text/input-textarea.component.less
+++ b/libs/components/src/lib/components/input/input-text/input-textarea.component.less
@@ -20,7 +20,7 @@
   &:hover {
     &::-webkit-scrollbar-thumb {
       border-radius: var(--prizm-scrollbar-thumb-border-radius, 8px);
-      background-color: var(--prizm-scrollbar-thumb-color, var(--grey-g10-g4, #bfc6d7));
+      background-color: var(--prizm-scrollbar-thumb-color, var(--prizm-v3-form-stroke-default));
       opacity: var(--prizm-scrollbar-thumb-opacity, 0.4);
       width: 6px;
       height: 20%;

From 26c1deed7f41d572750cb85db6b858ddde795623 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 7 Nov 2023 23:37:41 +0300
Subject: [PATCH 20/49] feat: calendars v3 colors #987

---
 .../calendar-month/calendar-month.module.ts   | 25 +++++++++++++++++++
 .../primitive-year-month-pagination.module.ts | 17 +++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
index 4edd1426c9..75f1fb3a84 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
@@ -1,4 +1,14 @@
 import { NgModule } from '@angular/core';
+<<<<<<< HEAD
+=======
+import { PrizmLetModule } from '@prizm-ui/helpers';
+import { PrizmFocusableModule } from '../../directives/focusable/focusable.module';
+import { PrizmHoveredModule } from '../../directives/hovered/hovered.module';
+import { PrizmPressedModule } from '../../directives/pressed/pressed.module';
+import { PrizmPrimitiveSpinButtonModule } from '../internal/primitive-spin-button/primitive-spin-button.module';
+import { PrizmPrimitiveYearPickerModule } from '../internal/primitive-year-picker/primitive-year-picker.module';
+import { PrizmScrollbarModule } from '../scrollbar/scrollbar.module';
+>>>>>>> d1d815f8e (feat: calendars v3 colors #987)
 import { PrizmCalendarMonthComponent } from './calendar-month.component';
 
 
@@ -7,7 +17,22 @@ import { PrizmCalendarMonthComponent } from './calendar-month.component';
  * use standalone
  * */
 @NgModule({
+<<<<<<< HEAD
   imports: [PrizmCalendarMonthComponent],
+=======
+  imports: [
+    CommonModule,
+    PrizmStopPropagationModule,
+    PrizmPrimitiveYearPickerModule,
+    PrizmPrimitiveSpinButtonModule,
+    PrizmScrollbarModule,
+    PrizmLetModule,
+    PrizmHoveredModule,
+    PrizmPressedModule,
+    PrizmFocusableModule,
+  ],
+  declarations: [PrizmCalendarMonthComponent],
+>>>>>>> d1d815f8e (feat: calendars v3 colors #987)
   exports: [PrizmCalendarMonthComponent],
 })
 export class PrizmCalendarMonthModule {}
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
index ef339d7aba..4c7f036839 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
@@ -1,12 +1,29 @@
 import { NgModule } from '@angular/core';
 import { PrizmPrimitiveYearMonthPaginationComponent } from './primitive-year-month-pagination.component';
+<<<<<<< HEAD
+=======
+import { PrizmPrimitiveSpinButtonModule } from '../primitive-spin-button';
+import { PrizmFocusableModule } from '../../../directives/focusable/focusable.module';
+import { PrizmIconModule } from '../../icon/icon.module';
+>>>>>>> d1d815f8e (feat: calendars v3 colors #987)
 
 /**
  * @deprecated
  * use standalone
  * */
 @NgModule({
+<<<<<<< HEAD
   imports: [PrizmPrimitiveYearMonthPaginationComponent],
+=======
+  imports: [
+    CommonModule,
+    PrizmFocusableModule,
+    PrizmPrimitiveSpinButtonModule,
+    PrizmIconModule,
+    PrizmMonthPipeModule,
+  ],
+  declarations: [PrizmPrimitiveYearMonthPaginationComponent],
+>>>>>>> d1d815f8e (feat: calendars v3 colors #987)
   exports: [PrizmPrimitiveYearMonthPaginationComponent],
 })
 export class PrizmPrimitiveYearMonthPaginationModule {}

From 2a1c34c7a2be7d3d29804145d8056ad1d9182e04 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Sun, 19 Nov 2023 22:57:23 +0300
Subject: [PATCH 21/49] feat: inputs v3 colors in progress

---
 .../calendar-month/calendar-month.module.ts   | 25 -------------------
 .../primitive-year-month-pagination.module.ts | 17 -------------
 2 files changed, 42 deletions(-)

diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
index 75f1fb3a84..4edd1426c9 100644
--- a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
+++ b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
@@ -1,14 +1,4 @@
 import { NgModule } from '@angular/core';
-<<<<<<< HEAD
-=======
-import { PrizmLetModule } from '@prizm-ui/helpers';
-import { PrizmFocusableModule } from '../../directives/focusable/focusable.module';
-import { PrizmHoveredModule } from '../../directives/hovered/hovered.module';
-import { PrizmPressedModule } from '../../directives/pressed/pressed.module';
-import { PrizmPrimitiveSpinButtonModule } from '../internal/primitive-spin-button/primitive-spin-button.module';
-import { PrizmPrimitiveYearPickerModule } from '../internal/primitive-year-picker/primitive-year-picker.module';
-import { PrizmScrollbarModule } from '../scrollbar/scrollbar.module';
->>>>>>> d1d815f8e (feat: calendars v3 colors #987)
 import { PrizmCalendarMonthComponent } from './calendar-month.component';
 
 
@@ -17,22 +7,7 @@ import { PrizmCalendarMonthComponent } from './calendar-month.component';
  * use standalone
  * */
 @NgModule({
-<<<<<<< HEAD
   imports: [PrizmCalendarMonthComponent],
-=======
-  imports: [
-    CommonModule,
-    PrizmStopPropagationModule,
-    PrizmPrimitiveYearPickerModule,
-    PrizmPrimitiveSpinButtonModule,
-    PrizmScrollbarModule,
-    PrizmLetModule,
-    PrizmHoveredModule,
-    PrizmPressedModule,
-    PrizmFocusableModule,
-  ],
-  declarations: [PrizmCalendarMonthComponent],
->>>>>>> d1d815f8e (feat: calendars v3 colors #987)
   exports: [PrizmCalendarMonthComponent],
 })
 export class PrizmCalendarMonthModule {}
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
index 4c7f036839..ef339d7aba 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.module.ts
@@ -1,29 +1,12 @@
 import { NgModule } from '@angular/core';
 import { PrizmPrimitiveYearMonthPaginationComponent } from './primitive-year-month-pagination.component';
-<<<<<<< HEAD
-=======
-import { PrizmPrimitiveSpinButtonModule } from '../primitive-spin-button';
-import { PrizmFocusableModule } from '../../../directives/focusable/focusable.module';
-import { PrizmIconModule } from '../../icon/icon.module';
->>>>>>> d1d815f8e (feat: calendars v3 colors #987)
 
 /**
  * @deprecated
  * use standalone
  * */
 @NgModule({
-<<<<<<< HEAD
   imports: [PrizmPrimitiveYearMonthPaginationComponent],
-=======
-  imports: [
-    CommonModule,
-    PrizmFocusableModule,
-    PrizmPrimitiveSpinButtonModule,
-    PrizmIconModule,
-    PrizmMonthPipeModule,
-  ],
-  declarations: [PrizmPrimitiveYearMonthPaginationComponent],
->>>>>>> d1d815f8e (feat: calendars v3 colors #987)
   exports: [PrizmPrimitiveYearMonthPaginationComponent],
 })
 export class PrizmPrimitiveYearMonthPaginationModule {}

From be3fc4a8d3cd1dd696719f3544f829a176c78513 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Fri, 24 Nov 2023 10:27:53 +0300
Subject: [PATCH 22/49] feat: update colors to v3 for controls #1064

---
 .../input-multi-select.component.less         | 22 +++++-----
 .../input-multi-select.component.ts           | 11 +++--
 .../select/input-select-item.component.less   | 22 +++++-----
 .../carousel/input-carousel.component.less    |  4 +-
 .../input-icon-button.component.less          |  2 +-
 .../input-date-multi.component.html           | 11 ++---
 .../input-date-multi.component.less           | 39 +-----------------
 .../input-date-multi.component.ts             |  2 +
 .../input-layout-date-relative.component.html | 36 ++++++++--------
 .../input-layout-date-relative.component.less | 41 ++++---------------
 .../input-layout-date-relative.component.ts   |  4 ++
 .../input-layout-date-time.component.html     | 11 ++---
 .../input-layout-date-time.component.less     | 35 +---------------
 .../input-layout-date-time.component.ts       |  2 +
 .../input-layout-date.component.less          |  2 +-
 ...ut-password-auxiliary-control.component.ts | 13 +-----
 .../input-password.directive.ts               |  2 +-
 .../input-layout-time.component.html          | 12 ++----
 .../input-layout-time.component.less          | 28 +------------
 .../input-time/input-layout-time.component.ts | 14 ++++---
 20 files changed, 92 insertions(+), 221 deletions(-)

diff --git a/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less b/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less
index 06de3f4334..ccaa786f33 100644
--- a/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less
+++ b/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less
@@ -9,12 +9,12 @@
   display: flex;
   align-items: center;
   padding: var(--prizm-select-item-padding, 8px 16px);
-  background: var(--prizm-select-item-background, var(--prizm-bg-body));
+  background: var(--prizm-select-item-background, var(--prizm-v3-background-fill-overlay));
   cursor: pointer;
   font-weight: var(--prizm-select-item-font-weight, 400);
   font-size: var(--prizm-select-item-font-size, 14px);
   gap: var(--prizm-select-item-gap, 8px);
-  color: var(--prizm-select-item-text, var(--prizm-text-contrast, #20222b));
+  color: var(--prizm-select-item-text, var(--prizm-v3-text-icon-primary));
 
   .text {
     max-width: calc(100% - 16px);
@@ -26,21 +26,21 @@
 
   &.selected,
   &.most-relevant {
-    background: var(--prizm-select-item-selected-background, var(--prizm-lite-b130-20));
+    background: var(--prizm-select-item-selected-background, var(--prizm-v3-table-fill-row-active));
 
     .text {
-      color: var(--prizm-text-contrast);
+      color: var(--prizm-v3-text-icon-primary);
     }
   }
 
   &:not(.selected):not(.most-relevant):hover {
-    background: var(--prizm-select-item-hover-background, var(--prizm-g2-g11));
-    color: var(--prizm-text-contrast);
+    background: var(--prizm-select-item-hover-background, var(--prizm-v3-table-fill-row-hover));
+    color: var(--prizm-v3-text-icon-primary);
   }
 }
 
 .block {
-  background: var(--prizm-select-background, var(--prizm-bg-body));
+  background: var(--prizm-select-background, var(--prizm-v3-background-fill-overlay));
   border-radius: 2px;
   border: none;
   padding: var(--prizm-select-padding, 8px 0);
@@ -52,14 +52,14 @@
 
 .empty-template {
   padding: var(--prizm-select-item-padding, 8px 16px);
-  background: var(--prizm-select-item-background, var(--prizm-bg-body));
+  background: var(--prizm-select-item-background, var(--prizm-v3-background-fill-overlay));
   font-weight: var(--prizm-select-item-font-weight, 400);
   font-size: var(--prizm-select-item-font-size, 14px);
-  color: var(--prizm-select-empty-text, var(--prizm-text-subscript, #20222b));
+  color: var(--prizm-select-empty-text, var(--prizm-v3-text-icon-secondary));
 }
 
 .icon-dropdown {
-  color: #777b92;
+  color: var(--prizm-v3-button-secondary-solid-default);
   cursor: pointer;
   transition-property: transform;
   transition-property: all;
@@ -68,7 +68,7 @@
   transition-timing-function: ease-in-out;
 
   &.active {
-    color: #337eff;
+    color: var(--prizm-v3-button-primary-solid-active);
   }
 
   &.opened {
diff --git a/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.ts b/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.ts
index 229bf626af..3db706b48a 100644
--- a/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.ts
+++ b/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.ts
@@ -30,7 +30,6 @@ import { prizmDefaultProp } from '@prizm-ui/core';
 import {
   PrizmDropdownHostClasses,
   PrizmDropdownHostComponent,
-  PrizmDropdownHostModule,
   PrizmDropdownHostStyles,
 } from '../dropdown-host';
 import {
@@ -45,8 +44,8 @@ import { PrizmOverlayModule } from '../../../modules';
 import { PrizmChipsModule } from '../../chips';
 import { CommonModule } from '@angular/common';
 import { PrizmIconModule } from '../../icon';
-import { PrizmDataListModule } from '../../data-list';
-import { PrizmCheckboxModule } from '../../checkbox';
+import { PrizmDataListComponent } from '../../data-list';
+import { PrizmCheckboxComponent } from '../../checkbox';
 
 // TODO create abstract select component and move to abstract common logic
 @Component({
@@ -70,10 +69,10 @@ import { PrizmCheckboxModule } from '../../checkbox';
     PrizmAutoFocusModule,
     PrizmScrollbarModule,
     PrizmDropdownControllerModule,
-    PrizmDataListModule,
-    PrizmCheckboxModule,
+    PrizmDataListComponent,
+    PrizmCheckboxComponent,
     PrizmLifecycleModule,
-    PrizmDropdownHostModule,
+    PrizmDropdownHostComponent,
   ],
   providers: [
     {
diff --git a/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less b/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less
index 13c847a1ef..e746d91511 100644
--- a/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less
+++ b/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less
@@ -16,11 +16,11 @@
   display: flex;
   align-items: center;
   padding: var(--prizm-select-item-padding, 8px 16px);
-  background: var(--prizm-select-item-background, var(--prizm-bg-body));
+  background: var(--prizm-select-item-background, var(--prizm-v3-background-fill-overlay));
   cursor: pointer;
   font-weight: var(--prizm-select-item-font-weight, 400);
   font-size: var(--prizm-select-item-font-size, 14px);
-  color: var(--prizm-select-item-text, var(--prizm-text-contrast, #20222b));
+  color: var(--prizm-select-item-text, var(--prizm-v3-text-icon-primary));
 
   &:empty {
     display: none;
@@ -35,18 +35,18 @@
 
   &.selected,
   &.most-relevant {
-    background: var(--prizm-select-item-selected-background, var(--prizm-lite-b130-20));
-    color: var(--prizm-text-contrast);
+    background: var(--prizm-select-item-selected-background, var(--prizm-v3-table-fill-row-active));
+    color: var(--prizm-v3-text-icon-primary);
   }
 
   &:not(.selected):not(.most-relevant):hover {
-    background: var(--prizm-select-item-hover-background, var(--prizm-g2-g11));
-    color: var(--prizm-text-contrast);
+    background: var(--prizm-select-item-hover-background, var(--prizm-v3-table-fill-row-hover));
+    color: var(--prizm-v3-text-icon-primary);
   }
 }
 
 .block {
-  background: var(--prizm-select-background, var(--prizm-bg-body));
+  background: var(--prizm-select-background, var(--prizm-v3-background-fill-overlay));
   border-radius: 2px;
   border: none;
   padding: var(--prizm-select-padding, 8px 0);
@@ -58,14 +58,14 @@
 
 .empty-template {
   padding: var(--prizm-select-item-padding, 8px 16px);
-  background: var(--prizm-select-item-background, var(--prizm-bg-body));
+  background: var(--prizm-select-item-background, var(--prizm-v3-background-fill-overlay));
   font-weight: var(--prizm-select-item-font-weight, 400);
   font-size: var(--prizm-select-item-font-size, 14px);
-  color: var(--prizm-select-empty-text, var(--prizm-text-subscript, #20222b));
+  color: var(--prizm-select-empty-text, var(--prizm-v3-text-icon-secondary));
 }
 
 .icon-dropdown {
-  color: #777b92;
+  color: var(--prizm-v3-button-secondary-solid-default);
   cursor: pointer;
   transition-property: transform;
   transition-property: all;
@@ -78,7 +78,7 @@
   }
 
   &.active {
-    color: #337eff;
+    color: var(--prizm-v3-button-primary-solid-active);
   }
 }
 
diff --git a/libs/components/src/lib/components/input/carousel/input-carousel.component.less b/libs/components/src/lib/components/input/carousel/input-carousel.component.less
index 60aa96c05f..aaf3f8ae99 100644
--- a/libs/components/src/lib/components/input/carousel/input-carousel.component.less
+++ b/libs/components/src/lib/components/input/carousel/input-carousel.component.less
@@ -6,11 +6,11 @@
   height: 100%;
   line-height: 16px;
   font-size: 14px;
-  color: var(--prizm-text-contrast);
+  color: var(--prizm-v3-text-icon-primary);
   display: block;
 
   &:focus {
-    outline: var(--prizm-index-plan) 1px solid;
+    outline: var(--prizm-v3-background-stroke-focus) 1px solid;
   }
 }
 
diff --git a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
index 322e33a5a6..747336a06e 100644
--- a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
+++ b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
@@ -13,7 +13,7 @@
   color: var(--prizm-v3-text-icon-secondary);
 
   &.disabled {
-    color: var();
+    color: var(--prizm-v3-text-icon-disable);
     pointer-events: none;
     cursor: not-allowed;
   }
diff --git a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.html b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.html
index b50a626872..8734ec36f5 100644
--- a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.html
+++ b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.html
@@ -15,16 +15,13 @@
 <ng-template #dropdown>
   <prizm-data-list class="block">
     <ng-container *ngIf="items?.length">
-      <div
-        class="item"
+      <prizm-listing-item
         *ngFor="let item of items; let idx = index"
-        [class.selected]="idx === currentIdx"
+        [selected]="idx === currentIdx"
         (click)="select(idx)"
       >
-        <span class="text">
-          {{ item.name }}
-        </span>
-      </div>
+        {{ item.name }}
+      </prizm-listing-item>
     </ng-container>
   </prizm-data-list>
 </ng-template>
diff --git a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.less b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.less
index b46f7cdfa2..8e47065db6 100644
--- a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.less
+++ b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.less
@@ -20,41 +20,6 @@
   pointer-events: auto;
 }
 
-.z-button {
-  display: flex;
-  height: 2.75rem;
-  justify-content: center;
-  box-shadow: inset 0 1px var(--prizm-base-03);
-
-  button {
-    flex: 1;
-    text-align: center;
-  }
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  padding: var(--prizm-select-item-padding, 8px 16px);
-  background: var(--prizm-select-item-background, var(--prizm-bg-body));
-  cursor: pointer;
-  font-weight: var(--prizm-select-item-font-weight, 400);
-  font-size: var(--prizm-select-item-font-size, 14px);
-  color: var(--prizm-select-item-text, var(--prizm-text-contrast, #20222b));
-
-  .text {
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &.selected {
-    background: var(--prizm-select-item-selected-background, var(--prizm-lite-b130-20));
-  }
-
-  &:not(.selected):hover {
-    background: var(--prizm-select-item-hover-background, var(--prizm-g2-g11));
-    color: var(--prizm-text-contrast);
-  }
+.block {
+  padding: 8px 0;
 }
diff --git a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.ts b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.ts
index 49469fbe1c..b1b21fc052 100644
--- a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.ts
+++ b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.ts
@@ -26,6 +26,7 @@ import { PolymorphOutletDirective, PrizmLifecycleModule } from '../../../directi
 import { ReactiveFormsModule } from '@angular/forms';
 import { PrizmDataListComponent } from '../../data-list';
 import { PrizmDropdownHostComponent } from '../../dropdowns/dropdown-host';
+import { PrizmListingItemComponent } from '../../listing-item';
 
 export type PrizmDateItemTemplate = {
   name: string;
@@ -46,6 +47,7 @@ export type PrizmDateItemTemplate = {
     PrizmDataListComponent,
     PolymorphOutletDirective,
     PrizmDropdownHostComponent,
+    PrizmListingItemComponent,
   ],
 })
 export class PrizmInputDateMultiComponent extends PrizmAbstractTestId implements OnInit {
diff --git a/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.html b/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.html
index 82e01666b5..244134fb47 100644
--- a/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.html
+++ b/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.html
@@ -22,29 +22,27 @@
 </prizm-dropdown-host>
 
 <ng-template #dropdown>
-  <ul class="prizm-datepicker-relative-menu" role="listbox">
+  <prizm-data-list class="block">
     <ng-container *ngTemplateOutlet="menuItemsTemplate; context: { items: timeItems }"></ng-container>
-    <li class="relative-menu-item-divider"></li>
+    <div class="relative-menu-item-divider"></div>
     <ng-container *ngTemplateOutlet="menuItemsTemplate; context: { items: directionItems }"></ng-container>
-    <li class="relative-menu-item-divider"></li>
+    <div class="relative-menu-item-divider"></div>
     <ng-container *ngTemplateOutlet="menuItemsTemplate; context: { items: periodItems }"></ng-container>
+  </prizm-data-list>
 
-    <ng-template #menuItemsTemplate let-items="items">
-      <li
-        class="relative-menu-item"
-        *ngFor="let item of items"
-        [class.relative-menu-item-active]="item.active"
-        (click)="onMenuItemClick($event, item)"
-        role="button"
-        tabindex="0"
-      >
-        <div class="relative-menu-item-icon">
-          <i class="prizm-icon {{ item.icon }}"></i>
-        </div>
-        <div class="relative-menu-item-label">{{ item.label }}</div>
-      </li>
-    </ng-template>
-  </ul>
+  <ng-template #menuItemsTemplate let-items="items">
+    <prizm-listing-item
+      *ngFor="let item of items"
+      [selected]="item.active"
+      (click)="onMenuItemClick($event, item)"
+      tabindex="0"
+    >
+      <ng-container leftBox>
+        <i class="prizm-icon relative-menu-icon {{ item.icon }}"></i>
+      </ng-container>
+      {{ item.label }}
+    </prizm-listing-item>
+  </ng-template>
 </ng-template>
 
 <ng-container *prizmInputLayoutRight>
diff --git a/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.less b/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.less
index 2c8aeb0f20..053976e9f5 100644
--- a/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.less
+++ b/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.less
@@ -8,40 +8,15 @@
   display: block;
 }
 
-.relative-menu-item {
-  height: 44px;
-  padding: 0 24px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-  &-icon {
-    font-size: 18px;
-    display: inherit;
-  }
-
-  &-label {
-    padding-left: 8px;
-  }
-
-  &-divider {
-    margin: 2px 0;
-    border-bottom: 1px solid var(--prizm-border-widget);
-  }
-
-  &:hover {
-    background: var(--prizm-bg-dashboard-forms);
-  }
-
-  &-active {
-    background: var(--prizm-select-item-selected-background, var(--prizm-lite-b130-20));
+.block {
+  padding: 8px 0;
+}
 
-    &:hover {
-      background: var(--prizm-select-item-selected-background, var(--prizm-lite-b130-20));
-    }
-  }
+.relative-menu-item-divider {
+  margin: 2px 0;
+  border-bottom: 1px solid var(--prizm-v3-background-stroke);
 }
 
-.prizm-datepicker-relative-menu {
-  color: var(--prizm-text-contrast);
+.relative-menu-icon {
+  color: var(--prizm-v3-text-icon-primary);
 }
diff --git a/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.ts b/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.ts
index b85333d985..c57fac95bb 100644
--- a/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.ts
+++ b/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.ts
@@ -37,6 +37,8 @@ import { PrizmInputTextModule } from '../input-text';
 import { PrizmIconComponent } from '../../icon';
 import { PrizmDropdownHostComponent } from '../../dropdowns/dropdown-host';
 import { PrizmInputLayoutDateRelativeDirective } from './input-layout-date-relative.directive';
+import { PrizmDataListComponent } from '../../data-list';
+import { PrizmListingItemComponent } from '../../listing-item';
 
 const MenuItems: RelativeDateMenuItems = getDefaultRelativeDateMenuItems();
 
@@ -67,6 +69,8 @@ const MenuItems: RelativeDateMenuItems = getDefaultRelativeDateMenuItems();
     ReactiveFormsModule,
     PrizmInputLayoutDateRelativeDirective,
     PrizmDropdownHostComponent,
+    PrizmDataListComponent,
+    PrizmListingItemComponent,
   ],
 })
 export class PrizmInputLayoutDateRelativeComponent
diff --git a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.html b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.html
index 0c2084a535..7f96c0ed47 100644
--- a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.html
+++ b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.html
@@ -104,16 +104,13 @@
     prizmLifecycle
   >
     <ng-container>
-      <div
-        class="time-item"
+      <prizm-listing-item
         *ngFor="let item of timeItems; let idx = index"
-        [class.selected]="value?.[1] && item.isSameTime($any(value?.[1]))"
+        [selected]="value?.[1] && item.isSameTime($any(value?.[1]))"
         (click)="$event.stopPropagation(); onTimeMenuClick(item, $event)"
       >
-        <span class="text">
-          {{ item }}
-        </span>
-      </div>
+        {{ item }}
+      </prizm-listing-item>
     </ng-container>
   </prizm-data-list>
 </ng-template>
diff --git a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.less b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.less
index f885040306..79ae29c248 100644
--- a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.less
+++ b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.less
@@ -18,39 +18,8 @@
   pointer-events: auto;
 }
 
-.z-button {
-  display: flex;
-  height: 2.75rem;
-  justify-content: center;
-  box-shadow: inset 0 1px var(--prizm-base-03);
-}
-
-.time-item {
-  display: flex;
-  align-items: center;
-  padding: var(--prizm-select-item-padding, 8px 16px);
-  background: var(--prizm-select-item-background, var(--prizm-bg-body));
-  cursor: pointer;
-  font-weight: var(--prizm-select-item-font-weight, 400);
-  font-size: var(--prizm-select-item-font-size, 14px);
-  color: var(--prizm-select-item-text, var(--prizm-text-contrast, #20222b));
-
-  .text {
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &.selected {
-    background: var(--prizm-select-item-selected-background, var(--prizm-lite-b130-20));
-    color: var(--prizm-text-contrast);
-  }
-
-  &:not(.selected):hover {
-    background: var(--prizm-select-item-hover-background, var(--prizm-g2-g11));
-    color: var(--prizm-text-contrast);
-  }
+.block {
+  padding: 8px 0;
 }
 
 input {
diff --git a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.ts b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.ts
index 107b500842..839a06bbb4 100644
--- a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.ts
+++ b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.ts
@@ -57,6 +57,7 @@ import { PrizmPreventDefaultModule } from '../../../directives/prevent-default/p
 import { PrizmCalendarComponent } from '../../calendar';
 import { PrizmLinkComponent } from '../../link';
 import { PrizmValueAccessorModule } from '../../../directives/value-accessor/value-accessor.module';
+import { PrizmListingItemComponent } from '../../listing-item';
 
 @Component({
   selector: `prizm-input-layout-date-time`,
@@ -101,6 +102,7 @@ import { PrizmValueAccessorModule } from '../../../directives/value-accessor/val
     PrizmDropdownHostComponent,
     PrizmValueAccessorModule,
     PrizmInputNativeValueModule,
+    PrizmListingItemComponent,
   ],
 })
 export class PrizmInputLayoutDateTimeComponent
diff --git a/libs/components/src/lib/components/input/input-date/input-layout-date.component.less b/libs/components/src/lib/components/input/input-date/input-layout-date.component.less
index 6cb015b2db..519860f8ff 100644
--- a/libs/components/src/lib/components/input/input-date/input-layout-date.component.less
+++ b/libs/components/src/lib/components/input/input-date/input-layout-date.component.less
@@ -22,7 +22,7 @@
   display: flex;
   height: 2.75rem;
   justify-content: center;
-  box-shadow: inset 0 1px var(--prizm-base-03);
+  box-shadow: inset 0 1px var(--prizm-v3-background-stroke);
 
   button {
     flex: 1;
diff --git a/libs/components/src/lib/components/input/input-password/input-password-auxiliary-control.component.ts b/libs/components/src/lib/components/input/input-password/input-password-auxiliary-control.component.ts
index 70ef563184..cae191b003 100644
--- a/libs/components/src/lib/components/input/input-password/input-password-auxiliary-control.component.ts
+++ b/libs/components/src/lib/components/input/input-password/input-password-auxiliary-control.component.ts
@@ -1,16 +1,5 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
 import { PrizmDestroyService } from '@prizm-ui/helpers';
-import { fromEvent, merge } from 'rxjs';
-import { switchMap, take, takeUntil, tap } from 'rxjs/operators';
-
 import { PrizmInputLayoutComponent } from '../common/input-layout/input-layout.component';
 import { PrizmInputPasswordDirective } from './input-password.directive';
 
diff --git a/libs/components/src/lib/components/input/input-password/input-password.directive.ts b/libs/components/src/lib/components/input/input-password/input-password.directive.ts
index 3bd16ac6a3..9161543b56 100644
--- a/libs/components/src/lib/components/input/input-password/input-password.directive.ts
+++ b/libs/components/src/lib/components/input/input-password/input-password.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Host, HostBinding } from '@angular/core';
+import { Directive, ElementRef, Host } from '@angular/core';
 import { PrizmInputTextComponent } from '../input-text/input-text.component';
 import { PrizmAbstractTestId } from '../../../abstract/interactive';
 
diff --git a/libs/components/src/lib/components/input/input-time/input-layout-time.component.html b/libs/components/src/lib/components/input/input-time/input-layout-time.component.html
index e1c212aac8..00e465ec26 100644
--- a/libs/components/src/lib/components/input/input-time/input-layout-time.component.html
+++ b/libs/components/src/lib/components/input/input-time/input-layout-time.component.html
@@ -29,16 +29,12 @@
 <ng-template #dropdownContent>
   <prizm-data-list class="block" [style.--prizm-data-list-border]="0" (prizmAfterViewInit)="markAsTouched()">
     <ng-container *ngIf="items?.length">
-      <div
-        class="item"
+      <prizm-listing-item
         *ngFor="let item of filtered; let idx = index"
-        [class.selected]="value && item.isSameTime(value)"
+        [selected]="value && item.isSameTime(value)"
         (click)="onMenuClick(item)"
-      >
-        <span class="text">
-          {{ item }}
-        </span>
-      </div>
+        >{{ item }}
+      </prizm-listing-item>
     </ng-container>
   </prizm-data-list>
 </ng-template>
diff --git a/libs/components/src/lib/components/input/input-time/input-layout-time.component.less b/libs/components/src/lib/components/input/input-time/input-layout-time.component.less
index 24044e6b75..79620bd4ef 100644
--- a/libs/components/src/lib/components/input/input-time/input-layout-time.component.less
+++ b/libs/components/src/lib/components/input/input-time/input-layout-time.component.less
@@ -4,30 +4,6 @@
   display: block;
 }
 
-.item {
-  display: flex;
-  align-items: center;
-  padding: var(--prizm-select-item-padding, 8px 16px);
-  background: var(--prizm-select-item-background, var(--prizm-bg-body));
-  cursor: pointer;
-  font-weight: var(--prizm-select-item-font-weight, 400);
-  font-size: var(--prizm-select-item-font-size, 14px);
-  color: var(--prizm-select-item-text, var(--prizm-text-contrast, #20222b));
-
-  .text {
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &.selected {
-    background: var(--prizm-select-item-selected-background, var(--prizm-lite-b130-20));
-    color: var(--prizm-text-contrast);
-  }
-
-  &:not(.selected):hover {
-    background: var(--prizm-select-item-hover-background, var(--prizm-g2-g11));
-    color: var(--prizm-text-contrast);
-  }
+.block {
+  padding: 8px 0;
 }
diff --git a/libs/components/src/lib/components/input/input-time/input-layout-time.component.ts b/libs/components/src/lib/components/input/input-time/input-layout-time.component.ts
index 63735a7bcd..cb0816f402 100644
--- a/libs/components/src/lib/components/input/input-time/input-layout-time.component.ts
+++ b/libs/components/src/lib/components/input/input-time/input-layout-time.component.ts
@@ -36,10 +36,11 @@ import {
   PrizmValueAccessorModule,
 } from '../../../directives';
 import { PrizmMaskModule } from '../../../modules';
-import { PrizmDataListModule } from '../../data-list';
-import { PrizmDropdownHostModule } from '../../dropdowns/dropdown-host';
+import { PrizmDataListComponent } from '../../data-list';
+import { PrizmDropdownHostComponent } from '../../dropdowns/dropdown-host';
 import { PrizmInputTextModule } from '../input-text';
-import { PrizmButtonModule } from '../../button';
+import { PrizmButtonComponent } from '../../button';
+import { PrizmListingItemComponent } from '../../listing-item';
 
 @Component({
   selector: `prizm-input-layout-time`,
@@ -62,13 +63,14 @@ import { PrizmButtonModule } from '../../button';
     CommonModule,
     PrizmLifecycleModule,
     PrizmMaskModule,
-    PrizmDataListModule,
+    PrizmDataListComponent,
     PrizmDropdownControllerModule,
-    PrizmDropdownHostModule,
+    PrizmDropdownHostComponent,
     PrizmInputTextModule,
-    PrizmButtonModule,
+    PrizmButtonComponent,
     FormsModule,
     PrizmValueAccessorModule,
+    PrizmListingItemComponent,
   ],
 })
 export class PrizmInputLayoutTimeComponent extends PrizmInputNgControl<PrizmTime | null> {

From 1c8d15fa6ef9debf13c24cffb3678aaede6cf3e5 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Fri, 24 Nov 2023 10:27:53 +0300
Subject: [PATCH 23/49] feat: update colors to v3 for controls #1064

---
 .../input-multi-select.component.less         | 22 +++++-----
 .../input-multi-select.component.ts           | 11 +++--
 .../select/input-select-item.component.less   | 22 +++++-----
 .../carousel/input-carousel.component.less    |  4 +-
 .../input-icon-button.component.less          |  2 +-
 .../input-date-multi.component.html           | 11 ++---
 .../input-date-multi.component.less           | 39 +-----------------
 .../input-date-multi.component.ts             |  2 +
 .../input-layout-date-relative.component.html | 36 ++++++++--------
 .../input-layout-date-relative.component.less | 41 ++++---------------
 .../input-layout-date-relative.component.ts   |  4 ++
 .../input-layout-date-time.component.html     | 11 ++---
 .../input-layout-date-time.component.less     | 35 +---------------
 .../input-layout-date-time.component.ts       |  2 +
 .../input-layout-date.component.less          |  2 +-
 ...ut-password-auxiliary-control.component.ts | 13 +-----
 .../input-password.directive.ts               |  2 +-
 .../input-layout-time.component.html          | 12 ++----
 .../input-layout-time.component.less          | 28 +------------
 .../input-time/input-layout-time.component.ts | 14 ++++---
 20 files changed, 92 insertions(+), 221 deletions(-)

diff --git a/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less b/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less
index 06de3f4334..ccaa786f33 100644
--- a/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less
+++ b/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less
@@ -9,12 +9,12 @@
   display: flex;
   align-items: center;
   padding: var(--prizm-select-item-padding, 8px 16px);
-  background: var(--prizm-select-item-background, var(--prizm-bg-body));
+  background: var(--prizm-select-item-background, var(--prizm-v3-background-fill-overlay));
   cursor: pointer;
   font-weight: var(--prizm-select-item-font-weight, 400);
   font-size: var(--prizm-select-item-font-size, 14px);
   gap: var(--prizm-select-item-gap, 8px);
-  color: var(--prizm-select-item-text, var(--prizm-text-contrast, #20222b));
+  color: var(--prizm-select-item-text, var(--prizm-v3-text-icon-primary));
 
   .text {
     max-width: calc(100% - 16px);
@@ -26,21 +26,21 @@
 
   &.selected,
   &.most-relevant {
-    background: var(--prizm-select-item-selected-background, var(--prizm-lite-b130-20));
+    background: var(--prizm-select-item-selected-background, var(--prizm-v3-table-fill-row-active));
 
     .text {
-      color: var(--prizm-text-contrast);
+      color: var(--prizm-v3-text-icon-primary);
     }
   }
 
   &:not(.selected):not(.most-relevant):hover {
-    background: var(--prizm-select-item-hover-background, var(--prizm-g2-g11));
-    color: var(--prizm-text-contrast);
+    background: var(--prizm-select-item-hover-background, var(--prizm-v3-table-fill-row-hover));
+    color: var(--prizm-v3-text-icon-primary);
   }
 }
 
 .block {
-  background: var(--prizm-select-background, var(--prizm-bg-body));
+  background: var(--prizm-select-background, var(--prizm-v3-background-fill-overlay));
   border-radius: 2px;
   border: none;
   padding: var(--prizm-select-padding, 8px 0);
@@ -52,14 +52,14 @@
 
 .empty-template {
   padding: var(--prizm-select-item-padding, 8px 16px);
-  background: var(--prizm-select-item-background, var(--prizm-bg-body));
+  background: var(--prizm-select-item-background, var(--prizm-v3-background-fill-overlay));
   font-weight: var(--prizm-select-item-font-weight, 400);
   font-size: var(--prizm-select-item-font-size, 14px);
-  color: var(--prizm-select-empty-text, var(--prizm-text-subscript, #20222b));
+  color: var(--prizm-select-empty-text, var(--prizm-v3-text-icon-secondary));
 }
 
 .icon-dropdown {
-  color: #777b92;
+  color: var(--prizm-v3-button-secondary-solid-default);
   cursor: pointer;
   transition-property: transform;
   transition-property: all;
@@ -68,7 +68,7 @@
   transition-timing-function: ease-in-out;
 
   &.active {
-    color: #337eff;
+    color: var(--prizm-v3-button-primary-solid-active);
   }
 
   &.opened {
diff --git a/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.ts b/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.ts
index 229bf626af..3db706b48a 100644
--- a/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.ts
+++ b/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.ts
@@ -30,7 +30,6 @@ import { prizmDefaultProp } from '@prizm-ui/core';
 import {
   PrizmDropdownHostClasses,
   PrizmDropdownHostComponent,
-  PrizmDropdownHostModule,
   PrizmDropdownHostStyles,
 } from '../dropdown-host';
 import {
@@ -45,8 +44,8 @@ import { PrizmOverlayModule } from '../../../modules';
 import { PrizmChipsModule } from '../../chips';
 import { CommonModule } from '@angular/common';
 import { PrizmIconModule } from '../../icon';
-import { PrizmDataListModule } from '../../data-list';
-import { PrizmCheckboxModule } from '../../checkbox';
+import { PrizmDataListComponent } from '../../data-list';
+import { PrizmCheckboxComponent } from '../../checkbox';
 
 // TODO create abstract select component and move to abstract common logic
 @Component({
@@ -70,10 +69,10 @@ import { PrizmCheckboxModule } from '../../checkbox';
     PrizmAutoFocusModule,
     PrizmScrollbarModule,
     PrizmDropdownControllerModule,
-    PrizmDataListModule,
-    PrizmCheckboxModule,
+    PrizmDataListComponent,
+    PrizmCheckboxComponent,
     PrizmLifecycleModule,
-    PrizmDropdownHostModule,
+    PrizmDropdownHostComponent,
   ],
   providers: [
     {
diff --git a/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less b/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less
index 13c847a1ef..e746d91511 100644
--- a/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less
+++ b/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less
@@ -16,11 +16,11 @@
   display: flex;
   align-items: center;
   padding: var(--prizm-select-item-padding, 8px 16px);
-  background: var(--prizm-select-item-background, var(--prizm-bg-body));
+  background: var(--prizm-select-item-background, var(--prizm-v3-background-fill-overlay));
   cursor: pointer;
   font-weight: var(--prizm-select-item-font-weight, 400);
   font-size: var(--prizm-select-item-font-size, 14px);
-  color: var(--prizm-select-item-text, var(--prizm-text-contrast, #20222b));
+  color: var(--prizm-select-item-text, var(--prizm-v3-text-icon-primary));
 
   &:empty {
     display: none;
@@ -35,18 +35,18 @@
 
   &.selected,
   &.most-relevant {
-    background: var(--prizm-select-item-selected-background, var(--prizm-lite-b130-20));
-    color: var(--prizm-text-contrast);
+    background: var(--prizm-select-item-selected-background, var(--prizm-v3-table-fill-row-active));
+    color: var(--prizm-v3-text-icon-primary);
   }
 
   &:not(.selected):not(.most-relevant):hover {
-    background: var(--prizm-select-item-hover-background, var(--prizm-g2-g11));
-    color: var(--prizm-text-contrast);
+    background: var(--prizm-select-item-hover-background, var(--prizm-v3-table-fill-row-hover));
+    color: var(--prizm-v3-text-icon-primary);
   }
 }
 
 .block {
-  background: var(--prizm-select-background, var(--prizm-bg-body));
+  background: var(--prizm-select-background, var(--prizm-v3-background-fill-overlay));
   border-radius: 2px;
   border: none;
   padding: var(--prizm-select-padding, 8px 0);
@@ -58,14 +58,14 @@
 
 .empty-template {
   padding: var(--prizm-select-item-padding, 8px 16px);
-  background: var(--prizm-select-item-background, var(--prizm-bg-body));
+  background: var(--prizm-select-item-background, var(--prizm-v3-background-fill-overlay));
   font-weight: var(--prizm-select-item-font-weight, 400);
   font-size: var(--prizm-select-item-font-size, 14px);
-  color: var(--prizm-select-empty-text, var(--prizm-text-subscript, #20222b));
+  color: var(--prizm-select-empty-text, var(--prizm-v3-text-icon-secondary));
 }
 
 .icon-dropdown {
-  color: #777b92;
+  color: var(--prizm-v3-button-secondary-solid-default);
   cursor: pointer;
   transition-property: transform;
   transition-property: all;
@@ -78,7 +78,7 @@
   }
 
   &.active {
-    color: #337eff;
+    color: var(--prizm-v3-button-primary-solid-active);
   }
 }
 
diff --git a/libs/components/src/lib/components/input/carousel/input-carousel.component.less b/libs/components/src/lib/components/input/carousel/input-carousel.component.less
index 60aa96c05f..aaf3f8ae99 100644
--- a/libs/components/src/lib/components/input/carousel/input-carousel.component.less
+++ b/libs/components/src/lib/components/input/carousel/input-carousel.component.less
@@ -6,11 +6,11 @@
   height: 100%;
   line-height: 16px;
   font-size: 14px;
-  color: var(--prizm-text-contrast);
+  color: var(--prizm-v3-text-icon-primary);
   display: block;
 
   &:focus {
-    outline: var(--prizm-index-plan) 1px solid;
+    outline: var(--prizm-v3-background-stroke-focus) 1px solid;
   }
 }
 
diff --git a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
index 322e33a5a6..747336a06e 100644
--- a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
+++ b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
@@ -13,7 +13,7 @@
   color: var(--prizm-v3-text-icon-secondary);
 
   &.disabled {
-    color: var();
+    color: var(--prizm-v3-text-icon-disable);
     pointer-events: none;
     cursor: not-allowed;
   }
diff --git a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.html b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.html
index b50a626872..8734ec36f5 100644
--- a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.html
+++ b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.html
@@ -15,16 +15,13 @@
 <ng-template #dropdown>
   <prizm-data-list class="block">
     <ng-container *ngIf="items?.length">
-      <div
-        class="item"
+      <prizm-listing-item
         *ngFor="let item of items; let idx = index"
-        [class.selected]="idx === currentIdx"
+        [selected]="idx === currentIdx"
         (click)="select(idx)"
       >
-        <span class="text">
-          {{ item.name }}
-        </span>
-      </div>
+        {{ item.name }}
+      </prizm-listing-item>
     </ng-container>
   </prizm-data-list>
 </ng-template>
diff --git a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.less b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.less
index b46f7cdfa2..8e47065db6 100644
--- a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.less
+++ b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.less
@@ -20,41 +20,6 @@
   pointer-events: auto;
 }
 
-.z-button {
-  display: flex;
-  height: 2.75rem;
-  justify-content: center;
-  box-shadow: inset 0 1px var(--prizm-base-03);
-
-  button {
-    flex: 1;
-    text-align: center;
-  }
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  padding: var(--prizm-select-item-padding, 8px 16px);
-  background: var(--prizm-select-item-background, var(--prizm-bg-body));
-  cursor: pointer;
-  font-weight: var(--prizm-select-item-font-weight, 400);
-  font-size: var(--prizm-select-item-font-size, 14px);
-  color: var(--prizm-select-item-text, var(--prizm-text-contrast, #20222b));
-
-  .text {
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &.selected {
-    background: var(--prizm-select-item-selected-background, var(--prizm-lite-b130-20));
-  }
-
-  &:not(.selected):hover {
-    background: var(--prizm-select-item-hover-background, var(--prizm-g2-g11));
-    color: var(--prizm-text-contrast);
-  }
+.block {
+  padding: 8px 0;
 }
diff --git a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.ts b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.ts
index 49469fbe1c..b1b21fc052 100644
--- a/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.ts
+++ b/libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.ts
@@ -26,6 +26,7 @@ import { PolymorphOutletDirective, PrizmLifecycleModule } from '../../../directi
 import { ReactiveFormsModule } from '@angular/forms';
 import { PrizmDataListComponent } from '../../data-list';
 import { PrizmDropdownHostComponent } from '../../dropdowns/dropdown-host';
+import { PrizmListingItemComponent } from '../../listing-item';
 
 export type PrizmDateItemTemplate = {
   name: string;
@@ -46,6 +47,7 @@ export type PrizmDateItemTemplate = {
     PrizmDataListComponent,
     PolymorphOutletDirective,
     PrizmDropdownHostComponent,
+    PrizmListingItemComponent,
   ],
 })
 export class PrizmInputDateMultiComponent extends PrizmAbstractTestId implements OnInit {
diff --git a/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.html b/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.html
index 82e01666b5..244134fb47 100644
--- a/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.html
+++ b/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.html
@@ -22,29 +22,27 @@
 </prizm-dropdown-host>
 
 <ng-template #dropdown>
-  <ul class="prizm-datepicker-relative-menu" role="listbox">
+  <prizm-data-list class="block">
     <ng-container *ngTemplateOutlet="menuItemsTemplate; context: { items: timeItems }"></ng-container>
-    <li class="relative-menu-item-divider"></li>
+    <div class="relative-menu-item-divider"></div>
     <ng-container *ngTemplateOutlet="menuItemsTemplate; context: { items: directionItems }"></ng-container>
-    <li class="relative-menu-item-divider"></li>
+    <div class="relative-menu-item-divider"></div>
     <ng-container *ngTemplateOutlet="menuItemsTemplate; context: { items: periodItems }"></ng-container>
+  </prizm-data-list>
 
-    <ng-template #menuItemsTemplate let-items="items">
-      <li
-        class="relative-menu-item"
-        *ngFor="let item of items"
-        [class.relative-menu-item-active]="item.active"
-        (click)="onMenuItemClick($event, item)"
-        role="button"
-        tabindex="0"
-      >
-        <div class="relative-menu-item-icon">
-          <i class="prizm-icon {{ item.icon }}"></i>
-        </div>
-        <div class="relative-menu-item-label">{{ item.label }}</div>
-      </li>
-    </ng-template>
-  </ul>
+  <ng-template #menuItemsTemplate let-items="items">
+    <prizm-listing-item
+      *ngFor="let item of items"
+      [selected]="item.active"
+      (click)="onMenuItemClick($event, item)"
+      tabindex="0"
+    >
+      <ng-container leftBox>
+        <i class="prizm-icon relative-menu-icon {{ item.icon }}"></i>
+      </ng-container>
+      {{ item.label }}
+    </prizm-listing-item>
+  </ng-template>
 </ng-template>
 
 <ng-container *prizmInputLayoutRight>
diff --git a/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.less b/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.less
index 2c8aeb0f20..053976e9f5 100644
--- a/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.less
+++ b/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.less
@@ -8,40 +8,15 @@
   display: block;
 }
 
-.relative-menu-item {
-  height: 44px;
-  padding: 0 24px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-  &-icon {
-    font-size: 18px;
-    display: inherit;
-  }
-
-  &-label {
-    padding-left: 8px;
-  }
-
-  &-divider {
-    margin: 2px 0;
-    border-bottom: 1px solid var(--prizm-border-widget);
-  }
-
-  &:hover {
-    background: var(--prizm-bg-dashboard-forms);
-  }
-
-  &-active {
-    background: var(--prizm-select-item-selected-background, var(--prizm-lite-b130-20));
+.block {
+  padding: 8px 0;
+}
 
-    &:hover {
-      background: var(--prizm-select-item-selected-background, var(--prizm-lite-b130-20));
-    }
-  }
+.relative-menu-item-divider {
+  margin: 2px 0;
+  border-bottom: 1px solid var(--prizm-v3-background-stroke);
 }
 
-.prizm-datepicker-relative-menu {
-  color: var(--prizm-text-contrast);
+.relative-menu-icon {
+  color: var(--prizm-v3-text-icon-primary);
 }
diff --git a/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.ts b/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.ts
index b85333d985..c57fac95bb 100644
--- a/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.ts
+++ b/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.ts
@@ -37,6 +37,8 @@ import { PrizmInputTextModule } from '../input-text';
 import { PrizmIconComponent } from '../../icon';
 import { PrizmDropdownHostComponent } from '../../dropdowns/dropdown-host';
 import { PrizmInputLayoutDateRelativeDirective } from './input-layout-date-relative.directive';
+import { PrizmDataListComponent } from '../../data-list';
+import { PrizmListingItemComponent } from '../../listing-item';
 
 const MenuItems: RelativeDateMenuItems = getDefaultRelativeDateMenuItems();
 
@@ -67,6 +69,8 @@ const MenuItems: RelativeDateMenuItems = getDefaultRelativeDateMenuItems();
     ReactiveFormsModule,
     PrizmInputLayoutDateRelativeDirective,
     PrizmDropdownHostComponent,
+    PrizmDataListComponent,
+    PrizmListingItemComponent,
   ],
 })
 export class PrizmInputLayoutDateRelativeComponent
diff --git a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.html b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.html
index 0c2084a535..7f96c0ed47 100644
--- a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.html
+++ b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.html
@@ -104,16 +104,13 @@
     prizmLifecycle
   >
     <ng-container>
-      <div
-        class="time-item"
+      <prizm-listing-item
         *ngFor="let item of timeItems; let idx = index"
-        [class.selected]="value?.[1] && item.isSameTime($any(value?.[1]))"
+        [selected]="value?.[1] && item.isSameTime($any(value?.[1]))"
         (click)="$event.stopPropagation(); onTimeMenuClick(item, $event)"
       >
-        <span class="text">
-          {{ item }}
-        </span>
-      </div>
+        {{ item }}
+      </prizm-listing-item>
     </ng-container>
   </prizm-data-list>
 </ng-template>
diff --git a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.less b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.less
index f885040306..79ae29c248 100644
--- a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.less
+++ b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.less
@@ -18,39 +18,8 @@
   pointer-events: auto;
 }
 
-.z-button {
-  display: flex;
-  height: 2.75rem;
-  justify-content: center;
-  box-shadow: inset 0 1px var(--prizm-base-03);
-}
-
-.time-item {
-  display: flex;
-  align-items: center;
-  padding: var(--prizm-select-item-padding, 8px 16px);
-  background: var(--prizm-select-item-background, var(--prizm-bg-body));
-  cursor: pointer;
-  font-weight: var(--prizm-select-item-font-weight, 400);
-  font-size: var(--prizm-select-item-font-size, 14px);
-  color: var(--prizm-select-item-text, var(--prizm-text-contrast, #20222b));
-
-  .text {
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &.selected {
-    background: var(--prizm-select-item-selected-background, var(--prizm-lite-b130-20));
-    color: var(--prizm-text-contrast);
-  }
-
-  &:not(.selected):hover {
-    background: var(--prizm-select-item-hover-background, var(--prizm-g2-g11));
-    color: var(--prizm-text-contrast);
-  }
+.block {
+  padding: 8px 0;
 }
 
 input {
diff --git a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.ts b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.ts
index 107b500842..839a06bbb4 100644
--- a/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.ts
+++ b/libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.ts
@@ -57,6 +57,7 @@ import { PrizmPreventDefaultModule } from '../../../directives/prevent-default/p
 import { PrizmCalendarComponent } from '../../calendar';
 import { PrizmLinkComponent } from '../../link';
 import { PrizmValueAccessorModule } from '../../../directives/value-accessor/value-accessor.module';
+import { PrizmListingItemComponent } from '../../listing-item';
 
 @Component({
   selector: `prizm-input-layout-date-time`,
@@ -101,6 +102,7 @@ import { PrizmValueAccessorModule } from '../../../directives/value-accessor/val
     PrizmDropdownHostComponent,
     PrizmValueAccessorModule,
     PrizmInputNativeValueModule,
+    PrizmListingItemComponent,
   ],
 })
 export class PrizmInputLayoutDateTimeComponent
diff --git a/libs/components/src/lib/components/input/input-date/input-layout-date.component.less b/libs/components/src/lib/components/input/input-date/input-layout-date.component.less
index 6cb015b2db..519860f8ff 100644
--- a/libs/components/src/lib/components/input/input-date/input-layout-date.component.less
+++ b/libs/components/src/lib/components/input/input-date/input-layout-date.component.less
@@ -22,7 +22,7 @@
   display: flex;
   height: 2.75rem;
   justify-content: center;
-  box-shadow: inset 0 1px var(--prizm-base-03);
+  box-shadow: inset 0 1px var(--prizm-v3-background-stroke);
 
   button {
     flex: 1;
diff --git a/libs/components/src/lib/components/input/input-password/input-password-auxiliary-control.component.ts b/libs/components/src/lib/components/input/input-password/input-password-auxiliary-control.component.ts
index 70ef563184..cae191b003 100644
--- a/libs/components/src/lib/components/input/input-password/input-password-auxiliary-control.component.ts
+++ b/libs/components/src/lib/components/input/input-password/input-password-auxiliary-control.component.ts
@@ -1,16 +1,5 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
 import { PrizmDestroyService } from '@prizm-ui/helpers';
-import { fromEvent, merge } from 'rxjs';
-import { switchMap, take, takeUntil, tap } from 'rxjs/operators';
-
 import { PrizmInputLayoutComponent } from '../common/input-layout/input-layout.component';
 import { PrizmInputPasswordDirective } from './input-password.directive';
 
diff --git a/libs/components/src/lib/components/input/input-password/input-password.directive.ts b/libs/components/src/lib/components/input/input-password/input-password.directive.ts
index 3bd16ac6a3..9161543b56 100644
--- a/libs/components/src/lib/components/input/input-password/input-password.directive.ts
+++ b/libs/components/src/lib/components/input/input-password/input-password.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Host, HostBinding } from '@angular/core';
+import { Directive, ElementRef, Host } from '@angular/core';
 import { PrizmInputTextComponent } from '../input-text/input-text.component';
 import { PrizmAbstractTestId } from '../../../abstract/interactive';
 
diff --git a/libs/components/src/lib/components/input/input-time/input-layout-time.component.html b/libs/components/src/lib/components/input/input-time/input-layout-time.component.html
index e1c212aac8..00e465ec26 100644
--- a/libs/components/src/lib/components/input/input-time/input-layout-time.component.html
+++ b/libs/components/src/lib/components/input/input-time/input-layout-time.component.html
@@ -29,16 +29,12 @@
 <ng-template #dropdownContent>
   <prizm-data-list class="block" [style.--prizm-data-list-border]="0" (prizmAfterViewInit)="markAsTouched()">
     <ng-container *ngIf="items?.length">
-      <div
-        class="item"
+      <prizm-listing-item
         *ngFor="let item of filtered; let idx = index"
-        [class.selected]="value && item.isSameTime(value)"
+        [selected]="value && item.isSameTime(value)"
         (click)="onMenuClick(item)"
-      >
-        <span class="text">
-          {{ item }}
-        </span>
-      </div>
+        >{{ item }}
+      </prizm-listing-item>
     </ng-container>
   </prizm-data-list>
 </ng-template>
diff --git a/libs/components/src/lib/components/input/input-time/input-layout-time.component.less b/libs/components/src/lib/components/input/input-time/input-layout-time.component.less
index 24044e6b75..79620bd4ef 100644
--- a/libs/components/src/lib/components/input/input-time/input-layout-time.component.less
+++ b/libs/components/src/lib/components/input/input-time/input-layout-time.component.less
@@ -4,30 +4,6 @@
   display: block;
 }
 
-.item {
-  display: flex;
-  align-items: center;
-  padding: var(--prizm-select-item-padding, 8px 16px);
-  background: var(--prizm-select-item-background, var(--prizm-bg-body));
-  cursor: pointer;
-  font-weight: var(--prizm-select-item-font-weight, 400);
-  font-size: var(--prizm-select-item-font-size, 14px);
-  color: var(--prizm-select-item-text, var(--prizm-text-contrast, #20222b));
-
-  .text {
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &.selected {
-    background: var(--prizm-select-item-selected-background, var(--prizm-lite-b130-20));
-    color: var(--prizm-text-contrast);
-  }
-
-  &:not(.selected):hover {
-    background: var(--prizm-select-item-hover-background, var(--prizm-g2-g11));
-    color: var(--prizm-text-contrast);
-  }
+.block {
+  padding: 8px 0;
 }
diff --git a/libs/components/src/lib/components/input/input-time/input-layout-time.component.ts b/libs/components/src/lib/components/input/input-time/input-layout-time.component.ts
index 63735a7bcd..cb0816f402 100644
--- a/libs/components/src/lib/components/input/input-time/input-layout-time.component.ts
+++ b/libs/components/src/lib/components/input/input-time/input-layout-time.component.ts
@@ -36,10 +36,11 @@ import {
   PrizmValueAccessorModule,
 } from '../../../directives';
 import { PrizmMaskModule } from '../../../modules';
-import { PrizmDataListModule } from '../../data-list';
-import { PrizmDropdownHostModule } from '../../dropdowns/dropdown-host';
+import { PrizmDataListComponent } from '../../data-list';
+import { PrizmDropdownHostComponent } from '../../dropdowns/dropdown-host';
 import { PrizmInputTextModule } from '../input-text';
-import { PrizmButtonModule } from '../../button';
+import { PrizmButtonComponent } from '../../button';
+import { PrizmListingItemComponent } from '../../listing-item';
 
 @Component({
   selector: `prizm-input-layout-time`,
@@ -62,13 +63,14 @@ import { PrizmButtonModule } from '../../button';
     CommonModule,
     PrizmLifecycleModule,
     PrizmMaskModule,
-    PrizmDataListModule,
+    PrizmDataListComponent,
     PrizmDropdownControllerModule,
-    PrizmDropdownHostModule,
+    PrizmDropdownHostComponent,
     PrizmInputTextModule,
-    PrizmButtonModule,
+    PrizmButtonComponent,
     FormsModule,
     PrizmValueAccessorModule,
+    PrizmListingItemComponent,
   ],
 })
 export class PrizmInputLayoutTimeComponent extends PrizmInputNgControl<PrizmTime | null> {

From 08955d89dcfc8d106d4bb627c258488e49799e2d Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 28 Nov 2023 13:44:23 +0300
Subject: [PATCH 24/49] feat: table colors v 3 in progress #1093

---
 .../table/table-example.component.html         | 11 ++++++++++-
 .../table/table-example.component.ts           |  1 +
 .../table/tbody/tbody.component.less           |  8 ++++----
 .../lib/components/table/td/td.component.less  | 18 +++++++-----------
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/apps/doc/src/app/components/table/table-example.component.html b/apps/doc/src/app/components/table/table-example.component.html
index 07c0e6c7b9..735c2c198a 100644
--- a/apps/doc/src/app/components/table/table-example.component.html
+++ b/apps/doc/src/app/components/table/table-example.component.html
@@ -112,6 +112,7 @@
           [style.--prizm-table-row-hover-background]="prizmTableRowHoverBackground"
           [style.--prizm-table-row-background]="prizmTableRowBackground"
           [style.--prizm-table-row-cursor]="prizmTableRowCursor"
+          [style.--prizm-table-active-row-marker-color]="prizmTableActiveRowMarkerColor"
           [columns]="columns"
           [size]="size"
           [tableBorderStyle]="borderStyle"
@@ -128,7 +129,7 @@
 
           <tbody [data]="products" [open]="open" prizmTbody>
             <ng-container *prizmRow="let item of products; let i = index">
-              <tr prizmTr>
+              <tr [active]="i === 2" prizmTr>
                 <td class="format__number" *prizmCell="'code'" prizmTd>
                   {{ item.code | spaceNumber : '0.0-0' }}
                 </td>
@@ -184,6 +185,14 @@
       >
         Row cursor
       </ng-template>
+      <ng-template
+        [(documentationPropertyValue)]="prizmTableActiveRowMarkerColor"
+        documentationPropertyName="prizm-table-active-row-marker-color"
+        documentationPropertyType="string"
+        documentationPropertyMode="css-var"
+      >
+        Active row marker background color
+      </ng-template>
     </prizm-doc-documentation>
     <prizm-doc-documentation [hasTestId]="false" heading="PrizmTbodyComponent">
       <ng-template
diff --git a/apps/doc/src/app/components/table/table-example.component.ts b/apps/doc/src/app/components/table/table-example.component.ts
index 5b06308855..2c0c5ef53a 100644
--- a/apps/doc/src/app/components/table/table-example.component.ts
+++ b/apps/doc/src/app/components/table/table-example.component.ts
@@ -16,6 +16,7 @@ export class TableExampleComponent {
   public prizmTableRowBackground: string | null = null;
   public prizmTableRowCursor = 'pointer';
   public prizmTableRowHoverBackground: string | null = null;
+  public prizmTableActiveRowMarkerColor: string | null = null;
   public columns: string[] = ['code', 'name', 'category', 'count'];
   public columnsVarians: string[][] = [
     ['code', 'name'],
diff --git a/libs/components/src/lib/components/table/tbody/tbody.component.less b/libs/components/src/lib/components/table/tbody/tbody.component.less
index 085a7c1d64..eb79e31bf5 100644
--- a/libs/components/src/lib/components/table/tbody/tbody.component.less
+++ b/libs/components/src/lib/components/table/tbody/tbody.component.less
@@ -6,13 +6,13 @@
 :host {
   font-size: 14px;
   line-height: 16px;
-  color: var(--prizm-text-contrast);
+  color: var(--prizm-v3-text-icon-secondary);
   font-weight: 400;
 
   .heading {
     padding: 0;
 
-    border: 1px solid var(--prizm-border-widget);
+    border: 1px solid var(--prizm-v3-table-stroke-cell-default);
     border-top: none;
 
     &__container {
@@ -34,7 +34,7 @@
       align-items: center;
       justify-content: center;
 
-      color: var(--prizm-border-icon);
+      color: var(--prizm-v3-button-secondary-solid-default);
 
       cursor: pointer;
 
@@ -58,7 +58,7 @@
 
 .empty-row {
   td {
-    border: 1px solid var(--prizm-border-widget);
+    border: 1px solid var(--prizm-v3-table-stroke-cell-default);
     border-top: transparent;
   }
 }
diff --git a/libs/components/src/lib/components/table/td/td.component.less b/libs/components/src/lib/components/table/td/td.component.less
index 327213caaa..f1d3a197d7 100644
--- a/libs/components/src/lib/components/table/td/td.component.less
+++ b/libs/components/src/lib/components/table/td/td.component.less
@@ -6,7 +6,7 @@
 :host {
   padding: 0 8px;
   background: inherit;
-  border: 1px solid var(--prizm-border-widget);
+  border: 1px solid var(--prizm-v3-table-stroke-cell-default);
   border-top: none;
   z-index: 10;
 
@@ -32,31 +32,27 @@
   color: inherit;
 
   &[status='success'] {
-    background: var(--prizm-v2-table-background-success);
-    color: var(--prizm-v2-table-text-success);
+    background: var(--prizm-v3-status-success-secondary-default);
   }
   &[status='default'] {
     background: inherit;
-    color: var(--prizm-v2-table-text-default);
   }
 
   &[status='warning'] {
-    background: var(--prizm-v2-table-background-warning);
-    color: var(--prizm-v2-table-text-warning);
+    background: var(--prizm-v3-status-warning-secondary-default);
   }
 
   &[status='danger'] {
-    background: var(--prizm-v2-table-background-danger);
-    color: var(--prizm-v2-table-text-danger);
+    background: var(--prizm-v3-status-alarm-secondary-default);
   }
 }
 
 :host-context([active='true']) {
   &:first-child:before {
-    background: var(--prizm-index-plan);
+    background: var(--prizm-table-active-row-marker-color, var(--prizm-v3-status-info-primary-default));
   }
-  color: var(--prizm-v2-table-text-selected);
-  background: var(--prizm-v2-table-background-selected);
+
+  background: var(--prizm-v3-table-fill-row-active);
 }
 
 :host-context([border-style='vertical']) {

From c464b1c5c590c756b50ce02f724471112203a11e Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Wed, 29 Nov 2023 08:55:39 +0300
Subject: [PATCH 25/49] fix: small ui fixes #987

---
 .../primitive-spin-button/primitive-spin-button.component.less  | 2 --
 .../primitive-year-month-pagination.component.less              | 1 -
 libs/components/src/styles/mixins/picker.less                   | 1 +
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
index a3cdd3a714..72ec3fc53b 100644
--- a/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
+++ b/libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.less
@@ -15,8 +15,6 @@
 }
 
 .z-arrow {
-  margin: 0 @space;
-
   &_hidden {
     visibility: hidden;
   }
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
index 537a55bffe..ec3ea68130 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
@@ -12,7 +12,6 @@
   .year-month {
     display: flex;
     align-items: center;
-    gap: 8px;
     color: var(--prizm-v3-text-icon-secondary);
   }
 
diff --git a/libs/components/src/styles/mixins/picker.less b/libs/components/src/styles/mixins/picker.less
index 62b49b9304..bc4a6e220a 100644
--- a/libs/components/src/styles/mixins/picker.less
+++ b/libs/components/src/styles/mixins/picker.less
@@ -17,6 +17,7 @@
     line-height: 2rem;
     border-radius: 2px;
     color: var(--prizm-v3-text-icon-secondary);
+    font-weight: 600;
 
     &:before,
     &:after {

From 4ffc3ecf99c1a3a65a016f296050aa97a447b36d Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Wed, 29 Nov 2023 10:18:01 +0300
Subject: [PATCH 26/49] fix: focus on inputs #1077

---
 .../input/common/input-layout/input-layout.component.less | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
index 88959f8be9..8c0ab00f97 100644
--- a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
+++ b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
@@ -173,13 +173,13 @@
   }
 
   // rewrite all if focused
-  &-focused:host-context(.enabled),
-  &:focus-within:host-context(.enabled) {
-    border-color: var(--prizm-v3-background-stroke-focus);
+  &-focused,
+  &:focus-within {
+    border-color: var(--prizm-v3-form-active);
     box-shadow: 0 0 0 2px var(--prizm-v3-background-stroke-focus);
 
     &:hover {
-      border-color: var(--prizm-v3-background-stroke-focus);
+      border-color: var(--prizm-v3-form-active-hover);
     }
 
     .prizm-input-button-default {

From f4c620e9db2e4da5fee6c3124d866677dd0dda07 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Wed, 29 Nov 2023 11:07:54 +0300
Subject: [PATCH 27/49] feat: v3 colors for data list component #1098

---
 .../lib/components/data-list/data-list.component.less  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/libs/components/src/lib/components/data-list/data-list.component.less b/libs/components/src/lib/components/data-list/data-list.component.less
index 300aa818f2..8ee32821b5 100644
--- a/libs/components/src/lib/components/data-list/data-list.component.less
+++ b/libs/components/src/lib/components/data-list/data-list.component.less
@@ -10,19 +10,19 @@
   font-style: normal;
   font-size: 14px;
   line-height: 20px;
-  border: var(--prizm-data-list-border, 1px solid var(--prizm-border-widget));
+  border: var(--prizm-data-list-border, 1px solid var(--prizm-v3-background-stroke));
   border-left: var(--prizm-data-list-border-left);
   border-top: var(--prizm-data-list-border-top);
   border-right: var(--prizm-data-list-border-right);
   border-bottom: var(--prizm-data-list-border-bottom);
   border-radius: var(--prizm-data-list-border-radius, 2px);
   display: block;
-  background: var(--prizm-data-list-background, var(--prizm-bg-body));
+  background: var(--prizm-data-list-background, var(--prizm-v3-background-fill-overlay));
 
   .header {
-    color: var(--prizm-data-list-header-text, var(--prizm-text-subscript));
+    color: var(--prizm-data-list-header-text, var(--prizm-v3-text-icon-secondary));
     font-size: var(--prizm-data-list-header-text-size, 14px);
-    border-bottom: 1px solid var(--prizm-data-list-border, var(--prizm-border-widget));
+    border-bottom: 1px solid var(--prizm-data-list-border, var(--prizm-v3-background-stroke));
     font-weight: 600;
     padding: var(--prizm-data-list-padding, 16px);
   }
@@ -34,7 +34,7 @@
   }
 
   .footer {
-    border-top: 1px solid var(--prizm-data-list-border, var(--prizm-border-widget));
+    border-top: 1px solid var(--prizm-data-list-border, var(--prizm-v3-background-stroke));
     padding: var(--prizm-data-list-padding, 16px);
   }
 }

From c28b22ddc47a8860121dcc4246c90ef313bcd9d9 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Wed, 29 Nov 2023 12:50:34 +0300
Subject: [PATCH 28/49] fix: colors fix for inputs

---
 .../lib/components/input/carousel/input-carousel.component.less | 2 +-
 .../input-layout-date-relative.component.less                   | 2 +-
 .../primitive-calendar/primitive-calendar.component.less        | 2 +-
 .../src/lib/components/listing-item/listing-item.component.less | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/components/src/lib/components/input/carousel/input-carousel.component.less b/libs/components/src/lib/components/input/carousel/input-carousel.component.less
index aaf3f8ae99..30cb1f2e60 100644
--- a/libs/components/src/lib/components/input/carousel/input-carousel.component.less
+++ b/libs/components/src/lib/components/input/carousel/input-carousel.component.less
@@ -6,7 +6,7 @@
   height: 100%;
   line-height: 16px;
   font-size: 14px;
-  color: var(--prizm-v3-text-icon-primary);
+  color: var(--prizm-v3-text-icon-secondary);
   display: block;
 
   &:focus {
diff --git a/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.less b/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.less
index 053976e9f5..32894c4ad8 100644
--- a/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.less
+++ b/libs/components/src/lib/components/input/input-date-relative/input-layout-date-relative.component.less
@@ -18,5 +18,5 @@
 }
 
 .relative-menu-icon {
-  color: var(--prizm-v3-text-icon-primary);
+  color: var(--prizm-v3-text-icon-secondary);
 }
diff --git a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
index 3b0d40a153..39c6ea688e 100644
--- a/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
+++ b/libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.less
@@ -39,7 +39,7 @@
   flex-direction: column;
 
   &_weekend {
-    color: var(--prizm-calendar-day-weekend-color);
+    color: var(--prizm-calendar-day-weekend-color, var(--prizm-v3-text-icon-secondary));
   }
 }
 
diff --git a/libs/components/src/lib/components/listing-item/listing-item.component.less b/libs/components/src/lib/components/listing-item/listing-item.component.less
index 16ce49582b..82d0268980 100644
--- a/libs/components/src/lib/components/listing-item/listing-item.component.less
+++ b/libs/components/src/lib/components/listing-item/listing-item.component.less
@@ -17,7 +17,7 @@
       font-size: 14px;
       font-weight: 400;
       line-height: 16px;
-      color: var(--prizm-v3-text-icon-primary);
+      color: var(--prizm-v3-text-icon-secondary);
     }
 
     &:not(.item-container__selected):not(.item-container__disabled):hover {

From b97e6ef428ffdffe1d73eda2164ca7e7ad078cfb Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Wed, 29 Nov 2023 13:01:31 +0300
Subject: [PATCH 29/49] fix: calendar pagination hidden logic changed #1082

---
 .../primitive-year-month-pagination.component.html            | 2 +-
 .../primitive-year-month-pagination.component.less            | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
index 34e3a99734..5c84a18cb7 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html
@@ -10,7 +10,7 @@
   </div>
   <div>
     <prizm-primitive-spin-button
-      *ngIf="!hideButtons"
+      [class.hidden]="hideButtons"
       [focusable]="false"
       [leftDisabled]="prevMonthDisabled"
       [rightDisabled]="nextMonthDisabled"
diff --git a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
index ec3ea68130..e91147e914 100644
--- a/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
+++ b/libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.less
@@ -18,4 +18,8 @@
   .pagination-btn {
     .pagination-btn();
   }
+
+  .hidden {
+    visibility: hidden;
+  }
 }

From 82f99a480448f51449d795502b9e3914d0b6aeed Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Wed, 29 Nov 2023 15:12:58 +0300
Subject: [PATCH 30/49] fix: select and multiselect colors fixes

---
 .../multi-select/input-multi-select.component.less          | 6 +++---
 .../dropdowns/select/input-select-item.component.less       | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less b/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less
index ccaa786f33..76630068fd 100644
--- a/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less
+++ b/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less
@@ -14,7 +14,7 @@
   font-weight: var(--prizm-select-item-font-weight, 400);
   font-size: var(--prizm-select-item-font-size, 14px);
   gap: var(--prizm-select-item-gap, 8px);
-  color: var(--prizm-select-item-text, var(--prizm-v3-text-icon-primary));
+  color: var(--prizm-select-item-text, var(--prizm-v3-text-icon-secondary));
 
   .text {
     max-width: calc(100% - 16px);
@@ -29,13 +29,13 @@
     background: var(--prizm-select-item-selected-background, var(--prizm-v3-table-fill-row-active));
 
     .text {
-      color: var(--prizm-v3-text-icon-primary);
+      color: var(--prizm-v3-text-icon-secondary);
     }
   }
 
   &:not(.selected):not(.most-relevant):hover {
     background: var(--prizm-select-item-hover-background, var(--prizm-v3-table-fill-row-hover));
-    color: var(--prizm-v3-text-icon-primary);
+    color: var(--prizm-v3-text-icon-secondary);
   }
 }
 
diff --git a/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less b/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less
index e746d91511..e8b2491335 100644
--- a/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less
+++ b/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less
@@ -20,7 +20,7 @@
   cursor: pointer;
   font-weight: var(--prizm-select-item-font-weight, 400);
   font-size: var(--prizm-select-item-font-size, 14px);
-  color: var(--prizm-select-item-text, var(--prizm-v3-text-icon-primary));
+  color: var(--prizm-select-item-text, var(--prizm-v3-text-icon-secondary));
 
   &:empty {
     display: none;
@@ -36,12 +36,12 @@
   &.selected,
   &.most-relevant {
     background: var(--prizm-select-item-selected-background, var(--prizm-v3-table-fill-row-active));
-    color: var(--prizm-v3-text-icon-primary);
+    color: var(--prizm-v3-text-icon-secondary);
   }
 
   &:not(.selected):not(.most-relevant):hover {
     background: var(--prizm-select-item-hover-background, var(--prizm-v3-table-fill-row-hover));
-    color: var(--prizm-v3-text-icon-primary);
+    color: var(--prizm-v3-text-icon-secondary);
   }
 }
 

From 3677e72e68d50f3c00af4b5eb35e7d976b4e6449 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Wed, 29 Nov 2023 16:38:12 +0300
Subject: [PATCH 31/49] feat: colors v3 for table #1093

---
 .../src/lib/components/table/th/th.style.less | 12 +++++-----
 .../lib/components/table/tr/tr.component.less | 23 ++++++++-----------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/libs/components/src/lib/components/table/th/th.style.less b/libs/components/src/lib/components/table/th/th.style.less
index 401105bdcf..b343ee9e44 100644
--- a/libs/components/src/lib/components/table/th/th.style.less
+++ b/libs/components/src/lib/components/table/th/th.style.less
@@ -5,13 +5,13 @@
 :host {
   padding: 0 8px;
 
-  border: 1px solid var(--prizm-border-widget);
-  background: var(--prizm-grey-g12-g2);
+  border: 1px solid var(--prizm-v3-table-stroke-cell-default);
+  background: var(--prizm-v3-table-fill-header-default);
 
   font-size: 12px;
   line-height: 16px;
   font-weight: 600;
-  color: var(--prizm-text-contrast);
+  color: var(--prizm-v3-text-icon-tertiary);
   text-align: left;
 
   position: sticky;
@@ -55,7 +55,7 @@
     font-size: 12px;
     line-height: 16px;
     font-weight: 600;
-    color: var(--prizm-text-contrast);
+    color: var(--prizm-v3-text-icon-tertiary);
 
     border: none;
     outline: none;
@@ -65,13 +65,13 @@
       margin-left: 4px;
       display: flex;
       gap: 2px;
-      color: var(--prizm-border-icon);
+      color: var(--prizm-v3-button-secondary-solid-default);
       cursor: pointer;
       align-items: center;
       justify-content: center;
 
       &_active {
-        color: var(--prizm-index-plan);
+        color: var(--prizm-v3-button-primary-solid-active);
       }
     }
   }
diff --git a/libs/components/src/lib/components/table/tr/tr.component.less b/libs/components/src/lib/components/table/tr/tr.component.less
index 37a5c0f52a..114b219a8b 100644
--- a/libs/components/src/lib/components/table/tr/tr.component.less
+++ b/libs/components/src/lib/components/table/tr/tr.component.less
@@ -1,42 +1,39 @@
 [prizmTbody] tr[prizmTr] {
   cursor: var(--prizm-table-row-cursor, pointer);
 
-  color: var(--prizm-v2-table-text-default);
+  color: var(--prizm-v3-text-icon-secondary);
 
-  background: var(--prizm-table-row-background, var(--prizm-v2-table-background-default));
+  background: var(--prizm-table-row-background, var(--prizm-v3-background-fill-primary));
 
   &:nth-child(odd) {
-    background: var(--prizm-table-row-odd-background, var(--prizm-v2-table-zebra));
+    background: var(--prizm-table-row-odd-background, var(--prizm-v3-table-fill-row-zebra_default));
   }
 
   &:hover {
-    background: var(--prizm-table-row-hover-background, var(--prizm-v2-table-background-default-hover));
+    background: var(--prizm-table-row-hover-background, var(--prizm-v3-table-fill-row-hover));
   }
 
   &[status='success'] {
-    background: var(--prizm-v2-table-background-success);
-    color: var(--prizm-v2-table-text-success);
+    background: var(--prizm-v3-status-success-secondary-default);
 
     &:hover {
-      background: var(--prizm-v2-table-background-success-hover);
+      background: var(--prizm-v3-status-success-secondary-hover);
     }
   }
 
   &[status='warning'] {
-    background: var(--prizm-v2-table-background-warning);
-    color: var(--prizm-v2-table-text-warning);
+    background: var(--prizm-v3-status-warning-secondary-default);
 
     &:hover {
-      background: var(--prizm-v2-table-background-warning-hover);
+      background: var(--prizm-v3-status-warning-secondary-hover);
     }
   }
 
   &[status='danger'] {
-    background: var(--prizm-v2-table-background-danger);
-    color: var(--prizm-v2-table-text-danger);
+    background: var(--prizm-v3-status-alarm-secondary-default);
 
     &:hover {
-      background: var(--prizm-v2-table-background-danger-hover);
+      background: var(--prizm-v3-status-alarm-secondary-hover);
     }
   }
 }

From 910402567e2b56931093bdbbaabb8fa3627e534d Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Fri, 1 Dec 2023 14:33:58 +0300
Subject: [PATCH 32/49] feat: columns settings v3 colors #1104

---
 .../column-settings.component.less            | 12 +++---
 .../column-settings.component.ts              | 14 +++---
 .../column-drop-list.component.html           | 43 ++++++++++---------
 .../column-drop-list.component.less           | 32 +++++---------
 .../column-drop-list.component.ts             |  2 +
 libs/theme/src/styles/theme/v3/dark.less      | 10 +++++
 libs/theme/src/styles/theme/v3/default.less   | 17 ++++++++
 7 files changed, 74 insertions(+), 56 deletions(-)

diff --git a/libs/components/src/lib/components/column-settings/column-settings.component.less b/libs/components/src/lib/components/column-settings/column-settings.component.less
index 72c356e6ea..286990319b 100644
--- a/libs/components/src/lib/components/column-settings/column-settings.component.less
+++ b/libs/components/src/lib/components/column-settings/column-settings.component.less
@@ -2,10 +2,10 @@
 
 .container {
   width: 360px;
-  color: var(--prizm-text-contrast);
+  color: var(--prizm-v3-text-icon-secondary);
 
   .header {
-    border-bottom: 1px solid var(--prizm-border-widget);
+    border-bottom: 1px solid var(--prizm-v3-background-stroke);
     padding: var(--prizm-column-settings-header-padding, 14px 16px);
     display: flex;
     justify-content: space-between;
@@ -13,7 +13,7 @@
     font-style: var(--prizm-column-settings-header-font-style, normal);
     font-weight: var(--prizm-column-settings-header-font-weight, 600);
     font-size: var(--prizm-column-settings-header-font-size, var(--prizm-dialog-font-size, 14px));
-    color: var(--prizm-column-settings-header-text, var(--prizm-text-contrast));
+    color: var(--prizm-column-settings-header-text, var(--prizm-v3-text-icon-secondary));
   }
 
   .title {
@@ -23,7 +23,7 @@
     align-items: center;
   }
   .section {
-    border-bottom: 1px solid var(--prizm-border-widget);
+    border-bottom: 1px solid var(--prizm-v3-background-stroke);
 
     &-header {
       display: flex;
@@ -42,10 +42,10 @@
   }
 
   .footer {
-    border-top: 1px solid var(--prizm-border-widget);
+    border-top: 1px solid var(--prizm-v3-background-stroke);
     padding: var(--prizm-column-settings-footer-padding, 14px 16px);
     max-width: 100%;
-    color: var(--prizm-column-settings-footer-text, var(--prizm-text-main));
+    color: var(--prizm-column-settings-footer-text, var(--prizm-v3-text-icon-primary));
 
     .buttons {
       display: flex;
diff --git a/libs/components/src/lib/components/column-settings/column-settings.component.ts b/libs/components/src/lib/components/column-settings/column-settings.component.ts
index 8f82d34003..3836a7db54 100644
--- a/libs/components/src/lib/components/column-settings/column-settings.component.ts
+++ b/libs/components/src/lib/components/column-settings/column-settings.component.ts
@@ -23,13 +23,13 @@ import { PRIZM_COLUMN_SETTINGS } from '../../tokens';
 import { prizmI18nInitWithKey } from '../../services';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { CommonModule } from '@angular/common';
-import { PrizmCardComponent, PrizmCardModule } from '../card';
-import { PrizmButtonComponent, PrizmButtonModule } from '../button';
-import { PrizmToggleComponent, PrizmToggleModule } from '../toggle';
-import { PrizmIconComponent, PrizmIconModule } from '../icon';
-import { PrizmScrollbarComponent, PrizmScrollbarModule } from '../scrollbar';
-import { PrizmLetDirective, PrizmLetModule, PrizmPluckPipe, PrizmPluckPipeModule } from '@prizm-ui/helpers';
-import { PrizmHintDirective, PrizmHintModule } from '../../directives';
+import { PrizmCardComponent } from '../card';
+import { PrizmButtonComponent } from '../button';
+import { PrizmToggleComponent } from '../toggle';
+import { PrizmIconComponent } from '../icon';
+import { PrizmScrollbarComponent } from '../scrollbar';
+import { PrizmLetDirective, PrizmPluckPipe } from '@prizm-ui/helpers';
+import { PrizmHintDirective } from '../../directives';
 import { FormsModule } from '@angular/forms';
 import { PrizmThemeModule } from '@prizm-ui/theme';
 import { PrizmColumnIconPipe } from './pipes/column-icon.pipe';
diff --git a/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.html b/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.html
index 57a766876a..4bbd071e26 100644
--- a/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.html
+++ b/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.html
@@ -1,17 +1,35 @@
 <prizm-scrollbar class="scroll-box">
   <ng-container *ngIf="columns.length; else dropZone">
-    <div
-      class="column-box prizm-font-main-body-14"
+    <prizm-listing-item
       *ngFor="let column of columns"
       cdkDrag
       cdkDragPreviewClass="prizm-high-index"
       prizmTheme
     >
-      <ng-container *ngTemplateOutlet="columnItem; context: { column: column }"></ng-container>
+      <ng-container leftBox>
+        <prizm-icon [size]="24" iconClass="editor-dots"></prizm-icon>
+      </ng-container>
+      <span>{{ column.name }}</span>
+      <ng-container rightBox>
+        <button
+          [icon]="column.status | prizmColumnIcon"
+          [disabled]="column.status === 'sticky' || (isLastColumnShown && column.status === 'default')"
+          [prizmHint]="
+            isLastColumnShown && column.status === 'default'
+              ? (translations | prizmPluck : ['disabledHint'])
+              : ''
+          "
+          (click)="toggleColumnStatus(column)"
+          prizmIconButton
+          appearanceType="ghost"
+          appearance="secondary"
+          size="m"
+        ></button>
+      </ng-container>
       <ng-container *cdkDragPlaceholder>
         <ng-container *ngTemplateOutlet="placeholder"></ng-container>
       </ng-container>
-    </div>
+    </prizm-listing-item>
   </ng-container>
 </prizm-scrollbar>
 
@@ -22,20 +40,3 @@
 <ng-template #placeholder>
   <div class="dropzone"></div>
 </ng-template>
-
-<ng-template #columnItem let-column="column">
-  <prizm-icon [size]="24" iconClass="editor-dots"></prizm-icon>
-  <span>{{ column.name }}</span>
-  <button
-    [icon]="column.status | prizmColumnIcon"
-    [disabled]="column.status === 'sticky' || (isLastColumnShown && column.status === 'default')"
-    [prizmHint]="
-      isLastColumnShown && column.status === 'default' ? (translations | prizmPluck : ['disabledHint']) : ''
-    "
-    (click)="toggleColumnStatus(column)"
-    prizmIconButton
-    appearanceType="ghost"
-    appearance="secondary"
-    size="m"
-  ></button>
-</ng-template>
diff --git a/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.less b/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.less
index 096f7cfd05..0728d4549b 100644
--- a/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.less
+++ b/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.less
@@ -3,38 +3,26 @@
   max-height: 287px;
 }
 
-.column-box {
-  background-color: var(--prizm-bg-body);
-  display: flex;
-  align-items: center;
-  height: 40px;
-  padding: 0px 16px;
-  button {
-    margin-left: auto;
-  }
-  cursor: pointer;
-  &:hover {
-    background-color: var(--prizm-v2-table-background-default-hover);
-  }
-}
-
 .cdk-drag-preview {
-  color: var(--prizm-text-contrast);
-  box-shadow: 0px 8px 32px 0px var(--prizm-shadow);
+  color: var(--prizm-v3-text-icon-secondary);
+  box-shadow: var(--prizm-v3-shadow-big-bottom);
   border-radius: 2px;
-  border: 1px solid var(--prizm-border-widget);
-  cursor: grabbing;
+  cursor: grabbing !important;
   z-index: 9999;
+
+  ::ng-deep .item-container {
+    border: 1px solid var(--prizm-v3-background-stroke);
+  }
 }
 
 .dropzone {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  border-top: 1px dashed var(--prizm-border-forms);
-  border-bottom: 1px dashed var(--prizm-border-forms);
+  border-top: 1px dashed var(--prizm-v3-form-stroke-default);
+  border-bottom: 1px dashed var(--prizm-v3-form-stroke-default);
   border-radius: 2px;
-  background-color: var(--prizm-g2-g11);
+  background-color: var(--prizm-v3-form-fill-default);
   height: 40px;
   margin-bottom: 16px;
 }
diff --git a/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.ts b/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.ts
index a2c7bd326c..a6f2ee82d5 100644
--- a/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.ts
+++ b/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.ts
@@ -13,6 +13,7 @@ import { PrizmToggleComponent } from '../../../toggle/toggle.component';
 import { PrizmIconComponent } from '../../../icon/icon.component';
 import { PrizmScrollbarComponent } from '../../../scrollbar/scrollbar.component';
 import { PrizmHintDirective } from '../../../../directives/hint/hint.directive';
+import { PrizmListingItemComponent } from '../../../listing-item';
 
 const DragConfig: DragDropConfig = {
   zIndex: 9999,
@@ -38,6 +39,7 @@ const DragConfig: DragDropConfig = {
     FormsModule,
     PrizmThemeModule,
     PrizmColumnIconPipe,
+    PrizmListingItemComponent,
   ],
 })
 export class PrizmColumnDropListComponent extends PrizmAbstractTestId {
diff --git a/libs/theme/src/styles/theme/v3/dark.less b/libs/theme/src/styles/theme/v3/dark.less
index 408bc5dceb..9966514e96 100644
--- a/libs/theme/src/styles/theme/v3/dark.less
+++ b/libs/theme/src/styles/theme/v3/dark.less
@@ -98,4 +98,14 @@ Link - https://www.figma.com/file/lR03OmslN1ngsyglw65gKK/%F0%9F%8E%A8-Light-them
   --prizm-v3-chart-axis-area-hover: #8a91a233;
   --prizm-v3-chart-axis-area-active: #436cee33;
   --prizm-v3-chart-fill-blanket: #8a91a233;
+
+  --prizm-v3-shadow-color: rgba(0, 0, 0, 0.5);
+  --prizm-v3-shadow-big-top: 0px -8px 32px 0px var(--prizm-v3-shadow-color);
+  --prizm-v3-shadow-big-right: 8px 0px 32px 0px var(--prizm-v3-shadow-color);
+  --prizm-v3-shadow-big-left: -8px 0px 32px 0px var(--prizm-v3-shadow-color);
+  --prizm-v3-shadow-big-bottom: 0px 8px 32px 0px var(--prizm-v3-shadow-color);
+  --prizm-v3-shadow-mini-top: 0px -2px 4px 0px var(--prizm-v3-shadow-color);
+  --prizm-v3-shadow-mini-right: 2px 0px 4px 0px var(--prizm-v3-shadow-color);
+  --prizm-v3-shadow-mini-left: -2px 0px 4px 0px var(--prizm-v3-shadow-color);
+  --prizm-v3-shadow-mini-bottom: 0px 2px 4px 0px var(--prizm-v3-shadow-color);
 }
diff --git a/libs/theme/src/styles/theme/v3/default.less b/libs/theme/src/styles/theme/v3/default.less
index 6eab5a1aaf..ff2a92a6ee 100644
--- a/libs/theme/src/styles/theme/v3/default.less
+++ b/libs/theme/src/styles/theme/v3/default.less
@@ -11,6 +11,7 @@ Link - https://www.figma.com/file/lR03OmslN1ngsyglw65gKK/%F0%9F%8E%A8-Light-them
   --prizm-v3-text-icon-link-visited: var(--prizm-v3-palette-blue-400);
   --prizm-v3-text-icon-revers: var(--prizm-v3-palette-0);
   --prizm-v3-text-icon-exception: var(--prizm-v3-palette-0);
+
   --prizm-v3-background-fill-primary: var(--prizm-v3-palette-0);
   --prizm-v3-background-fill-secondary: var(--prizm-v3-palette-gray-100);
   --prizm-v3-background-fill-panel: var(--prizm-v3-palette-0);
@@ -19,6 +20,7 @@ Link - https://www.figma.com/file/lR03OmslN1ngsyglw65gKK/%F0%9F%8E%A8-Light-them
   --prizm-v3-background-fill-revers: var(--prizm-v3-palette-gray-1100);
   --prizm-v3-background-stroke: var(--prizm-v3-palette-gray-200);
   --prizm-v3-background-stroke-focus: var(--prizm-v3-palette-blue-400);
+
   --prizm-v3-table-fill-header-default: var(--prizm-v3-palette-gray-100);
   --prizm-v3-table-fill-header-hover: var(--prizm-v3-palette-gray-h150);
   --prizm-v3-table-fill-row-zebra_default: var(--prizm-v3-palette-gray-100);
@@ -28,6 +30,7 @@ Link - https://www.figma.com/file/lR03OmslN1ngsyglw65gKK/%F0%9F%8E%A8-Light-them
   --prizm-v3-table-stroke-cell-default: var(--prizm-v3-palette-gray-200);
   --prizm-v3-table-stroke-cell-hover: var(--prizm-v3-palette-gray-h450);
   --prizm-v3-table-stroke-cell-active: var(--prizm-v3-palette-blue-600);
+
   --prizm-v3-status-info-primary-default: var(--prizm-v3-palette-blue-600);
   --prizm-v3-status-info-primary-hover: var(--prizm-v3-palette-blue-h650);
   --prizm-v3-status-info-secondary-default: var(--prizm-v3-palette-blue-200);
@@ -52,9 +55,11 @@ Link - https://www.figma.com/file/lR03OmslN1ngsyglw65gKK/%F0%9F%8E%A8-Light-them
   --prizm-v3-status-alarm-primary-hover: var(--prizm-v3-palette-red-h650);
   --prizm-v3-status-alarm-secondary-default: var(--prizm-v3-palette-red-200);
   --prizm-v3-status-alarm-secondary-hover: var(--prizm-v3-palette-red-h250);
+
   --prizm-v3-index-plan: #0033ff;
   --prizm-v3-index-fact: #20222b;
   --prizm-v3-index-prognosis: var(--prizm-v3-palette-gray-600);
+
   --prizm-v3-button-primary-solid-default: var(--prizm-v3-palette-blue-600);
   --prizm-v3-button-primary-solid-hover: var(--prizm-v3-palette-blue-h650);
   --prizm-v3-button-primary-solid-active: var(--prizm-v3-palette-blue-700);
@@ -77,6 +82,7 @@ Link - https://www.figma.com/file/lR03OmslN1ngsyglw65gKK/%F0%9F%8E%A8-Light-them
   --prizm-v3-button-alarm-ghost-active: var(--prizm-v3-palette-red-200);
   --prizm-v3-button-ghost-hover: var(--prizm-v3-palette-gray-h150);
   --prizm-v3-button-disable: var(--prizm-v3-palette-gray-100);
+
   --prizm-v3-form-fill-default: var(--prizm-v3-palette-gray-100);
   --prizm-v3-form-fill-disable: var(--prizm-v3-palette-gray-100);
   --prizm-v3-form-stroke-default: var(--prizm-v3-palette-gray-300);
@@ -85,6 +91,7 @@ Link - https://www.figma.com/file/lR03OmslN1ngsyglw65gKK/%F0%9F%8E%A8-Light-them
   --prizm-v3-form-active: var(--prizm-v3-palette-blue-600);
   --prizm-v3-form-active-hover: var(--prizm-v3-palette-blue-h650);
   --prizm-v3-form-active-disable: var(--prizm-v3-palette-blue-400);
+
   --prizm-v3-chart-axis-default: var(--prizm-v3-palette-gray-300);
   --prizm-v3-chart-axis-line-hover: var(--prizm-v3-palette-1200);
   --prizm-v3-chart-axis-line-active: var(--prizm-v3-palette-blue-600);
@@ -92,4 +99,14 @@ Link - https://www.figma.com/file/lR03OmslN1ngsyglw65gKK/%F0%9F%8E%A8-Light-them
   --prizm-v3-chart-axis-area-active: #436cee33;
   --prizm-v3-token: #ffffff;
   --prizm-v3-chart-fill-blanket: #8a91a233;
+
+  --prizm-v3-shadow-color: rgba(191, 198, 215, 0.5);
+  --prizm-v3-shadow-big-top: 0px -8px 32px 0px var(--prizm-v3-shadow-color);
+  --prizm-v3-shadow-big-right: 8px 0px 32px 0px var(--prizm-v3-shadow-color);
+  --prizm-v3-shadow-big-left: -8px 0px 32px 0px var(--prizm-v3-shadow-color);
+  --prizm-v3-shadow-big-bottom: 0px 8px 32px 0px var(--prizm-v3-shadow-color);
+  --prizm-v3-shadow-mini-top: 0px -2px 4px 0px var(--prizm-v3-shadow-color);
+  --prizm-v3-shadow-mini-right: 2px 0px 4px 0px var(--prizm-v3-shadow-color);
+  --prizm-v3-shadow-mini-left: -2px 0px 4px 0px var(--prizm-v3-shadow-color);
+  --prizm-v3-shadow-mini-bottom: 0px 2px 4px 0px var(--prizm-v3-shadow-color);
 }

From 362faf881fe1afc752b9f78414b84fd3f343cc94 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 4 Dec 2023 13:14:38 +0300
Subject: [PATCH 33/49] fix: inputs paddings fix #1064

---
 .../lib/components/chips/chips.component.less    |  3 +--
 .../input-icon-button.component.less             |  3 ++-
 .../input-layout/input-layout.component.less     |  2 --
 .../input/common/styles/input.component.less     | 14 +++++++-------
 .../input-layout-date-shared.component.less      | 16 ++++++++--------
 5 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/libs/components/src/lib/components/chips/chips.component.less b/libs/components/src/lib/components/chips/chips.component.less
index 5f3b565fcb..35491d133d 100644
--- a/libs/components/src/lib/components/chips/chips.component.less
+++ b/libs/components/src/lib/components/chips/chips.component.less
@@ -4,7 +4,7 @@
 
   .chips-list {
     width: 100%;
-    padding: 0 12px 12px 8px;
+    padding: 0 12px 12px 0px;
 
     display: flex;
     flex-wrap: wrap;
@@ -30,7 +30,6 @@
     &.hidden {
       height: 20px;
       padding-top: 1px;
-      overflow: hidden;
       width: 100%;
     }
   }
diff --git a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
index 747336a06e..6a6de77986 100644
--- a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
+++ b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
@@ -7,7 +7,8 @@
   padding: 0;
   background: transparent;
 
-  width: var(--prizm-input-icon-button-width, 32px);
+  width: var(--prizm-input-icon-button-width, 24px);
+  height: var(--prizm-input-icon-button-height, 24px);
   font-size: inherit;
 
   color: var(--prizm-v3-text-icon-secondary);
diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
index 8c0ab00f97..c112ad8cc6 100644
--- a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
+++ b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
@@ -37,7 +37,6 @@
   font-weight: 600;
   font-size: 12px;
   color: var(--prizm-v3-text-icon-tertiary);
-  padding-left: 16px;
   line-height: 16px;
   transition: top 200ms ease 0s;
   pointer-events: none;
@@ -51,7 +50,6 @@
 
   &-inner {
     position: absolute;
-    padding-left: 8px;
     display: flex;
     gap: 4px;
     max-width: 100%;
diff --git a/libs/components/src/lib/components/input/common/styles/input.component.less b/libs/components/src/lib/components/input/common/styles/input.component.less
index bc10e03ce8..40e0863691 100644
--- a/libs/components/src/lib/components/input/common/styles/input.component.less
+++ b/libs/components/src/lib/components/input/common/styles/input.component.less
@@ -13,7 +13,7 @@
 
 // In inner context
 :host-context(.prizm-input-form-inner) {
-  padding: 22px 8px 4px 8px;
+  padding: 22px 8px 4px 0px;
 
   &:host-context(.prizm-input-empty-label) {
     padding-top: 4px;
@@ -38,14 +38,14 @@
 }
 
 :host-context(.prizm-input-form-inner[data-size='l']) {
-  padding: 22px 8px 4px 8px;
+  padding: 22px 8px 4px 0px;
 
   &:host-context(.prizm-input-empty-label) {
     padding-top: 4px;
   }
 }
 :host-context(.prizm-input-form-inner[data-size='m']) {
-  padding: 16px 8px 2px 8px;
+  padding: 16px 8px 2px 0px;
 
   &:host-context(.prizm-input-empty-label) {
     padding-top: 2px;
@@ -54,21 +54,21 @@
 
 // In outer context
 :host-context(.prizm-input-form-outer) {
-  padding: 7px 8px;
+  padding: 7px 0px;
 }
 
 // need for optimization output selector in less
 :host-context(.prizm-input-form-outer[data-size='l']) {
-  padding: 11px 8px;
+  padding: 11px 0px;
 }
 
 :host-context(.prizm-input-form-outer[data-size='m']) {
-  padding: 7px 8px;
+  padding: 7px 0px;
 }
 
 :host-context(.prizm-input-form-outer[data-size='s']) {
   font-size: 12px;
-  padding: 4px 8px;
+  padding: 4px 0px;
 }
 
 :host-context([type='number']) {
diff --git a/libs/components/src/lib/components/input/input-date/input-layout-date-shared.component.less b/libs/components/src/lib/components/input/input-date/input-layout-date-shared.component.less
index 0108c3349a..6821d134e6 100644
--- a/libs/components/src/lib/components/input/input-date/input-layout-date-shared.component.less
+++ b/libs/components/src/lib/components/input/input-date/input-layout-date-shared.component.less
@@ -8,7 +8,7 @@
   display: flex;
   gap: 2px;
   // TODO: this padding copied from input-text (need remove copied style and use only one file)
-  padding: 22px 8px 4px 8px;
+  padding: 22px 8px 4px 0px;
 
   input {
     width: calc(var(--prizm-input-in-zone-max-size) * 0.9ch);
@@ -29,21 +29,21 @@
 // TODO: this stype copied from input-text (need remove copied style and use only one file)
 // In outer context
 :host-context(.prizm-input-form-outer) .multiple-input-box {
-  padding: 7px 8px;
+  padding: 7px 0px;
 }
 
 // need for optimization output selector in less
 :host-context(.prizm-input-form-outer[data-size='l']) .multiple-input-box {
-  padding: 11px 8px;
+  padding: 11px 0px;
 }
 
 :host-context(.prizm-input-form-outer[data-size='m']) .multiple-input-box {
-  padding: 7px 8px;
+  padding: 7px 0px;
 }
 
 :host-context(.prizm-input-form-outer[data-size='s']) .multiple-input-box {
   font-size: 12px;
-  padding: 4px 8px;
+  padding: 4px 0px;
 }
 
 // In inner context
@@ -57,7 +57,7 @@
   }
 
   .multiple-input-box {
-    padding: 22px 8px 4px 8px;
+    padding: 22px 8px 4px 0px;
 
     :host::placeholder {
       opacity: 0;
@@ -82,12 +82,12 @@
   }
 
   .multiple-input-box {
-    padding: 22px 8px 4px 8px;
+    padding: 22px 8px 4px 0px;
   }
 }
 :host-context(.prizm-input-form-inner[data-size='m']) {
   .multiple-input-box {
-    padding: 16px 8px 2px 8px;
+    padding: 16px 8px 2px 0px;
   }
 
   :host-context(.prizm-input-empty-label) {

From 2902de9a4fe2f851f2243276dd4fe9f9d04cf7da Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 4 Dec 2023 14:33:19 +0300
Subject: [PATCH 34/49] fix: carousel focus state fix

---
 .../components/input/carousel/input-carousel.component.less   | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/libs/components/src/lib/components/input/carousel/input-carousel.component.less b/libs/components/src/lib/components/input/carousel/input-carousel.component.less
index 30cb1f2e60..67e9c1ba09 100644
--- a/libs/components/src/lib/components/input/carousel/input-carousel.component.less
+++ b/libs/components/src/lib/components/input/carousel/input-carousel.component.less
@@ -8,10 +8,6 @@
   font-size: 14px;
   color: var(--prizm-v3-text-icon-secondary);
   display: block;
-
-  &:focus {
-    outline: var(--prizm-v3-background-stroke-focus) 1px solid;
-  }
 }
 
 // In inner context

From 43df335a612d5c335ed7f88d367db1cba4fb3d36 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 4 Dec 2023 14:45:45 +0300
Subject: [PATCH 35/49] feat: searchable content component going deprecated

---
 .../searchable-content/searchable-content.component.ts        | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/libs/components/src/lib/components/table/components/searchable-content/searchable-content.component.ts b/libs/components/src/lib/components/table/components/searchable-content/searchable-content.component.ts
index 6398aad743..b1a88930bf 100644
--- a/libs/components/src/lib/components/table/components/searchable-content/searchable-content.component.ts
+++ b/libs/components/src/lib/components/table/components/searchable-content/searchable-content.component.ts
@@ -1,5 +1,9 @@
 import { Component, ChangeDetectionStrategy, Input, HostBinding } from '@angular/core';
 
+/**
+ * @deprecated since 3.8.0
+ */
+
 @Component({
   selector: 'prizm-searchable-content',
   templateUrl: './searchable-content.component.html',

From e6d2be524439e8992475415b9ca9bba583ec0c46 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 5 Dec 2023 11:12:47 +0300
Subject: [PATCH 36/49] feat: dropdownhost colors update #1137

---
 .../dropdowns/dropdown-host/dropdown-host.component.less    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/components/src/lib/components/dropdowns/dropdown-host/dropdown-host.component.less b/libs/components/src/lib/components/dropdowns/dropdown-host/dropdown-host.component.less
index 1199a916af..a044fff6fc 100644
--- a/libs/components/src/lib/components/dropdowns/dropdown-host/dropdown-host.component.less
+++ b/libs/components/src/lib/components/dropdowns/dropdown-host/dropdown-host.component.less
@@ -14,7 +14,7 @@
 .prizm-dropdown-host-modal {
   width: 100%;
   border-radius: var(--prizm-dropdrown-host-border-radius, 2px);
-  border: var(--prizm-dropdrown-host-border, 1px solid var(--prizm-border-widget));
-  background: var(--prizm-dropdrown-host-background, var(--prizm-bg-body));
-  box-shadow: var(--prizm-dropdrown-host-box-shadow, -8px 0px 32px var(--prizm-shadow));
+  border: var(--prizm-dropdrown-host-border, 1px solid var(--prizm-v3-background-stroke));
+  background: var(--prizm-dropdrown-host-background, var(--prizm-v3-background-fill-overlay));
+  box-shadow: var(--prizm-dropdrown-host-box-shadow, var(--prizm-v3-shadow-big-bottom));
 }

From 14d57814d6425bc7d84bbcd09ed95ed1a6200cf2 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 5 Dec 2023 14:13:04 +0300
Subject: [PATCH 37/49] fix: column settings paddings fix

---
 .../column-settings/column-settings.component.less         | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/libs/components/src/lib/components/column-settings/column-settings.component.less b/libs/components/src/lib/components/column-settings/column-settings.component.less
index 286990319b..0f9484ae34 100644
--- a/libs/components/src/lib/components/column-settings/column-settings.component.less
+++ b/libs/components/src/lib/components/column-settings/column-settings.component.less
@@ -13,7 +13,7 @@
     font-style: var(--prizm-column-settings-header-font-style, normal);
     font-weight: var(--prizm-column-settings-header-font-weight, 600);
     font-size: var(--prizm-column-settings-header-font-size, var(--prizm-dialog-font-size, 14px));
-    color: var(--prizm-column-settings-header-text, var(--prizm-v3-text-icon-secondary));
+    color: var(--prizm-column-settings-header-text, var(--prizm-v3-text-icon-primary));
   }
 
   .title {
@@ -30,14 +30,15 @@
       justify-content: space-between;
       align-items: center;
       gap: 16px;
-      padding: var(--prizm-column-settings-header-padding, 14px 16px);
+      padding: var(--prizm-column-settings-header-padding, 0px 16px);
+      margin-top: 16px;
     }
 
     &-toggle {
       display: flex;
       align-items: center;
       gap: 8px;
-      padding: 14px 16px;
+      padding: 16px;
     }
   }
 

From 3bc7ccd7d6920d3f4bdfb143c2fd505fc163bf4a Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 5 Dec 2023 17:46:54 +0300
Subject: [PATCH 38/49] fix: column settings paddings changed

---
 .../column-settings.component.html              |  4 ++--
 .../column-settings.component.less              | 17 +++++++++++++++--
 .../column-drop-list.component.less             |  2 +-
 .../listing-item/listing-item.component.less    |  7 ++++++-
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/libs/components/src/lib/components/column-settings/column-settings.component.html b/libs/components/src/lib/components/column-settings/column-settings.component.html
index 0b24cde277..b450a463af 100644
--- a/libs/components/src/lib/components/column-settings/column-settings.component.html
+++ b/libs/components/src/lib/components/column-settings/column-settings.component.html
@@ -39,9 +39,9 @@
   <div class="section">
     <div class="section-header">
       <div class="title prizm-font-title-h4">{{ translations | prizmPluck : ['mainColumns'] }}</div>
-      <button (click)="showAll()" prizmButton appearanceType="ghost" appearance="secondary" size="m">
+      <div class="show-all" (click)="showAll()">
         {{ translations | prizmPluck : ['showAllBtn'] }}
-      </button>
+      </div>
     </div>
     <prizm-column-drop-list
       #columnList="cdkDropList"
diff --git a/libs/components/src/lib/components/column-settings/column-settings.component.less b/libs/components/src/lib/components/column-settings/column-settings.component.less
index 0f9484ae34..07476a8e78 100644
--- a/libs/components/src/lib/components/column-settings/column-settings.component.less
+++ b/libs/components/src/lib/components/column-settings/column-settings.component.less
@@ -6,7 +6,7 @@
 
   .header {
     border-bottom: 1px solid var(--prizm-v3-background-stroke);
-    padding: var(--prizm-column-settings-header-padding, 14px 16px);
+    padding: var(--prizm-column-settings-header-padding, 16px);
     display: flex;
     justify-content: space-between;
 
@@ -32,13 +32,15 @@
       gap: 16px;
       padding: var(--prizm-column-settings-header-padding, 0px 16px);
       margin-top: 16px;
+      color: var(--prizm-v3-text-icon-primary);
     }
 
     &-toggle {
       display: flex;
       align-items: center;
       gap: 8px;
-      padding: 16px;
+      padding: 0px 16px 16px 16px;
+      margin-top: 16px;
     }
   }
 
@@ -57,4 +59,15 @@
       }
     }
   }
+
+  .show-all {
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--prizm-v3-button-secondary-solid-default);
+
+    &:hover {
+      color: var(--prizm-v3-button-secondary-solid-hover);
+    }
+  }
 }
diff --git a/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.less b/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.less
index 0728d4549b..95266b49ec 100644
--- a/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.less
+++ b/libs/components/src/lib/components/column-settings/components/column-drop-list/column-drop-list.component.less
@@ -4,7 +4,7 @@
 }
 
 .cdk-drag-preview {
-  color: var(--prizm-v3-text-icon-secondary);
+  color: var(--prizm-v3-text-icon-primary);
   box-shadow: var(--prizm-v3-shadow-big-bottom);
   border-radius: 2px;
   cursor: grabbing !important;
diff --git a/libs/components/src/lib/components/listing-item/listing-item.component.less b/libs/components/src/lib/components/listing-item/listing-item.component.less
index 16ce49582b..2af7514d1b 100644
--- a/libs/components/src/lib/components/listing-item/listing-item.component.less
+++ b/libs/components/src/lib/components/listing-item/listing-item.component.less
@@ -17,11 +17,16 @@
       font-size: 14px;
       font-weight: 400;
       line-height: 16px;
-      color: var(--prizm-v3-text-icon-primary);
+      color: var(--prizm-v3-text-icon-secondary);
     }
 
     &:not(.item-container__selected):not(.item-container__disabled):hover {
       background-color: var(--prizm-listing-item-row-hover, var(--prizm-v3-table-fill-row-hover));
+      color: var(--prizm-v3-text-icon-primary);
+
+      .title {
+        color: var(--prizm-v3-text-icon-primary);
+      }
     }
 
     &.item-container__selected:not(.item-container__disabled):has(.container-left:not(:empty)):hover {

From 737f0dcc7e1477fdfae36ec7098f2b04d6b3ec12 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Wed, 6 Dec 2023 12:46:32 +0300
Subject: [PATCH 39/49] fix: placeholder color fix

---
 .../dropdowns/multi-select/input-multi-select.component.less  | 1 +
 .../dropdowns/select/input-select-item.component.less         | 1 +
 .../common/input-icon-button/input-icon-button.component.less | 4 ++--
 .../lib/components/input/common/styles/input.component.less   | 4 ++++
 .../input/input-date/input-layout-date-shared.component.less  | 4 ++++
 5 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less b/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less
index 76630068fd..6bc6899636 100644
--- a/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less
+++ b/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less
@@ -9,6 +9,7 @@
   display: flex;
   align-items: center;
   padding: var(--prizm-select-item-padding, 8px 16px);
+  min-height: 40px;
   background: var(--prizm-select-item-background, var(--prizm-v3-background-fill-overlay));
   cursor: pointer;
   font-weight: var(--prizm-select-item-font-weight, 400);
diff --git a/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less b/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less
index e8b2491335..2485ed4aa3 100644
--- a/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less
+++ b/libs/components/src/lib/components/dropdowns/select/input-select-item.component.less
@@ -16,6 +16,7 @@
   display: flex;
   align-items: center;
   padding: var(--prizm-select-item-padding, 8px 16px);
+  min-height: 40px;
   background: var(--prizm-select-item-background, var(--prizm-v3-background-fill-overlay));
   cursor: pointer;
   font-weight: var(--prizm-select-item-font-weight, 400);
diff --git a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
index 6a6de77986..043ee789b4 100644
--- a/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
+++ b/libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.less
@@ -23,11 +23,11 @@
 :host-context(.interactive) {
   &:not(.disabled) {
     &:hover {
-      color: var(--prizm-v3-button-secondary-solid-hover);
+      color: var(--prizm-v3-button-primary-solid-hover);
     }
 
     &:focus {
-      color: var(--prizm-v3-button-primary-solid-active);
+      color: var(--prizm-v3-button-primary-solid-hover);
     }
 
     cursor: pointer;
diff --git a/libs/components/src/lib/components/input/common/styles/input.component.less b/libs/components/src/lib/components/input/common/styles/input.component.less
index 40e0863691..bdf29a6bdf 100644
--- a/libs/components/src/lib/components/input/common/styles/input.component.less
+++ b/libs/components/src/lib/components/input/common/styles/input.component.less
@@ -9,6 +9,10 @@
   color: var(--prizm-v3-text-icon-secondary);
   display: block;
   text-overflow: ellipsis;
+
+  &::placeholder {
+    color: var(--prizm-v3-text-icon-disable);
+  }
 }
 
 // In inner context
diff --git a/libs/components/src/lib/components/input/input-date/input-layout-date-shared.component.less b/libs/components/src/lib/components/input/input-date/input-layout-date-shared.component.less
index 6821d134e6..990cf0cb71 100644
--- a/libs/components/src/lib/components/input/input-date/input-layout-date-shared.component.less
+++ b/libs/components/src/lib/components/input/input-date/input-layout-date-shared.component.less
@@ -2,6 +2,10 @@
 
 :host {
   display: block;
+
+  &::placeholder {
+    color: var(--prizm-v3-text-icon-disable);
+  }
 }
 
 .multiple-input-box {

From 888f2fa17d87eb19c5c075081de827994f5c305d Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Wed, 6 Dec 2023 14:48:21 +0300
Subject: [PATCH 40/49] fix: box-shadow bug fix

---
 .../input/common/input-layout/input-layout.component.less        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
index c112ad8cc6..07c9f25e94 100644
--- a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
+++ b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
@@ -175,6 +175,7 @@
   &:focus-within {
     border-color: var(--prizm-v3-form-active);
     box-shadow: 0 0 0 2px var(--prizm-v3-background-stroke-focus);
+    position: relative;
 
     &:hover {
       border-color: var(--prizm-v3-form-active-hover);

From abd0380726766f6638f21635d245d37181b021fa Mon Sep 17 00:00:00 2001
From: Zurab Developer <75216044+ZurabDev@users.noreply.github.com>
Date: Thu, 7 Dec 2023 13:18:11 +0300
Subject: [PATCH 41/49] ci: update node js version

---
 .github/workflows/pr-ng14.yml | 2 +-
 .github/workflows/pr-ng15.yml | 2 +-
 .github/workflows/pr-ng16.yml | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/pr-ng14.yml b/.github/workflows/pr-ng14.yml
index dfcdf12b25..dc464320b1 100644
--- a/.github/workflows/pr-ng14.yml
+++ b/.github/workflows/pr-ng14.yml
@@ -15,7 +15,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Derive appropriate SHAs for base and head for `nx affected` commands
diff --git a/.github/workflows/pr-ng15.yml b/.github/workflows/pr-ng15.yml
index 05ff27ab0d..d52ab2c6cb 100644
--- a/.github/workflows/pr-ng15.yml
+++ b/.github/workflows/pr-ng15.yml
@@ -15,7 +15,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Derive appropriate SHAs for base and head for `nx affected` commands
diff --git a/.github/workflows/pr-ng16.yml b/.github/workflows/pr-ng16.yml
index 6d119c38d4..e1b0000e3a 100644
--- a/.github/workflows/pr-ng16.yml
+++ b/.github/workflows/pr-ng16.yml
@@ -15,7 +15,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Derive appropriate SHAs for base and head for `nx affected` commands

From d37726227e5ba91fe024652876f12004c5249d56 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Thu, 7 Dec 2023 20:18:18 +0300
Subject: [PATCH 42/49] feat: borders for cells with inputs and status #1093

---
 .../table-editable-col-example.component.html |  2 +-
 .../table-editable-col-example.component.less |  4 ---
 .../table-editable-row-example.component.less |  2 --
 .../input-layout/input-layout.component.less  |  2 +-
 .../lib/components/table/td/td.component.less | 26 +++++++++++++++++++
 5 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/apps/doc/src/app/components/table/examples/table-editable-col-example/table-editable-col-example.component.html b/apps/doc/src/app/components/table/examples/table-editable-col-example/table-editable-col-example.component.html
index 60065b9201..e0e2f2697d 100644
--- a/apps/doc/src/app/components/table/examples/table-editable-col-example/table-editable-col-example.component.html
+++ b/apps/doc/src/app/components/table/examples/table-editable-col-example/table-editable-col-example.component.html
@@ -24,7 +24,7 @@
         prizmTr
       >
         <td class="format__number" *prizmCell="'code'" prizmTd>{{ item.code | spaceNumber : '0.0-0' }}</td>
-        <td class="row_editable" *prizmCell="'name'" prizmTd>
+        <td class="row_editable" *prizmCell="'name'" [status]="item.status ?? 'default'" prizmTd>
           <input
             [value]="item.name"
             [readOnly]="!(currentEditableProduct?.product === item && currentEditableProduct?.key === 'name')"
diff --git a/apps/doc/src/app/components/table/examples/table-editable-col-example/table-editable-col-example.component.less b/apps/doc/src/app/components/table/examples/table-editable-col-example/table-editable-col-example.component.less
index f071bf3a7e..4df1c049d4 100644
--- a/apps/doc/src/app/components/table/examples/table-editable-col-example/table-editable-col-example.component.less
+++ b/apps/doc/src/app/components/table/examples/table-editable-col-example/table-editable-col-example.component.less
@@ -15,12 +15,8 @@
 
   .row {
     &_editable {
-      padding: 0;
-
       &:hover,
       .edit-cell:focus {
-        box-shadow: 0 0 0 1px var(--prizm-index-plan) inset;
-
         position: relative;
         z-index: 10;
       }
diff --git a/apps/doc/src/app/components/table/examples/table-editable-row-example/table-editable-row-example.component.less b/apps/doc/src/app/components/table/examples/table-editable-row-example/table-editable-row-example.component.less
index a11c2b8c78..5320305763 100644
--- a/apps/doc/src/app/components/table/examples/table-editable-row-example/table-editable-row-example.component.less
+++ b/apps/doc/src/app/components/table/examples/table-editable-row-example/table-editable-row-example.component.less
@@ -46,8 +46,6 @@
 
     &_edit {
       td {
-        border: 1px solid var(--prizm-index-plan);
-
         position: relative;
         z-index: 10;
 
diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
index 07c9f25e94..d81a7a84cb 100644
--- a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
+++ b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
@@ -111,7 +111,7 @@
   }
 
   &:hover {
-    border-color: var(--prizm-v3-form-active);
+    border-color: var(--prizm-v3-form-stroke-hover);
   }
 
   &__first {
diff --git a/libs/components/src/lib/components/table/td/td.component.less b/libs/components/src/lib/components/table/td/td.component.less
index f1d3a197d7..389e3acb8c 100644
--- a/libs/components/src/lib/components/table/td/td.component.less
+++ b/libs/components/src/lib/components/table/td/td.component.less
@@ -31,19 +31,45 @@
   background: inherit;
   color: inherit;
 
+  &:has([prizmInput]) {
+    padding: 0;
+  }
+
   &[status='success'] {
     background: var(--prizm-v3-status-success-secondary-default);
+
+    &:has([prizmInput]:not(:focus)):hover {
+      box-shadow: 0 0 0 1px var(--prizm-v3-status-success-primary-default) inset;
+    }
   }
+
   &[status='default'] {
     background: inherit;
+
+    &:has([prizmInput]:not(:focus)):hover {
+      box-shadow: 0 0 0 1px var(--prizm-v3-table-stroke-cell-hover) inset;
+    }
   }
 
   &[status='warning'] {
     background: var(--prizm-v3-status-warning-secondary-default);
+
+    &:has([prizmInput]:not(:focus)):hover {
+      box-shadow: 0 0 0 1px var(--prizm-v3-status-warning-primary-default) inset;
+    }
   }
 
   &[status='danger'] {
     background: var(--prizm-v3-status-alarm-secondary-default);
+
+    &:has([prizmInput]:not(:focus)):hover {
+      box-shadow: 0 0 0 1px var(--prizm-v3-status-alarm-primary-default) inset;
+    }
+  }
+
+  &:has([prizmInput]:focus) {
+    background-color: var(--prizm-v3-background-fill-primary);
+    box-shadow: 0 0 0 1px var(--prizm-v3-table-stroke-cell-active) inset;
   }
 }
 

From 24748cf16391894ff4f94c0f21b2c18683ebb812 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Fri, 8 Dec 2023 13:14:32 +0300
Subject: [PATCH 43/49] feat: table cell status with input colors update

---
 .../lib/components/table/td/td.component.less | 23 +++++++++++--------
 .../src/lib/components/table/th/th.style.less |  5 ----
 .../lib/components/table/tr/tr.component.less |  2 +-
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/libs/components/src/lib/components/table/td/td.component.less b/libs/components/src/lib/components/table/td/td.component.less
index 389e3acb8c..bb8bc37690 100644
--- a/libs/components/src/lib/components/table/td/td.component.less
+++ b/libs/components/src/lib/components/table/td/td.component.less
@@ -35,10 +35,16 @@
     padding: 0;
   }
 
+  &:has([prizmInput]:focus) {
+    background-color: var(--prizm-v3-background-fill-primary);
+    box-shadow: 0 0 0 1px var(--prizm-v3-table-stroke-cell-active) inset;
+  }
+
   &[status='success'] {
     background: var(--prizm-v3-status-success-secondary-default);
 
-    &:has([prizmInput]:not(:focus)):hover {
+    &:has([prizmInput]):hover,
+    &:has([prizmInput]:focus) {
       box-shadow: 0 0 0 1px var(--prizm-v3-status-success-primary-default) inset;
     }
   }
@@ -54,7 +60,8 @@
   &[status='warning'] {
     background: var(--prizm-v3-status-warning-secondary-default);
 
-    &:has([prizmInput]:not(:focus)):hover {
+    &:has([prizmInput]):hover,
+    &:has([prizmInput]:focus) {
       box-shadow: 0 0 0 1px var(--prizm-v3-status-warning-primary-default) inset;
     }
   }
@@ -62,15 +69,11 @@
   &[status='danger'] {
     background: var(--prizm-v3-status-alarm-secondary-default);
 
-    &:has([prizmInput]:not(:focus)):hover {
+    &:has([prizmInput]):hover,
+    &:has([prizmInput]:focus) {
       box-shadow: 0 0 0 1px var(--prizm-v3-status-alarm-primary-default) inset;
     }
   }
-
-  &:has([prizmInput]:focus) {
-    background-color: var(--prizm-v3-background-fill-primary);
-    box-shadow: 0 0 0 1px var(--prizm-v3-table-stroke-cell-active) inset;
-  }
 }
 
 :host-context([active='true']) {
@@ -78,7 +81,9 @@
     background: var(--prizm-table-active-row-marker-color, var(--prizm-v3-status-info-primary-default));
   }
 
-  background: var(--prizm-v3-table-fill-row-active);
+  &[status='default'] {
+    background: var(--prizm-v3-table-fill-row-active);
+  }
 }
 
 :host-context([border-style='vertical']) {
diff --git a/libs/components/src/lib/components/table/th/th.style.less b/libs/components/src/lib/components/table/th/th.style.less
index b343ee9e44..0f49889bc3 100644
--- a/libs/components/src/lib/components/table/th/th.style.less
+++ b/libs/components/src/lib/components/table/th/th.style.less
@@ -110,8 +110,3 @@
 :host-context([border-style='vertical']) {
   border-bottom: none;
 }
-
-:host-context([border-style='horizontal']) {
-  border-right: none;
-  border-left: none;
-}
diff --git a/libs/components/src/lib/components/table/tr/tr.component.less b/libs/components/src/lib/components/table/tr/tr.component.less
index 114b219a8b..0b3ac03ef7 100644
--- a/libs/components/src/lib/components/table/tr/tr.component.less
+++ b/libs/components/src/lib/components/table/tr/tr.component.less
@@ -5,7 +5,7 @@
 
   background: var(--prizm-table-row-background, var(--prizm-v3-background-fill-primary));
 
-  &:nth-child(odd) {
+  &:nth-child(even) {
     background: var(--prizm-table-row-odd-background, var(--prizm-v3-table-fill-row-zebra_default));
   }
 

From 92a4ce691f0bf4a2f337dcdbac2f61c103c5ee6e Mon Sep 17 00:00:00 2001
From: Zurab Developer <75216044+ZurabDev@users.noreply.github.com>
Date: Fri, 8 Dec 2023 15:35:38 +0300
Subject: [PATCH 44/49] fix: lint

---
 .../language-switcher-example.component.ts                  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/doc/src/app/how-to-work/internationalization/examples/language-switcher/language-switcher-example.component.ts b/apps/doc/src/app/how-to-work/internationalization/examples/language-switcher/language-switcher-example.component.ts
index 619efe0ef2..f232eb92a4 100644
--- a/apps/doc/src/app/how-to-work/internationalization/examples/language-switcher/language-switcher-example.component.ts
+++ b/apps/doc/src/app/how-to-work/internationalization/examples/language-switcher/language-switcher-example.component.ts
@@ -33,6 +33,9 @@ import { PrizmFileValidationErrors, PrizmFilesProgress } from '@prizm-ui/compone
 })
 export class PrizmLanguageSwitcherExampleComponent {
   toastService: any;
+
+  progress$$ = new BehaviorSubject<PrizmFilesProgress>({});
+  files: Array<File> = [];
   constructor(
     @Self()
     private readonly prizmLanguageSwitcher: PrizmLanguageSwitcher,
@@ -43,9 +46,6 @@ export class PrizmLanguageSwitcherExampleComponent {
     this.prizmLanguageSwitcher.setLanguage(lang as PrizmLanguageName);
   }
 
-  progress$$ = new BehaviorSubject<PrizmFilesProgress>({});
-  files: Array<File> = [];
-
   public onFilesChange(files: Array<File>): void {
     this.files = files;
     if (this.files.length > 0) {

From cea634fb925e70a2df28738df286ff000e821815 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 11 Dec 2023 12:19:42 +0300
Subject: [PATCH 45/49] fix: track by example fix, borders stle fix #1093

---
 .../table-track-by-example.component.html                | 4 ++--
 .../src/lib/components/table/td/td.component.less        | 9 +++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/doc/src/app/components/table/examples/table-track-by-example/table-track-by-example.component.html b/apps/doc/src/app/components/table/examples/table-track-by-example/table-track-by-example.component.html
index 37add66686..ee92391817 100644
--- a/apps/doc/src/app/components/table/examples/table-track-by-example/table-track-by-example.component.html
+++ b/apps/doc/src/app/components/table/examples/table-track-by-example/table-track-by-example.component.html
@@ -6,7 +6,7 @@
         <th prizmTh>Наименование</th>
         <th prizmTh>Категория</th>
         <th prizmTh>Количество</th>
-        <th></th>
+        <th prizmTh></th>
       </tr>
     </thead>
 
@@ -33,7 +33,7 @@
           <td prizmTd>
             {{ item.count }}
           </td>
-          <td>{{ item.active }}</td>
+          <td prizmTd>{{ item.active }}</td>
         </tr>
       </ng-container>
     </tbody>
diff --git a/libs/components/src/lib/components/table/td/td.component.less b/libs/components/src/lib/components/table/td/td.component.less
index bb8bc37690..b72da0c19e 100644
--- a/libs/components/src/lib/components/table/td/td.component.less
+++ b/libs/components/src/lib/components/table/td/td.component.less
@@ -91,8 +91,13 @@
 }
 
 :host-context([border-style='horizontal']) {
-  border-right: none;
-  border-left: none;
+  &:not(:first-child) {
+    border-left: none;
+  }
+
+  &:not(:last-child) {
+    border-right: none;
+  }
 }
 
 :host-context([data-size='s']) {

From 104719aefe6b4e6bbc9324d11c1cd273f5d8c8c3 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 11 Dec 2023 15:55:53 +0300
Subject: [PATCH 46/49] fix: table grid style fix

---
 libs/components/src/lib/components/table/th/th.style.less | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/libs/components/src/lib/components/table/th/th.style.less b/libs/components/src/lib/components/table/th/th.style.less
index 0f49889bc3..41ec7ab490 100644
--- a/libs/components/src/lib/components/table/th/th.style.less
+++ b/libs/components/src/lib/components/table/th/th.style.less
@@ -106,7 +106,3 @@
 :host-context(table[data-size='l'] thead tr:nth-child(2)) {
   top: @height-l;
 }
-
-:host-context([border-style='vertical']) {
-  border-bottom: none;
-}

From a86435974184e2b1a87e90ce877eea60f9779e2b Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 11 Dec 2023 18:47:13 +0300
Subject: [PATCH 47/49] feat: add styles for search input

---
 .../table-search-example/table-search-example.component.less | 4 ++++
 libs/components/src/lib/components/table/th/th.style.less    | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/apps/doc/src/app/components/table/examples/table-search-example/table-search-example.component.less b/apps/doc/src/app/components/table/examples/table-search-example/table-search-example.component.less
index 667e62bec1..df5c0a38b4 100644
--- a/apps/doc/src/app/components/table/examples/table-search-example/table-search-example.component.less
+++ b/apps/doc/src/app/components/table/examples/table-search-example/table-search-example.component.less
@@ -17,6 +17,10 @@
     input {
       padding: 8px;
     }
+
+    button {
+      margin-right: 8px;
+    }
   }
 
   .format {
diff --git a/libs/components/src/lib/components/table/th/th.style.less b/libs/components/src/lib/components/table/th/th.style.less
index 41ec7ab490..97c3a7448c 100644
--- a/libs/components/src/lib/components/table/th/th.style.less
+++ b/libs/components/src/lib/components/table/th/th.style.less
@@ -26,6 +26,11 @@
     border-left: none;
   }
 
+  &:has([prizmInput]:focus) {
+    background-color: var(--prizm-v3-background-fill-primary);
+    box-shadow: 0 0 0 1px var(--prizm-v3-table-stroke-cell-active) inset;
+  }
+
   .resize-bar {
     height: 100%;
     width: 4px;

From fcccdf3d4a8d6b4a89149e9e7d48b17d1b027bc2 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 12 Dec 2023 14:04:45 +0300
Subject: [PATCH 48/49] feat: search clear example added

---
 .../table-search-example/table-search-example.component.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/doc/src/app/components/table/examples/table-search-example/table-search-example.component.html b/apps/doc/src/app/components/table/examples/table-search-example/table-search-example.component.html
index b57eb97f2d..be71ee7eed 100644
--- a/apps/doc/src/app/components/table/examples/table-search-example/table-search-example.component.html
+++ b/apps/doc/src/app/components/table/examples/table-search-example/table-search-example.component.html
@@ -15,6 +15,11 @@
       <tr *ngIf="control.value" prizmThGroup>
         <th class="extra-border search-cell" [resizable]="true" prizmTh>
           <input #input (enter)="search($event, 'name')" prizmInput placeholder="Поиск" />
+          <button
+            [interactive]="true"
+            (click)="input.value = ''; search('', 'name')"
+            prizmInputIconButton="cancel-delete-content"
+          ></button>
           <button
             [interactive]="true"
             (click)="search(input.value, 'name')"

From 66bd35fc67128fa226a1c91c576c8ba4ddbb92e5 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 12 Dec 2023 14:24:28 +0300
Subject: [PATCH 49/49] fix: add search cell focus

---
 libs/components/src/lib/components/table/th/th.style.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/libs/components/src/lib/components/table/th/th.style.less b/libs/components/src/lib/components/table/th/th.style.less
index 97c3a7448c..c031a9544f 100644
--- a/libs/components/src/lib/components/table/th/th.style.less
+++ b/libs/components/src/lib/components/table/th/th.style.less
@@ -26,6 +26,10 @@
     border-left: none;
   }
 
+  &:has([prizmInput]:hover) {
+    box-shadow: 0 0 0 1px var(--prizm-v3-table-stroke-cell-hover) inset;
+  }
+
   &:has([prizmInput]:focus) {
     background-color: var(--prizm-v3-background-fill-primary);
     box-shadow: 0 0 0 1px var(--prizm-v3-table-stroke-cell-active) inset;