From 188febefffb7fede8e72e47b5a1b511c639d3743 Mon Sep 17 00:00:00 2001
From: "a.kiselev" <a.kiselev@evotor.ru>
Date: Fri, 7 Nov 2025 13:27:31 +0300
Subject: [PATCH 1/3] feat(evo-chip): updated styles

---
 .../evo-chip/evo-chip.component.html          |  32 +-
 .../evo-chip/evo-chip.component.spec.ts       |  24 ++
 .../components/evo-chip/evo-chip.component.ts |  59 ++-
 .../components/evo-chip/evo-chip.module.ts    |  33 +-
 .../src/lib/styles/components/evo-chip.scss   | 221 +++++-----
 src/stories/components/evo-chip.stories.ts    | 385 +++++++++++++++---
 6 files changed, 521 insertions(+), 233 deletions(-)

diff --git a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html
index f69861c33..c17666957 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html
+++ b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html
@@ -1,48 +1,42 @@
 <label class="chip" [evoUiClass]="classes">
     <ng-container [ngSwitch]="type">
         <input
-            *ngSwitchCase="templateVariables?.chipTypes.checkbox"
+            *ngSwitchCase="EvoChipType.checkbox"
             type="checkbox"
+            class="chip__input"
             [disabled]="disabled"
+            [name]="name"
             [ngModel]="value"
             [value]="inheritedValue"
             (ngModelChange)="onInputChange($event)"
-            [name]="name"
         />
         <input
-            *ngSwitchCase="templateVariables?.chipTypes.radio"
+            *ngSwitchCase="EvoChipType.radio"
             type="radio"
+            class="chip__input"
             [disabled]="disabled"
+            [name]="name"
             [ngModel]="value"
             [value]="inheritedValue"
             (ngModelChange)="onInputChange($event)"
-            [name]="name"
         />
     </ng-container>
-    <div
-        class="chip__label"
-        [evoUiClass]="{'disabled': disabled}"
-    >
+    <div class="chip__label" [evoUiClass]="{'disabled': disabled}">
         <span class="chip__text">
             <ng-content></ng-content>
         </span>
-        <div
-            class="chip__counter"
-            *ngIf="(type !== templateVariables?.chipTypes.label || !closable) && counter !== undefined"
-        >
-            <span class="chip__counter-value">
-                {{ counter }}
-            </span>
-        </div>
+
+        <div *ngIf="hasCounter" class="chip__counter">{{ counter }}</div>
+
         <button
-            class="chip__close"
             *ngIf="closable"
+            type="button"
+            class="chip__close"
             [disabled]="disabled"
             [title]="closeTitle"
             (click)="onCloseClick($event)"
-            type="button"
         >
-            <evo-icon shape="decline"></evo-icon>
+            <evo-icon shape="close" class="chip__close-icon"></evo-icon>
         </button>
     </div>
 </label>
diff --git a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts
index cfb044d52..5bf4bb793 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts
+++ b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts
@@ -137,6 +137,30 @@ describe('EvoChipsComponent', () => {
         expect(chipWrapperElement).toHaveClass('chip_theme-grey');
     });
 
+    it('should have class chip_size-normal when size is not passed', () => {
+        createHostByTemplate(`
+            <evo-chip theme="grey" name="myChip" value="1">Chip 1</evo-chip>
+        `);
+        const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
+        expect(chipWrapperElement).toHaveClass('chip_size-normal');
+    });
+
+    it('should have class chip_size-normal when size=normal is passed', () => {
+        createHostByTemplate(`
+            <evo-chip theme="grey" size="normal" name="myChip" value="1">Chip 1</evo-chip>
+        `);
+        const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
+        expect(chipWrapperElement).toHaveClass('chip_size-normal');
+    });
+
+    it('should have class chip_size-large when size=large is passed', () => {
+        createHostByTemplate(`
+            <evo-chip theme="grey" size="large" name="myChip" value="1">Chip 1</evo-chip>
+        `);
+        const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
+        expect(chipWrapperElement).toHaveClass('chip_size-large');
+    });
+
     it('should be disabled and non-clickable if disabled param is passed', fakeAsync(() => {
         createHostByTemplate(`
             <evo-chip theme="grey" name="myChip" value="1">ENABLED</evo-chip>
diff --git a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts
index 4c7ecbb73..b5990bc89 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts
+++ b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts
@@ -1,12 +1,12 @@
 import {
     AfterViewInit,
+    ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
     EventEmitter,
     forwardRef,
     Injector,
     Input,
-    OnInit,
     OnDestroy,
     Output,
 } from '@angular/core';
@@ -27,6 +27,8 @@ export enum EvoChipTheme {
     white = 'white',
 }
 
+export type EvoChipSize = 'normal' | 'large';
+
 @Component({
     selector: 'evo-chip',
     templateUrl: 'evo-chip.component.html',
@@ -38,55 +40,56 @@ export enum EvoChipTheme {
             multi: true,
         },
     ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class EvoChipComponent extends EvoBaseControl implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
-    @Input() type: EvoChipType | string;
-    @Input() theme: EvoChipTheme | string;
+export class EvoChipComponent extends EvoBaseControl implements ControlValueAccessor, AfterViewInit, OnDestroy {
+    @Input() type: EvoChipType | string = EvoChipType.radio;
+    @Input() theme: EvoChipTheme | string = EvoChipTheme.grey;
+    @Input() size: EvoChipSize = 'normal';
     @Input() counter: number;
     @Input() disabled: boolean;
     @Input() name: string;
     @Input() closable: boolean;
     @Input() closeTitle = '';
 
-    @Input('value') set setInitialValue(value: any) {
-        this.inheritedValue = value;
-    }
-
+    // eslint-disable-next-line @angular-eslint/no-output-native
     @Output() close = new EventEmitter<Event>();
 
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    readonly EvoChipType = EvoChipType;
+
     inheritedValue: any;
     value: any;
 
-    templateVariables = {
-        chipTypes: EvoChipType,
-        chipThemes: EvoChipTheme,
-    };
-
     private readonly destroy$ = new Subject<void>();
 
     constructor(protected injector: Injector, private readonly cdr: ChangeDetectorRef) {
         super(injector);
     }
 
+    @Input('value') set setInitialValue(value: any) {
+        this.inheritedValue = value;
+    }
+
     get classes(): string[] {
         const states = {
             touched: this.control?.touched,
             valid: this.currentState[EvoControlStates.valid],
             invalid: this.currentState[EvoControlStates.invalid],
-            disabled: this.control?.disabled,
+            disabled: this.disabled,
         };
 
         const result = Object.keys(states).filter((key: string) => states[key]);
 
         result.push(`theme-${this.theme || EvoChipTheme.grey}`);
-
-        result.push(`type-${this.type}`);
+        result.push(`type-${this.type || EvoChipType.radio}`);
+        result.push(`size-${this.size || 'normal'}`);
 
         return result;
     }
 
-    ngOnInit(): void {
-        this.initDefaultParams();
+    get hasCounter(): boolean {
+        return (this.type !== EvoChipType.label || !this.closable) && this.counter !== undefined;
     }
 
     ngAfterViewInit(): void {
@@ -104,42 +107,34 @@ export class EvoChipComponent extends EvoBaseControl implements ControlValueAcce
 
     writeValue(value: any): void {
         this.value = value;
-        this.cdr.markForCheck();
+        this.cdr.detectChanges();
     }
 
-    registerOnChange(fn: any): void {
+    registerOnChange(fn: (_: any) => void): void {
         this.onChange = fn;
     }
 
-    registerOnTouched(fn: any): void {
+    registerOnTouched(fn: () => void): void {
         this.onTouched = fn;
     }
 
     setDisabledState(state: boolean): void {
         this.disabled = state;
-        this.cdr.markForCheck();
+        this.cdr.detectChanges();
     }
 
     onInputChange(value: any): void {
         this.value = value;
         this.onChange(value);
         this.onTouched();
-        this.cdr.markForCheck();
+        this.cdr.detectChanges();
     }
 
     onCloseClick(e: Event): void {
         this.close.emit(e);
     }
 
-    private initDefaultParams(): void {
-        if (!this.type) {
-            this.type = EvoChipType.radio;
-        }
-        if (!this.theme) {
-            this.theme = EvoChipTheme.grey;
-        }
-    }
-
     private onChange(_value: any): void {}
+
     private onTouched(): void {}
 }
diff --git a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.module.ts b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.module.ts
index c42202ef5..f0eca91ef 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.module.ts
+++ b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.module.ts
@@ -1,10 +1,11 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { EvoChipComponent } from './evo-chip.component';
-import { FormsModule } from '@angular/forms';
-import { EvoUiKitModule } from '../../evo-ui-kit.module';
-import { EvoIconModule } from '../evo-icon';
-import { iconDecline } from '@evotor-dev/evo-icons/dist/monochrome/system';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {EvoChipComponent} from './evo-chip.component';
+import {FormsModule} from '@angular/forms';
+import {EvoUiKitModule} from '../../evo-ui-kit.module';
+import {EvoIconModule} from '../evo-icon';
+import {iconClose} from '@evotor-dev/evo-icons/dist/monochrome/header';
+import {EvoCounterModule} from '../evo-counter';
 
 @NgModule({
     declarations: [EvoChipComponent],
@@ -12,14 +13,16 @@ import { iconDecline } from '@evotor-dev/evo-icons/dist/monochrome/system';
         CommonModule,
         FormsModule,
         EvoUiKitModule,
-        EvoIconModule.forRoot([{
-            name: 'system',
-            shapes: {
-                'decline': iconDecline,
-            }
-        }]),
+        EvoIconModule.forRoot([
+            {
+                name: 'system',
+                shapes: {
+                    close: iconClose,
+                },
+            },
+        ]),
+        EvoCounterModule,
     ],
     exports: [EvoChipComponent],
 })
-export class EvoChipModule {
-}
+export class EvoChipModule {}
diff --git a/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss b/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss
index a6a38b447..622be8835 100644
--- a/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss
+++ b/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss
@@ -1,37 +1,45 @@
-@use "sass:math";
-@import '../mixins.scss';
+@use '../mixins.scss';
 
-.chip {
-    $height: 32px;
-    $parent-selector: &;
-    position: relative;
-    display: inline-flex;
-    max-width: 100%;
+:host {
+    --evo-chip-color: #{mixins.$color-link};
+    --evo-chip-color-hover: #{mixins.$color-link-hover};
+    --evo-chip-color-active: #{mixins.$color-link-active};
 
-    &__label {
-        display: flex;
-        align-items: center;
+    --evo-chip-background-color: #{mixins.$color-background-grey};
+    --evo-chip-background-color-hover: #{mix(mixins.$color-white, mixins.$color-background-grey, 20%)};
+    --evo-chip-background-color-active: #{mix(mixins.$color-black, mixins.$color-background-grey, 10%)};
 
-        max-width: inherit;
-        height: $height;
-        margin: 0;
-        padding: 3px 12px;
-        overflow: hidden;
-        color: $color-link;
+    --evo-chip-checked-color: #{mixins.$color-white};
+    --evo-chip-checked-color-hover: #{mixins.$color-white};
+    --evo-chip-checked-color-active: #{mixins.$color-white};
 
-        @include evo-text-paragraph(p4);
+    --evo-chip-checked-background-color: #{mixins.$color-link};
+    --evo-chip-checked-background-color-hover: #{mixins.$color-link-hover};
+    --evo-chip-checked-background-color-active: #{mixins.$color-link-active};
+}
 
-        background-color: $color-background-grey;
+.chip {
+    $root: &;
 
-        border-radius: math.div($height, 2);
+    --evo-chip-height: 32px;
+    --evo-chip-padding: 4px 8px;
 
-        cursor: pointer;
-        transition: color 0.3s, background-color 0.3s;
+    position: relative;
+    display: inline-flex;
+    max-width: 100%;
 
-        user-select: none;
+    &_theme-white {
+        --evo-chip-background-color: #{mixins.$color-white};
+        --evo-chip-background-color-hover: #{mixins.$color-white};
+        --evo-chip-background-color-active: #{mixins.$color-white};
     }
 
-    input {
+    &_size-large {
+        --evo-chip-height: 40px;
+        --evo-chip-padding: 8px 12px;
+    }
+
+    &__input {
         position: absolute;
         width: 1px;
         height: 1px;
@@ -39,75 +47,71 @@
         clip: rect(0, 0, 0, 0);
     }
 
-    input:disabled + #{$parent-selector}__label,
-    #{$parent-selector}__label_disabled {
-        color: $color-white !important;
-        background-color: $color-disabled !important;
-    }
+    &__label {
+        display: flex;
+        gap: 8px;
+        align-items: center;
 
-    input:checked + #{$parent-selector}__label {
-        color: $color-white;
-        background-color: $color-link;
+        height: var(--evo-chip-height);
 
-        &:focus,
-        &:hover {
-            background-color: $color-link-hover;
-        }
+        padding: var(--evo-chip-padding);
+        overflow: hidden;
+        text-overflow: ellipsis;
 
-        &:active {
-            background-color: $color-link-active;
-        }
-    }
+        color: var(--evo-chip-color);
+        background-color: var(--evo-chip-background-color);
+        border-radius: 8px;
 
-    input:not(:checked) + #{$parent-selector}__label {
-        color: $color-link;
-    }
+        @include mixins.evo-text-paragraph(p4);
 
-    &_theme-white:not(&_type-label) {
-        input:not(:checked) {
-            & + #{$parent-selector}__label {
-                background-color: $color-white;
-            }
+        cursor: pointer;
+        user-select: none;
 
-            &:focus + #{$parent-selector}__label,
-            &:hover + #{$parent-selector}__label {
-                background-color: $color-white-hover;
-            }
+        transition: color 0.3s, background 0.3s;
 
-            &:active + #{$parent-selector}__label {
-                background-color: $color-grey-active;
-            }
+        &:hover,
+        #{$root}__input:focus ~ & {
+            background-color: var(--evo-chip-background-color-hover);
+            color: var(--evo-chip-color-hover);
         }
-    }
 
-    &_theme-grey:not(&_type-label) {
-        input:not(:checked) {
-            & + #{$parent-selector}__label {
-                background-color: $color-background-grey;
-            }
+        &:active,
+        #{$root}__input:active ~ & {
+            background-color: var(--evo-chip-background-color-active);
+            color: var(--evo-chip-color-active);
+        }
 
-            &:focus + #{$parent-selector}__label,
-            &:hover + #{$parent-selector}__label {
-                background-color: $color-grey-hover;
-            }
+        #{$root}__input:checked ~ & {
+            background-color: var(--evo-chip-checked-background-color);
+            color: var(--evo-chip-checked-color);
+        }
 
-            &:active + #{$parent-selector}__label {
-                background-color: $color-grey-active;
-            }
+        #{$root}__input:checked ~ &:hover,
+        #{$root}__input:checked:focus ~ & {
+            background-color: var(--evo-chip-checked-background-color-hover);
+            color: var(--evo-chip-checked-color-hover);
+        }
+
+        #{$root}__input:checked ~ &:active,
+        #{$root}__input:checked:active ~ & {
+            background-color: var(--evo-chip-checked-background-color-active);
+            color: var(--evo-chip-checked-color-active);
+        }
+
+        #{$root}_type-label & {
+            background-color: var(--evo-chip-checked-background-color) !important;
+            color: var(--evo-chip-checked-color) !important;
+            cursor: default;
         }
-    }
 
-    &_type-label {
-        #{$parent-selector}__label {
-            color: $color-white;
-            background-color: $color-link;
+        #{$root}_disabled & {
+            background-color: mixins.$color-disabled !important;
+            color: mixins.$color-white !important;
             cursor: default;
         }
     }
 
     &__text {
-        display: inline-block;
-        align-items: center;
         max-width: 100%;
         overflow: hidden;
         white-space: nowrap;
@@ -117,22 +121,18 @@
     &__counter {
         display: flex;
         justify-content: center;
+        flex-shrink: 0;
         align-items: center;
-        min-width: 18px;
-        min-height: 18px;
-        margin-right: -5px;
-        margin-left: 8px;
+        min-width: 20px;
+        height: 20px;
+        padding: 1px 6px;
         overflow: hidden;
-        color: $color-white;
-        font-weight: bold;
-        font-size: 12px;
-        background-color: $color-primary;
-        border-radius: 9px;
-    }
-
-    &__counter-value {
-        margin: 0 3px;
-        line-height: 16px;
+        color: mixins.$color-white;
+        font-weight: 600;
+        font-size: 13px;
+        background-color: mixins.$color-primary;
+        border-radius: 32px;
+        margin: 2px;
     }
 
     &__close {
@@ -140,28 +140,39 @@
         display: block;
         width: 24px;
         height: 24px;
-        margin: 0 -9px 0 8px;
-        padding: 0;
-        color: $color-white;
-        background: none;
-        border: none;
         cursor: pointer;
-        transition: opacity 0.3s;
+        flex-shrink: 0;
+        color: mixins.$color-link;
+        background: none;
+        transition: 0.3s color;
 
-        &:not(:disabled):hover {
-            opacity: 0.8;
+        &:hover {
+            color: mixins.$color-link-hover;
         }
 
-        &:not(:disabled):active {
-            opacity: 0.9;
+        &:active {
+            color: mixins.$color-link-active;
         }
 
-        evo-icon {
-            z-index: 1;
-            display: block;
-            width: 100%;
-            height: 100%;
-            fill: currentColor;
+        &:disabled {
+            cursor: default;
+            color: mixins.$color-white !important;
         }
+
+        #{$root}_type-label &,
+        #{$root}__input:checked ~ #{$root}__label & {
+            color: mixins.$color-white;
+
+            &:active {
+                color: var(--evo-chip-background-color-active);
+            }
+        }
+    }
+
+    &__close-icon {
+        width: 100%;
+        height: 100%;
+        fill: currentColor;
+        background: none;
     }
 }
diff --git a/src/stories/components/evo-chip.stories.ts b/src/stories/components/evo-chip.stories.ts
index 146e2ac3f..9b8bc831f 100644
--- a/src/stories/components/evo-chip.stories.ts
+++ b/src/stories/components/evo-chip.stories.ts
@@ -9,6 +9,35 @@ const form = fb.group({
     checkboxes: fb.array([[false], [false], [false]]),
 });
 
+const defaultStyles = `
+    :host {
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+    }
+
+    .container {
+        display: flex;
+        gap: 24px;
+        flex-direction: column;
+    }
+
+    .title {
+        margin: 0;
+    }
+
+    .inner-container {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .chips-list {
+        display: flex;
+        gap: 8px;
+    }
+`
+
 export default {
     title: 'Components/Chip',
 
@@ -21,58 +50,130 @@ export default {
 
 export const DefaultRadioGreyColor = () => ({
     template: `
-            <evo-chip name="myChip" value="1">Chip 1</evo-chip>
-            <evo-chip name="myChip" value="2">Chip 2</evo-chip>
-            <evo-chip name="myChip" value="3">Chip 3</evo-chip>
+            <style>
+                ${defaultStyles}
+            </style>
+
+            <h2 class="evo-text-header evo-text-header_h2 title">Default state (type = radio, theme = grey, size = normal)</h2>
+
+            <div class="chips-list">
+                <evo-chip name="myChip" value="1">Chip 1</evo-chip>
+                <evo-chip name="myChip" value="2">Chip 2</evo-chip>
+                <evo-chip name="myChip" value="3">Chip 3</evo-chip>
+            </div>
         `,
 });
 
-DefaultRadioGreyColor.storyName = 'default (radio, grey color)';
+DefaultRadioGreyColor.storyName = 'default (radio, grey color, normal size)';
 
 export const Types = () => ({
     template: `
-            <h4 style="margin: 10px 0;">radio type</h4>
-            <evo-chip type="radio" name="myChip" value="1">Chip 1</evo-chip>
-            <evo-chip type="radio" name="myChip" value="2">Chip 2</evo-chip>
-            <evo-chip type="radio" name="myChip" value="3">Chip 3</evo-chip>
-
-            <h4 style="margin: 20px 0 10px;">checkbox</h4>
-            <evo-chip type="checkbox" name="myChip" value="1">Chip 1</evo-chip>
-            <evo-chip type="checkbox" name="myChip" value="2">Chip 2</evo-chip>
-            <evo-chip type="checkbox" name="myChip" value="3">Chip 3</evo-chip>
+            <style>
+                ${defaultStyles}
+            </style>
+            <div class="container">
+                <h2 class="evo-text-header evo-text-header_h2 title">Type = radio</h2>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = normal</h4>
+
+                    <div class="chips-list">
+                        <evo-chip type="radio" name="myChipNormal" value="1">Chip 1</evo-chip>
+                        <evo-chip type="radio" name="myChipNormal" value="2">Chip 2</evo-chip>
+                        <evo-chip type="radio" name="myChipNormal" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                    <div class="chips-list">
+                        <evo-chip size="large" type="radio" name="myChipLarge" value="1">Chip 1</evo-chip>
+                        <evo-chip size="large" type="radio" name="myChipLarge" value="2">Chip 2</evo-chip>
+                        <evo-chip size="large" type="radio" name="myChipLarge" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+            </div>
+
+            <div class="container">
+                <h2 class="evo-text-header evo-text-header_h2 title">Type = checkbox</h2>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4">Size = normal</h4>
+
+                    <div class="chips-list">
+                        <evo-chip type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip type="checkbox" value="2">Chip 2</evo-chip>
+                        <evo-chip type="checkbox" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                    <div class="chips-list">
+                        <evo-chip size="large" type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip size="large" type="checkbox" value="2">Chip 2</evo-chip>
+                        <evo-chip size="large" type="checkbox" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+            </div>
         `,
 });
 
-Types.storyName = 'types';
+Types.storyName = 'types (radio, checkbox)';
 
 export const WithReactiveForms = () => ({
     template: `
-        <div [formGroup]="form">
-            <h4 class="evo-title evo-title_h4" style="margin: 10px 0;">radio type</h4>
-            <evo-chip type="radio" formControlName="radios" value="1">Chip 1</evo-chip>
-            <evo-chip type="radio" formControlName="radios" [value]="{'object': true}">Chip 2</evo-chip>
-            <evo-chip type="radio" formControlName="radios" value="3">Chip 3</evo-chip>
-            <pre>control value: {{ form.value.radios | json }}</pre>
-
-            <h4 class="evo-title evo-title_h4" style="margin: 20px 0 10px;">checkbox type (control value is boolean)</h4>
-            <evo-chip type="checkbox" [formControl]="form.get('checkboxes').controls[0]">Chip 1</evo-chip>
-            <evo-chip type="checkbox" [formControl]="form.get('checkboxes').controls[1]">Chip 2</evo-chip>
-            <evo-chip type="checkbox" [formControl]="form.get('checkboxes').controls[2]">Chip 3</evo-chip>
-            <pre>control value: {{ form.value.checkboxes | json }}</pre>
-        </div>
-        <h4 class="evo-title evo-title_h4" style="margin: 20px 0 10px;">Patching value in mixed form</h4>
-        <div [formGroup]="mixedForm">
-            <evo-chip
-                *ngFor="let item of list"
-                [formControlName]="item.controlName"
-                [type]="item.type"
-                [value]="item.value"
-            >{{ item.presentationText }}</evo-chip>
-            <br>
-            <br>
-            <p><button evoButton (click)="patchValue()">patch values</button></p>
-            <br>
-            <pre>{{mixedForm.value | json}}</pre>
+        <style>
+            ${defaultStyles}
+
+            .container {
+                align-items: flex-start;
+            }
+        </style>
+
+        <div class="container" [formGroup]="form">
+            <div class="inner-container">
+                <h4 class="evo-title evo-title_h4 title">radio type (size default)</h4>
+
+                <div class="chips-list">
+                    <evo-chip type="radio" formControlName="radios" value="1">Chip 1</evo-chip>
+                    <evo-chip type="radio" formControlName="radios" [value]="{'object': true}">Chip 2</evo-chip>
+                    <evo-chip type="radio" formControlName="radios" value="3">Chip 3</evo-chip>
+                </div>
+
+                <pre>control value: {{ form.value.radios | json }}</pre>
+            </div>
+
+             <div class="inner-container">
+                <h4 class="evo-title evo-title_h4 title">checkbox type (control value is boolean)</h4>
+
+                <div class="chips-list">
+                    <evo-chip type="checkbox" [formControl]="form.get('checkboxes').controls[0]">Chip 1</evo-chip>
+                    <evo-chip type="checkbox" [formControl]="form.get('checkboxes').controls[1]">Chip 2</evo-chip>
+                    <evo-chip type="checkbox" [formControl]="form.get('checkboxes').controls[2]">Chip 3</evo-chip>
+                </div>
+
+                <pre>control value: {{ form.value.checkboxes | json }}</pre>
+             </div>
+
+             <div class="inner-container" [formGroup]="mixedForm">
+                <h4 class="evo-title evo-title_h4 title">Patching value in mixed form</h4>
+
+                <div class="chips-list">
+                    <evo-chip
+                        *ngFor="let item of list"
+                        [formControlName]="item.controlName"
+                        [type]="item.type"
+                        [value]="item.value"
+                    >{{ item.presentationText }}</evo-chip>
+                </div>
+
+                <button evoButton (click)="patchValue()">patch values</button>
+
+                <pre>{{mixedForm.value | json}}</pre>
+             </div>
         </div>
         `,
     props: {
@@ -112,21 +213,107 @@ export const WithReactiveForms = () => ({
 
 WithReactiveForms.storyName = 'with reactive forms';
 
+const colors = `
+--evo-chip-color: white;
+--evo-chip-color-hover: red;
+--evo-chip-color-active: lightgreen;
+
+--evo-chip-background-color: black;
+--evo-chip-background-color-hover: blue;
+--evo-chip-background-color-active: yellow;
+
+--evo-chip-checked-color: purple;
+--evo-chip-checked-color-hover: tomato;
+--evo-chip-checked-color-active: grey;
+
+--evo-chip-checked-background-color: cyan;
+--evo-chip-checked-background-color-hover: yellow;
+--evo-chip-checked-background-color-active: white;
+`;
 export const Colors = () => ({
     template: `
-            <div style="margin: 20px 0">
-                <h4 style="margin-bottom: 10px;">theme grey (default)</h4>
-                <evo-chip type="checkbox" name="myChip" value="1">Chip 1</evo-chip>
-                <evo-chip type="checkbox" name="myChip" value="2">Chip 2</evo-chip>
-                <evo-chip type="checkbox" name="myChip" value="3">Chip 3</evo-chip>
-            </div>
+            <style>
+                ${defaultStyles}
+
+                .chips-list_dark {
+                    background-color: #f4f6f8;
+                    padding: 8px;
+                }
+            </style>
+
+            <div class="container">
+               <h2 class="evo-text-header evo-text-header_h2 title">Theme = grey (default)</h2>
+
+               <div class="inner-container">
+                   <h4 class="evo-text-header evo-text-header_h4 title">Size = normal</h4>
 
-            <div style="background-color: #F4F6F8; padding: 20px; margin: 20px 0">
-                <h4 style="margin-bottom: 10px">theme white</h4>
-                <evo-chip type="checkbox" name="myChip" theme="white" value="1">Chip 1</evo-chip>
-                <evo-chip type="checkbox" name="myChip" theme="white" value="2">Chip 2</evo-chip>
-                <evo-chip type="checkbox" name="myChip" theme="white" value="3">Chip 3</evo-chip>
+                   <div class="chips-list">
+                       <evo-chip type="checkbox" value="1">Chip 1</evo-chip>
+                       <evo-chip type="checkbox" value="2">Chip 2</evo-chip>
+                       <evo-chip type="checkbox" value="3">Chip 3</evo-chip>
+                   </div>
+               </div>
+
+               <div class="inner-container">
+                   <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                   <div class="chips-list">
+                       <evo-chip size="large" type="checkbox" value="1">Chip 1</evo-chip>
+                       <evo-chip size="large" type="checkbox" value="2">Chip 2</evo-chip>
+                       <evo-chip size="large" type="checkbox" value="3">Chip 3</evo-chip>
+                   </div>
+               </div>
             </div>
+
+            <div class="container container_dark">
+                <h2 class="evo-text-header evo-text-header_h2 title">Theme = white</h2>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = normal</h4>
+
+                    <div class="chips-list chips-list_dark">
+                        <evo-chip theme="white" type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip theme="white" type="checkbox" value="2">Chip 2</evo-chip>
+                        <evo-chip theme="white" type="checkbox" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                    <div class="chips-list chips-list_dark">
+                        <evo-chip theme="white" size="large" type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip theme="white" size="large" type="checkbox" value="2">Chip 2</evo-chip>
+                        <evo-chip theme="white" size="large" type="checkbox" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+             </div>
+
+              <div class="container container_dark">
+                <h2 class="evo-text-header evo-text-header_h2 title">Customization</h2>
+
+                <pre>${colors}</pre>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = normal</h4>
+
+                    <div class="chips-list chips-list_dark">
+                        <evo-chip style="${colors}" type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip style="${colors}" type="checkbox" value="2">Chip 2</evo-chip>
+                        <evo-chip style="${colors}" type="checkbox" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                    <div class="chips-list chips-list_dark">
+                        <evo-chip style="${colors}" size="large" type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip style="${colors}" size="large" type="checkbox" value="2">Chip 2</evo-chip>
+                        <evo-chip style="${colors}" type="label" size="large" type="checkbox" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+             </div>
         `,
 });
 
@@ -134,9 +321,33 @@ Colors.storyName = 'colors';
 
 export const WithCounter = () => ({
     template: `
-            <evo-chip name="myChip" value="1" [counter]="5">Chip 1</evo-chip>
-            <evo-chip name="myChip" value="2" [counter]="50">Chip 2</evo-chip>
-            <evo-chip name="myChip" value="3" [counter]="50000">Chip 3</evo-chip>
+            <style>
+                ${defaultStyles}
+            </style>
+
+            <div class="container">
+                <h2 class="evo-text-header evo-text-header_h2 title">Counter</h2>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = normal</h4>
+
+                    <div class="chips-list">
+                        <evo-chip name="myChipNormal" value="1" [counter]="5">Chip 1</evo-chip>
+                        <evo-chip name="myChipNormal" value="2" [counter]="50">Chip 2</evo-chip>
+                        <evo-chip name="myChipNormal" value="3" [counter]="50000">Chip 3</evo-chip>
+                    </div>
+                </div>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                    <div class="chips-list">
+                        <evo-chip size="large" name="myChipLarge" value="1" [counter]="5">Chip 1</evo-chip>
+                        <evo-chip size="large" name="myChipLarge" value="2" [counter]="50">Chip 2</evo-chip>
+                        <evo-chip size="large" name="myChipLarge" value="3" [counter]="50000">Chip 3</evo-chip>
+                    </div>
+                </div>
+            </div>
         `,
 });
 
@@ -144,9 +355,34 @@ WithCounter.storyName = 'with counter';
 
 export const Disabled = () => ({
     template: `
-            <evo-chip name="myChip" value="1">Chip 1</evo-chip>
-            <evo-chip name="myChip" value="2" [disabled]="true">Chip 2</evo-chip>
-            <evo-chip name="myChip" value="3" [counter]="5" [disabled]="true">Chip 3</evo-chip>
+             <style>
+                ${defaultStyles}
+             </style>
+             <div class="container">
+                <h2 class="evo-text-header evo-text-header_h2 title">Disabled state</h2>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = normal</h4>
+
+                    <div class="chips-list">
+                        <evo-chip type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip type="checkbox" value="2" [disabled]="true">Chip 2</evo-chip>
+                        <evo-chip type="checkbox" value="3" [disabled]="true" counter="5">Chip 3</evo-chip>
+                        <evo-chip type="checkbox" value="4" [disabled]="true" [closable]="true">Chip 4</evo-chip>
+                    </div>
+                </div>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                    <div class="chips-list">
+                        <evo-chip size="large" type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip size="large" type="checkbox" value="2" [disabled]="true">Chip 2</evo-chip>
+                        <evo-chip size="large" type="checkbox" value="3" [disabled]="true" counter="5">Chip 3</evo-chip>
+                        <evo-chip size="large" type="checkbox" value="4" [disabled]="true" [closable]="true">Chip 4</evo-chip>
+                    </div>
+                </div>
+             </div>
         `,
 });
 
@@ -154,11 +390,36 @@ Disabled.storyName = 'disabled';
 
 export const Labels = () => ({
     template: `
-            <evo-chip name="myChip" type="label">Chip 1</evo-chip>
-            <evo-chip name="myChip" type="label" [disabled]="true">Chip 2</evo-chip>
-            <evo-chip name="myChip" type="label" [counter]="5">Chip 3</evo-chip>
-            <evo-chip name="myChip" type="label" [closable]="true">Chip 4</evo-chip>
-            <evo-chip name="myChip" type="label" [closable]="true" [disabled]="true">Chip 5</evo-chip>
+            <style>
+                ${defaultStyles}
+            </style>
+            <div class="container">
+                <h2 class="evo-text-header evo-text-header_h2 title">Type = label</h2>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = normal</h4>
+
+                    <div class="chips-list">
+                        <evo-chip name="myChipNormal" type="label">Chip 1</evo-chip>
+                        <evo-chip name="myChipNormal" type="label" [disabled]="true">Chip 2</evo-chip>
+                        <evo-chip name="myChipNormal" type="label" [counter]="5">Chip 3</evo-chip>
+                        <evo-chip name="myChipNormal" type="label" [closable]="true">Chip 4</evo-chip>
+                        <evo-chip name="myChipNormal" type="label" [closable]="true" [disabled]="true">Chip 5</evo-chip>
+                    </div>
+                </div>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                    <div class="chips-list">
+                        <evo-chip size="large" name="myChipLarge" type="label">Chip 1</evo-chip>
+                        <evo-chip size="large" name="myChipLarge" type="label" [disabled]="true">Chip 2</evo-chip>
+                        <evo-chip size="large" name="myChipLarge" type="label" [counter]="5">Chip 3</evo-chip>
+                        <evo-chip size="large" name="myChipLarge" type="label" [closable]="true">Chip 4</evo-chip>
+                        <evo-chip size="large" name="myChipLarge" type="label" [closable]="true" [disabled]="true">Chip 5</evo-chip>
+                    </div>
+                </div>
+            </div>
         `,
 });
 

From a82060c8140797df68a2ca1f864eac8564262d3e Mon Sep 17 00:00:00 2001
From: "a.kiselev" <a.kiselev@evotor.ru>
Date: Thu, 19 Feb 2026 15:26:20 +0300
Subject: [PATCH 2/3] feat(evo-counter): use implementation from market

---
 .../evo-counter}/evo-counter.component.html   |  2 +-
 .../evo-counter/evo-counter.component.scss    | 60 +++++++++++++++++++
 .../evo-counter.component.spec.ts             | 50 ++++++++++++----
 .../evo-counter/evo-counter.component.ts      | 29 +++++++++
 .../evo-counter/enums/evo-counter-size.ts     |  5 ++
 .../evo-counter/evo-counter.component.scss    | 37 ------------
 .../evo-counter/evo-counter.component.ts      | 34 -----------
 .../evo-counter/evo-counter.module.ts         |  2 +-
 .../lib/components/evo-counter/public-api.ts  |  3 +-
 src/stories/components/evo-counter.stories.ts | 18 ++++--
 10 files changed, 149 insertions(+), 91 deletions(-)
 rename projects/evo-ui-kit/src/lib/components/evo-counter/{ => components/evo-counter}/evo-counter.component.html (53%)
 create mode 100644 projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.scss
 rename projects/evo-ui-kit/src/lib/components/evo-counter/{ => components/evo-counter}/evo-counter.component.spec.ts (55%)
 create mode 100644 projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.ts
 create mode 100644 projects/evo-ui-kit/src/lib/components/evo-counter/enums/evo-counter-size.ts
 delete mode 100644 projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.scss
 delete mode 100644 projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.ts

diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.html b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.html
similarity index 53%
rename from projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.html
rename to projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.html
index 843972da5..7ab961e36 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.html
+++ b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.html
@@ -1,3 +1,3 @@
 <div class="evo-counter" [evoUiClass]="blockClasses">
-    <span class="evo-counter__value">{{value}}</span>
+    {{counter}}
 </div>
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.scss b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.scss
new file mode 100644
index 000000000..9dff55944
--- /dev/null
+++ b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.scss
@@ -0,0 +1,60 @@
+@use "../../../../styles/mixins";
+
+:host {
+    --evo-counter-background-color: #{mixins.$color-primary};
+    --evo-counter-color: #{mixins.$color-white};
+    --evo-counter-outline-width: 2px;
+    --evo-counter-outline-color: transparent;
+
+    display: block;
+}
+
+.evo-counter {
+    --inner-margin: 0;
+    --inner-size: 18px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--evo-counter-background-color);
+    border-radius: 32px;
+    color: var(--evo-counter-color);
+    width: fit-content;
+    font-weight: 600;
+    outline: var(--evo-counter-outline-width) solid var(--evo-counter-outline-color);
+
+    margin: var(--inner-margin);
+    min-width: var(--inner-size);
+    height: var(--inner-size);
+
+    &_disabled {
+        background-color: mixins.$color-disabled;
+    }
+
+    &_size_normal {
+        --inner-margin: 2px;
+        --inner-size: calc(24px - var(--inner-margin) * 2);
+
+        font-size: 13px;
+        line-height: 18px;
+        padding: 1px 6px;
+    }
+
+    &_size_large {
+        --inner-margin: 3px;
+        --inner-size: calc(32px - var(--inner-margin) * 2);
+
+        font-size: 17px;
+        line-height: 23px;
+        padding: 1px 8px;
+    }
+
+    &_size_small {
+        --inner-margin: 0;
+        --inner-size: 18px;
+
+        font-size: 10px;
+        line-height: 14px;
+        padding: 2px 6px;
+    }
+}
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.spec.ts b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.spec.ts
similarity index 55%
rename from projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.spec.ts
rename to projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.spec.ts
index c787c5253..a28d72578 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.spec.ts
+++ b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing';
-import { EvoCounterComponent, EvoCounterSize } from './evo-counter.component';
+import { EvoCounterComponent } from './evo-counter.component';
 import { COMPOSITION_BUFFER_MODE } from '@angular/forms';
+import {EvoCounterSize} from '../../enums/evo-counter-size';
 
 describe('EvoCounterComponent', () => {
     let component: EvoCounterComponent;
@@ -41,26 +42,49 @@ describe('EvoCounterComponent', () => {
     }));
 
     it('should be normal if size is not set', () => {
-        expect(component.size).toEqual(EvoCounterSize.normal);
-        expect(fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_size-small')).toBeFalsy();
+        expect(component.size).toEqual(EvoCounterSize.NORMAL);
+        expect(fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_size_small')).toBeFalsy();
     });
 
     it('should be small if set small size', fakeAsync(() => {
-        expect(counterEl.classList.contains('evo-counter_size-small')).toBeFalsy();
-        expect(component.size).toEqual(EvoCounterSize.normal);
-        component.setSize = EvoCounterSize.small;
+        expect(counterEl.classList.contains('evo-counter_size_small')).toBeFalsy();
+        expect(component.size).toEqual(EvoCounterSize.NORMAL);
+        component.size = EvoCounterSize.SMALL;
         fixture.debugElement.triggerEventHandler('click', null);
         fixture.detectChanges();
-        expect(component.size).toEqual(EvoCounterSize.small);
-        expect(fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_size-small')).toBeTruthy();
+        expect(component.size).toEqual(EvoCounterSize.SMALL);
+        expect(fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_size_small')).toBeTruthy();
     }));
 
-    it('should be normal if set incorrect size', () => {
-        expect(component.size).toEqual(EvoCounterSize.normal);
-        component.setSize = 'incorrect' as EvoCounterSize;
+    it('should be large if set large size', fakeAsync(() => {
+        expect(counterEl.classList.contains('evo-counter_size_small')).toBeFalsy();
+        expect(component.size).toEqual(EvoCounterSize.NORMAL);
+        component.size = EvoCounterSize.LARGE;
         fixture.debugElement.triggerEventHandler('click', null);
         fixture.detectChanges();
-        expect(component.size).toEqual(EvoCounterSize.normal);
-        expect(fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_size-small')).toBeFalsy();
+        expect(component.size).toEqual(EvoCounterSize.LARGE);
+        expect(fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_size_large')).toBeTruthy();
+    }));
+
+    it('should display the current value if it is less than maxValue', () => {
+        component.value = 5;
+        component.maxValue = 10;
+
+        fixture.debugElement.triggerEventHandler('click', null);
+        fixture.detectChanges();
+
+        const content = fixture.nativeElement.querySelector('.evo-counter').textContent;
+        expect(content).toContain('5');
+    });
+
+    it('should display maxValue with a plus sign if value exceeds maxValue', () => {
+        component.value = 100;
+        component.maxValue = 99;
+
+        fixture.debugElement.triggerEventHandler('click', null);
+        fixture.detectChanges();
+
+        const content = fixture.nativeElement.querySelector('.evo-counter').textContent;
+        expect(content).toContain('99+');
     });
 });
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.ts b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.ts
new file mode 100644
index 000000000..5a894dcfa
--- /dev/null
+++ b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.ts
@@ -0,0 +1,29 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {EvoCounterSize} from '../../enums/evo-counter-size';
+
+@Component({
+    selector: 'evo-counter',
+    templateUrl: './evo-counter.component.html',
+    styleUrls: ['./evo-counter.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EvoCounterComponent {
+    @Input() value = 0;
+    @Input() maxValue: number;
+    @Input() disabled: boolean;
+    @Input() size = EvoCounterSize.NORMAL;
+
+    get blockClasses(): {[cssClass: string]: boolean} {
+        return {
+            disabled: this.disabled,
+            [`size_${this.size}`]: !!this.size,
+        };
+    }
+
+    get counter(): string {
+        const current = this.value;
+        const max = this.maxValue;
+
+        return current > max ? `${max}+` : String(current);
+    }
+}
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/enums/evo-counter-size.ts b/projects/evo-ui-kit/src/lib/components/evo-counter/enums/evo-counter-size.ts
new file mode 100644
index 000000000..ab90038fc
--- /dev/null
+++ b/projects/evo-ui-kit/src/lib/components/evo-counter/enums/evo-counter-size.ts
@@ -0,0 +1,5 @@
+export enum EvoCounterSize {
+    LARGE = 'large',
+    NORMAL = 'normal',
+    SMALL = 'small',
+}
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.scss b/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.scss
deleted file mode 100644
index 687d0f535..000000000
--- a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import '../../styles/variables.scss';
-
-.evo-counter {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: fit-content;
-    min-width: 20px;
-    height: 20px;
-    padding: 1px 6px;
-    background-color: $color-primary;
-    border-radius: 32px;
-
-    &_disabled {
-        background-color: $color-disabled;
-    }
-
-    &__value {
-        color: $color-white;
-        font: var(--evo-font);
-        font-weight: 700;
-        font-size: 13px;
-        line-height: 18px;
-    }
-
-    &_size-small {
-        min-width: 18px;
-        height: 18px;
-        padding: 0 6px;
-
-        .evo-counter__value {
-            font-weight: 600;
-            font-size: 10px;
-            line-height: 14px;
-        }
-    }
-}
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.ts b/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.ts
deleted file mode 100644
index 60374e9e1..000000000
--- a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-export enum EvoCounterSize {
-    small = 'small',
-    normal = 'normal',
-}
-
-@Component({
-    selector: 'evo-counter',
-    templateUrl: './evo-counter.component.html',
-    styleUrls: ['./evo-counter.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class EvoCounterComponent {
-
-    @Input() value: number;
-    @Input() disabled: boolean;
-
-    size: EvoCounterSize = EvoCounterSize.normal;
-
-    @Input('size') set setSize(size: EvoCounterSize | string) {
-        if (EvoCounterSize[size]) {
-            this.size = EvoCounterSize[size];
-        }
-    }
-
-    get blockClasses(): { [cssClass: string]: boolean } {
-        return {
-            'disabled': this.disabled,
-            [`size-${this.size}`]: this.size !== EvoCounterSize.normal
-        };
-    }
-
-}
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.module.ts b/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.module.ts
index de782a99b..97cc3231c 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.module.ts
+++ b/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { EvoCounterComponent } from './evo-counter.component';
 import { EvoUiKitModule } from '../../evo-ui-kit.module';
+import {EvoCounterComponent} from './components/evo-counter/evo-counter.component';
 
 @NgModule({
     imports: [
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/public-api.ts b/projects/evo-ui-kit/src/lib/components/evo-counter/public-api.ts
index cd7a48b06..102811b3b 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-counter/public-api.ts
+++ b/projects/evo-ui-kit/src/lib/components/evo-counter/public-api.ts
@@ -1,2 +1,3 @@
-export * from './evo-counter.component';
+export * from './components/evo-counter/evo-counter.component';
+export * from './enums/evo-counter-size';
 export * from './evo-counter.module';
diff --git a/src/stories/components/evo-counter.stories.ts b/src/stories/components/evo-counter.stories.ts
index 79919d0ff..874a3d380 100644
--- a/src/stories/components/evo-counter.stories.ts
+++ b/src/stories/components/evo-counter.stories.ts
@@ -1,5 +1,5 @@
 import {moduleMetadata} from '@storybook/angular';
-import {EvoCounterModule} from 'projects/evo-ui-kit/src/lib/components/evo-counter';
+import {EvoCounterModule, EvoCounterSize} from 'projects/evo-ui-kit/src/public_api';
 
 export default {
     title: 'Components/Counter',
@@ -33,10 +33,20 @@ export const Default = () => ({
         <div class='section'>
             <h4>Small counter</h4>
             <span class="counter-block">
-                <evo-counter [value]='1' size='small'></evo-counter>
+                <evo-counter [value]='1' size='${EvoCounterSize.SMALL}'></evo-counter>
             </span>
             <span class="counter-block">
-                <evo-counter [value]='32131' size='small'></evo-counter>
+                <evo-counter [value]='32131' size='${EvoCounterSize.SMALL}'></evo-counter>
+            </span>
+        </div>
+
+         <div class='section'>
+            <h4>Large counter</h4>
+            <span class="counter-block">
+                <evo-counter [value]='1' size='${EvoCounterSize.LARGE}'></evo-counter>
+            </span>
+            <span class="counter-block">
+                <evo-counter [value]='32131' size='${EvoCounterSize.LARGE}'></evo-counter>
             </span>
         </div>
 
@@ -46,7 +56,7 @@ export const Default = () => ({
                 <evo-counter [value]='1' [disabled]='true'></evo-counter>
             </span>
             <span class="counter-block">
-                <evo-counter [value]='1' [disabled]='true' size='small'></evo-counter>
+                <evo-counter [value]='1' [disabled]='true' size='${EvoCounterSize.SMALL}'></evo-counter>
             </span>
         </div>
         `,

From 5c70f7b52cce9ea1a0906a2636eb7faef4c273ef Mon Sep 17 00:00:00 2001
From: "a.kiselev" <a.kiselev@evotor.ru>
Date: Fri, 20 Feb 2026 13:08:42 +0300
Subject: [PATCH 3/3] refactor(evo-chip): use inner css variables

---
 .../evo-chip/evo-chip.component.html          |  75 +++---
 .../evo-chip/evo-chip.component.spec.ts       |  59 ++---
 .../components/evo-chip/evo-chip.component.ts |  36 ++-
 .../src/lib/styles/components/evo-chip.scss   | 237 ++++++++++--------
 .../evo-ui-kit/src/lib/styles/variables.scss  |   2 +
 5 files changed, 220 insertions(+), 189 deletions(-)

diff --git a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html
index c17666957..5cbbb0ae0 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html
+++ b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html
@@ -1,42 +1,43 @@
-<label class="chip" [evoUiClass]="classes">
-    <ng-container [ngSwitch]="type">
-        <input
-            *ngSwitchCase="EvoChipType.checkbox"
-            type="checkbox"
-            class="chip__input"
-            [disabled]="disabled"
-            [name]="name"
-            [ngModel]="value"
-            [value]="inheritedValue"
-            (ngModelChange)="onInputChange($event)"
-        />
-        <input
-            *ngSwitchCase="EvoChipType.radio"
-            type="radio"
-            class="chip__input"
-            [disabled]="disabled"
-            [name]="name"
-            [ngModel]="value"
-            [value]="inheritedValue"
-            (ngModelChange)="onInputChange($event)"
-        />
-    </ng-container>
-    <div class="chip__label" [evoUiClass]="{'disabled': disabled}">
+<div class="chip" [evoUiClass]="classes">
+    <label class="chip__label">
+        <ng-container [ngSwitch]="type">
+            <input
+                *ngSwitchCase="EvoChipType.checkbox"
+                type="checkbox"
+                class="chip__input"
+                [disabled]="disabled"
+                [name]="name"
+                [ngModel]="currentValue"
+                [value]="chipValue"
+                (ngModelChange)="onInputChange($event)"
+            />
+            <input
+                *ngSwitchCase="EvoChipType.radio"
+                type="radio"
+                class="chip__input"
+                [disabled]="disabled"
+                [name]="name"
+                [ngModel]="currentValue"
+                [value]="chipValue"
+                (ngModelChange)="onInputChange($event)"
+            />
+        </ng-container>
+
         <span class="chip__text">
             <ng-content></ng-content>
         </span>
 
-        <div *ngIf="hasCounter" class="chip__counter">{{ counter }}</div>
+        <evo-counter *ngIf="hasCounter" [value]="counter"></evo-counter>
+    </label>
 
-        <button
-            *ngIf="closable"
-            type="button"
-            class="chip__close"
-            [disabled]="disabled"
-            [title]="closeTitle"
-            (click)="onCloseClick($event)"
-        >
-            <evo-icon shape="close" class="chip__close-icon"></evo-icon>
-        </button>
-    </div>
-</label>
+    <button
+        *ngIf="closable"
+        type="button"
+        class="chip__close-btn"
+        [disabled]="disabled"
+        [title]="closeTitle"
+        (click)="onCloseClick($event)"
+    >
+        <evo-icon shape="close" class="chip__close-icon"></evo-icon>
+    </button>
+</div>
diff --git a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts
index 5bf4bb793..e825781f6 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts
+++ b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts
@@ -1,11 +1,11 @@
 import {createHostFactory, SpectatorHost} from '@ngneat/spectator';
 import {EvoChipComponent, EvoChipTheme, EvoChipType} from './evo-chip.component';
 import {FormArray, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {Component, QueryList, ViewChildren} from '@angular/core';
+import {Component, DebugElement, QueryList, ViewChildren} from '@angular/core';
 import {EvoUiClassDirective} from '../../directives';
 import {fakeAsync, tick} from '@angular/core/testing';
-import {EvoIconModule} from '../evo-icon';
-import {icons} from '@evotor-dev/evo-icons/dist/monochrome';
+import {EvoCounterComponent, EvoCounterModule} from '../evo-counter';
+import {By} from '@angular/platform-browser';
 
 @Component({selector: 'evo-host-component', template: ''})
 class TestHostComponent {
@@ -24,7 +24,7 @@ class TestHostComponent {
 const createHost = createHostFactory({
     component: EvoChipComponent,
     declarations: [EvoUiClassDirective],
-    imports: [FormsModule, ReactiveFormsModule, EvoIconModule.forRoot([...icons])],
+    imports: [FormsModule, ReactiveFormsModule, EvoCounterModule],
     host: TestHostComponent,
 });
 
@@ -113,52 +113,52 @@ describe('EvoChipsComponent', () => {
         expect(inputElement === null).toBeTruthy();
     });
 
-    it('should have class chip_theme-grey when theme is not passed', () => {
+    it('should have class chip_theme_grey when theme is not passed', () => {
         createHostByTemplate(`
             <evo-chip name="myChip" value="1">Chip 1</evo-chip>
         `);
         const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
-        expect(chipWrapperElement).toHaveClass('chip_theme-grey');
+        expect(chipWrapperElement).toHaveClass('chip_theme_grey');
     });
 
-    it('should have class chip_theme-white when theme is passed', () => {
+    it('should have class chip_theme_white when theme is passed', () => {
         createHostByTemplate(`
             <evo-chip theme="white" name="myChip" value="1">Chip 1</evo-chip>
         `);
         const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
-        expect(chipWrapperElement).toHaveClass('chip_theme-white');
+        expect(chipWrapperElement).toHaveClass('chip_theme_white');
     });
 
-    it('should have class chip_theme-grey when theme is passed', () => {
+    it('should have class chip_theme_grey when theme is passed', () => {
         createHostByTemplate(`
             <evo-chip theme="grey" name="myChip" value="1">Chip 1</evo-chip>
         `);
         const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
-        expect(chipWrapperElement).toHaveClass('chip_theme-grey');
+        expect(chipWrapperElement).toHaveClass('chip_theme_grey');
     });
 
-    it('should have class chip_size-normal when size is not passed', () => {
+    it('should have class chip_size_normal when size is not passed', () => {
         createHostByTemplate(`
             <evo-chip theme="grey" name="myChip" value="1">Chip 1</evo-chip>
         `);
         const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
-        expect(chipWrapperElement).toHaveClass('chip_size-normal');
+        expect(chipWrapperElement).toHaveClass('chip_size_normal');
     });
 
-    it('should have class chip_size-normal when size=normal is passed', () => {
+    it('should have class chip_size_normal when size=normal is passed', () => {
         createHostByTemplate(`
             <evo-chip theme="grey" size="normal" name="myChip" value="1">Chip 1</evo-chip>
         `);
         const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
-        expect(chipWrapperElement).toHaveClass('chip_size-normal');
+        expect(chipWrapperElement).toHaveClass('chip_size_normal');
     });
 
-    it('should have class chip_size-large when size=large is passed', () => {
+    it('should have class chip_size_large when size=large is passed', () => {
         createHostByTemplate(`
             <evo-chip theme="grey" size="large" name="myChip" value="1">Chip 1</evo-chip>
         `);
         const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
-        expect(chipWrapperElement).toHaveClass('chip_size-large');
+        expect(chipWrapperElement).toHaveClass('chip_size_large');
     });
 
     it('should be disabled and non-clickable if disabled param is passed', fakeAsync(() => {
@@ -206,7 +206,7 @@ describe('EvoChipsComponent', () => {
         evoChipComponents.forEach((chip: EvoChipComponent, index: number) => {
             chipElements[index].querySelector('label').dispatchEvent(new MouseEvent('click'));
             host.detectChanges();
-            expect(chip.value === host.hostComponent.values[index]).toBeTruthy();
+            expect(chip.currentValue === host.hostComponent.values[index]).toBeTruthy();
         });
     });
 
@@ -250,7 +250,7 @@ describe('EvoChipsComponent', () => {
         host.detectChanges();
         const chipElements = host.hostFixture.nativeElement.querySelectorAll('evo-chip');
         chipElements.forEach((chip: HTMLElement, index: number) => {
-            expect(chip.querySelector('.chip__close') === null).toBeFalsy();
+            expect(chip.querySelector('.chip__close-btn') === null).toBeFalsy();
         });
     });
 
@@ -262,10 +262,11 @@ describe('EvoChipsComponent', () => {
         `);
 
         host.detectChanges();
-        const chipElements = host.hostFixture.nativeElement.querySelectorAll('evo-chip');
-        chipElements.forEach((chip: HTMLElement, index: number) => {
-            expect(chip.querySelector('.chip__close') === null).toBeTruthy();
-            expect(chip.querySelector('.chip__counter') === null).toBeFalsy();
+        const chipDebugElements = host.hostFixture.debugElement.queryAll(By.css('evo-chip'));
+
+        chipDebugElements.forEach((chipDebug: DebugElement) => {
+            expect(chipDebug.query(By.css('.chip__close-btn'))).toBeFalsy();
+            expect(chipDebug.query(By.directive(EvoCounterComponent))).toBeTruthy();
         });
     });
 
@@ -277,10 +278,10 @@ describe('EvoChipsComponent', () => {
         `);
 
         host.detectChanges();
-        const chipElements = host.hostFixture.nativeElement.querySelectorAll('evo-chip');
-        chipElements.forEach((chip: HTMLElement, index: number) => {
-            expect(chip.querySelector('.chip__close') === null).toBeFalsy();
-            expect(chip.querySelector('.chip__counter') === null).toBeTruthy();
+        const chipDebugElements = host.hostFixture.debugElement.queryAll(By.css('evo-chip'));
+        chipDebugElements.forEach((chipDebug: DebugElement) => {
+            expect(chipDebug.query(By.css('.chip__close-btn'))).toBeTruthy();
+            expect(chipDebug.query(By.directive(EvoCounterComponent))).toBeFalsy();
         });
     });
 
@@ -296,7 +297,7 @@ describe('EvoChipsComponent', () => {
         host.detectChanges();
         const chipElement = host.hostFixture.nativeElement.querySelector('evo-chip');
         const e = new MouseEvent('click');
-        chipElement.querySelector('.chip__close').dispatchEvent(e);
+        chipElement.querySelector('.chip__close-btn').dispatchEvent(e);
         expect(host.hostComponent.onCloseClick).toHaveBeenCalledWith(e);
     }));
 
@@ -311,7 +312,7 @@ describe('EvoChipsComponent', () => {
 
         host.detectChanges();
         const chipElement = host.hostFixture.nativeElement.querySelector('evo-chip');
-        chipElement.querySelector('.chip__close').click();
+        chipElement.querySelector('.chip__close-btn').click();
         expect(host.hostComponent.onCloseClick).not.toHaveBeenCalled();
     }));
 
@@ -332,7 +333,7 @@ describe('EvoChipsComponent', () => {
         host.detectChanges();
 
         expect(onChangeSpy).not.toHaveBeenCalled();
-        expect(chipComponent.value).toBe(true);
+        expect(chipComponent.currentValue).toBe(true);
 
         // Сбрасываем spy
         onChangeSpy.calls.reset();
diff --git a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts
index b5990bc89..9d806ecb7 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts
+++ b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts
@@ -43,6 +43,7 @@ export type EvoChipSize = 'normal' | 'large';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EvoChipComponent extends EvoBaseControl implements ControlValueAccessor, AfterViewInit, OnDestroy {
+    @Input('value') chipValue: any;
     @Input() type: EvoChipType | string = EvoChipType.radio;
     @Input() theme: EvoChipTheme | string = EvoChipTheme.grey;
     @Input() size: EvoChipSize = 'normal';
@@ -58,8 +59,7 @@ export class EvoChipComponent extends EvoBaseControl implements ControlValueAcce
     // eslint-disable-next-line @typescript-eslint/naming-convention
     readonly EvoChipType = EvoChipType;
 
-    inheritedValue: any;
-    value: any;
+    currentValue: any;
 
     private readonly destroy$ = new Subject<void>();
 
@@ -67,25 +67,17 @@ export class EvoChipComponent extends EvoBaseControl implements ControlValueAcce
         super(injector);
     }
 
-    @Input('value') set setInitialValue(value: any) {
-        this.inheritedValue = value;
-    }
-
-    get classes(): string[] {
-        const states = {
-            touched: this.control?.touched,
+    get classes(): Record<string, boolean> {
+        return {
             valid: this.currentState[EvoControlStates.valid],
             invalid: this.currentState[EvoControlStates.invalid],
             disabled: this.disabled,
+            [`theme_${this.theme}`]: !!this.theme,
+            [`type_${this.type}`]: !!this.type,
+            [`size_${this.size}`]: !!this.size,
+            'has-counter': this.hasCounter,
+            'is-closable': this.closable,
         };
-
-        const result = Object.keys(states).filter((key: string) => states[key]);
-
-        result.push(`theme-${this.theme || EvoChipTheme.grey}`);
-        result.push(`type-${this.type || EvoChipType.radio}`);
-        result.push(`size-${this.size || 'normal'}`);
-
-        return result;
     }
 
     get hasCounter(): boolean {
@@ -106,8 +98,8 @@ export class EvoChipComponent extends EvoBaseControl implements ControlValueAcce
     }
 
     writeValue(value: any): void {
-        this.value = value;
-        this.cdr.detectChanges();
+        this.currentValue = value;
+        this.cdr.markForCheck();
     }
 
     registerOnChange(fn: (_: any) => void): void {
@@ -120,14 +112,14 @@ export class EvoChipComponent extends EvoBaseControl implements ControlValueAcce
 
     setDisabledState(state: boolean): void {
         this.disabled = state;
-        this.cdr.detectChanges();
+        this.cdr.markForCheck();
     }
 
     onInputChange(value: any): void {
-        this.value = value;
+        this.currentValue = value;
         this.onChange(value);
         this.onTouched();
-        this.cdr.detectChanges();
+        this.cdr.markForCheck();
     }
 
     onCloseClick(e: Event): void {
diff --git a/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss b/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss
index 622be8835..cdd1ef1b5 100644
--- a/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss
+++ b/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss
@@ -6,8 +6,8 @@
     --evo-chip-color-active: #{mixins.$color-link-active};
 
     --evo-chip-background-color: #{mixins.$color-background-grey};
-    --evo-chip-background-color-hover: #{mix(mixins.$color-white, mixins.$color-background-grey, 20%)};
-    --evo-chip-background-color-active: #{mix(mixins.$color-black, mixins.$color-background-grey, 10%)};
+    --evo-chip-background-color-hover: #{mixins.$color-grey-hover};
+    --evo-chip-background-color-active: #{mixins.$color-grey-active};
 
     --evo-chip-checked-color: #{mixins.$color-white};
     --evo-chip-checked-color-hover: #{mixins.$color-white};
@@ -21,22 +21,120 @@
 .chip {
     $root: &;
 
-    --evo-chip-height: 32px;
-    --evo-chip-padding: 4px 8px;
-
     position: relative;
-    display: inline-flex;
     max-width: 100%;
 
-    &_theme-white {
-        --evo-chip-background-color: #{mixins.$color-white};
-        --evo-chip-background-color-hover: #{mixins.$color-white};
-        --evo-chip-background-color-active: #{mixins.$color-white};
+    --inner-height: 32px;
+
+    --inner-padding: 4px 8px;
+    --inner-padding-right: 8px;
+
+    --inner-bg: var(--evo-chip-background-color);
+    --inner-color: var(--evo-chip-color);
+
+    --inner-cursor: pointer;
+
+    --inner-close-right: 2px;
+    --inner-close-padding: 2px;
+    --inner-close-active-bg: #{mixins.$color-cool-gray-06};
+
+    &_disabled {
+        --inner-bg: #{mixins.$color-disabled} !important;
+        --inner-color: #{mixins.$color-white} !important;
+
+        --inner-cursor: default;
     }
 
-    &_size-large {
-        --evo-chip-height: 40px;
-        --evo-chip-padding: 8px 12px;
+    &:has(#{$root}__input:checked) {
+        --inner-bg: var(--evo-chip-checked-background-color);
+        --inner-color: var(--evo-chip-checked-color);
+
+        &:hover,
+        &:has(:focus-visible) {
+            --inner-bg: var(--evo-chip-checked-background-color-hover);
+            --inner-color: var(--evo-chip-checked-color-hover);
+        }
+
+        &:active,
+        &:has(:active) {
+            --inner-bg: var(--evo-chip-checked-background-color-active);
+            --inner-color: var(--evo-chip-checked-color-active);
+        }
+    }
+
+    &_theme_grey {
+        --inner-bg: var(--evo-chip-background-color);
+        --inner-color: var(--evo-chip-color);
+        --inner-close-active-bg: #{mixins.$color-cool-gray-06};
+
+        &:hover,
+        &:has(:focus-visible) {
+            --inner-bg: var(--evo-chip-background-color-hover);
+            --inner-color: var(--evo-chip-color-hover);
+        }
+
+        &:active,
+        &:has(:active) {
+            --inner-bg: var(--evo-chip-background-color-active);
+            --inner-color: var(--evo-chip-color-active);
+        }
+    }
+
+    &_theme_white {
+        --inner-bg: #{mixins.$color-white};
+        --inner-close-active-bg: #{mixins.$color-cool-gray-12};
+
+        &:hover,
+        &:has(:focus-visible) {
+            --inner-color: #{mixins.$color-link-hover};
+        }
+
+        &:active,
+        &:has(:active) {
+            --inner-color: #{mixins.$color-link-active};
+        }
+    }
+
+    &_theme_grey,
+    &_theme_white {
+        &#{$root}_type_label {
+            --inner-bg: var(--evo-chip-checked-background-color);
+            --inner-color: var(--evo-chip-checked-color);
+            --inner-close-active-bg: #{mixins.$color-cool-gray-12};
+            --inner-cursor: default;
+        }
+    }
+
+    &_size_normal {
+        --inner-height: 32px;
+        --inner-padding: 4px 8px;
+        --inner-padding-right: 8px;
+
+        &#{$root}_has-counter {
+            --inner-padding-right: 4px;
+        }
+
+        &#{$root}_is-closable {
+            --inner-close-padding: 2px;
+            --inner-close-right: 2px;
+            --inner-padding-right: 36px;
+        }
+    }
+
+    &_size_large {
+        --inner-height: 40px;
+        --inner-padding: 8px 12px;
+        --inner-padding-right: 12px;
+
+        &#{$root}_has-counter {
+            --inner-padding-right: 8px;
+        }
+
+        &#{$root}_is-closable {
+            --inner-close-padding: 4px;
+            --inner-close-right: 4px;
+            --inner-padding-right: 40px;
+        }
     }
 
     &__input {
@@ -52,63 +150,25 @@
         gap: 8px;
         align-items: center;
 
-        height: var(--evo-chip-height);
+        height: var(--inner-height);
+
+        padding: var(--inner-padding);
+        padding-right: var(--inner-padding-right);
 
-        padding: var(--evo-chip-padding);
         overflow: hidden;
         text-overflow: ellipsis;
 
-        color: var(--evo-chip-color);
-        background-color: var(--evo-chip-background-color);
+        background-color: var(--inner-bg);
+        color: var(--inner-color);
+
         border-radius: 8px;
 
         @include mixins.evo-text-paragraph(p4);
 
-        cursor: pointer;
+        cursor: var(--inner-cursor);
         user-select: none;
 
         transition: color 0.3s, background 0.3s;
-
-        &:hover,
-        #{$root}__input:focus ~ & {
-            background-color: var(--evo-chip-background-color-hover);
-            color: var(--evo-chip-color-hover);
-        }
-
-        &:active,
-        #{$root}__input:active ~ & {
-            background-color: var(--evo-chip-background-color-active);
-            color: var(--evo-chip-color-active);
-        }
-
-        #{$root}__input:checked ~ & {
-            background-color: var(--evo-chip-checked-background-color);
-            color: var(--evo-chip-checked-color);
-        }
-
-        #{$root}__input:checked ~ &:hover,
-        #{$root}__input:checked:focus ~ & {
-            background-color: var(--evo-chip-checked-background-color-hover);
-            color: var(--evo-chip-checked-color-hover);
-        }
-
-        #{$root}__input:checked ~ &:active,
-        #{$root}__input:checked:active ~ & {
-            background-color: var(--evo-chip-checked-background-color-active);
-            color: var(--evo-chip-checked-color-active);
-        }
-
-        #{$root}_type-label & {
-            background-color: var(--evo-chip-checked-background-color) !important;
-            color: var(--evo-chip-checked-color) !important;
-            cursor: default;
-        }
-
-        #{$root}_disabled & {
-            background-color: mixins.$color-disabled !important;
-            color: mixins.$color-white !important;
-            cursor: default;
-        }
     }
 
     &__text {
@@ -118,61 +178,36 @@
         text-overflow: ellipsis;
     }
 
-    &__counter {
+    &__close-btn {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: var(--inner-close-right);
         display: flex;
-        justify-content: center;
-        flex-shrink: 0;
-        align-items: center;
-        min-width: 20px;
-        height: 20px;
-        padding: 1px 6px;
-        overflow: hidden;
-        color: mixins.$color-white;
-        font-weight: 600;
-        font-size: 13px;
-        background-color: mixins.$color-primary;
-        border-radius: 32px;
-        margin: 2px;
-    }
-
-    &__close {
-        position: relative;
-        display: block;
-        width: 24px;
-        height: 24px;
+        padding: var(--inner-close-padding);
         cursor: pointer;
-        flex-shrink: 0;
-        color: mixins.$color-link;
-        background: none;
-        transition: 0.3s color;
-
-        &:hover {
-            color: mixins.$color-link-hover;
-        }
+        color: var(--inner-color);
+        background-color: transparent;
+        transition: 0.3s color, 0.3s background-color;
+        border-radius: 4px;
 
+        &:hover,
+        &:focus-visible,
         &:active {
-            color: mixins.$color-link-active;
+            background-color: var(--inner-close-active-bg);
         }
 
         &:disabled {
+            background-color: transparent;
             cursor: default;
-            color: mixins.$color-white !important;
-        }
-
-        #{$root}_type-label &,
-        #{$root}__input:checked ~ #{$root}__label & {
-            color: mixins.$color-white;
-
-            &:active {
-                color: var(--evo-chip-background-color-active);
-            }
         }
     }
 
     &__close-icon {
-        width: 100%;
-        height: 100%;
+        width: 24px;
+        height: 24px;
         fill: currentColor;
         background: none;
+        margin: auto;
     }
 }
diff --git a/projects/evo-ui-kit/src/lib/styles/variables.scss b/projects/evo-ui-kit/src/lib/styles/variables.scss
index 6b94f3d22..93be31aa8 100644
--- a/projects/evo-ui-kit/src/lib/styles/variables.scss
+++ b/projects/evo-ui-kit/src/lib/styles/variables.scss
@@ -53,6 +53,8 @@ $color-icon-dark-active: #829fa6;
 
 $color-cool-gray: #001D26;
 $color-cool-gray-04: rgba($color-cool-gray, 0.04);
+$color-cool-gray-06: rgba($color-cool-gray, 0.06);
+$color-cool-gray-12: rgba($color-cool-gray, 0.12);
 
 $color-graph-1: #EB5365;
 $color-graph-2: #9474C9;