From 2c0f21abe3c8c328a88125432730907afa10ca50 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Tue, 30 Jan 2024 15:34:40 +0300
Subject: [PATCH 1/2] fix: revert Select CSS API

---
 src/components/Select/README.md               |  15 ---
 .../Select/__stories__/Select.stories.tsx     |   5 -
 .../Select/__stories__/SelectCustom.scss      |  12 --
 .../__stories__/SelectCustomThemeShowcase.tsx |  36 ------
 .../SelectControl/SelectControl.scss          | 107 ++++++------------
 5 files changed, 35 insertions(+), 140 deletions(-)
 delete mode 100644 src/components/Select/__stories__/SelectCustom.scss
 delete mode 100644 src/components/Select/__stories__/SelectCustomThemeShowcase.tsx

diff --git a/src/components/Select/README.md b/src/components/Select/README.md
index fbeaea22c7..b132aa9f5c 100644
--- a/src/components/Select/README.md
+++ b/src/components/Select/README.md
@@ -115,18 +115,3 @@ const MyComponent = () => {
   return <Select renderFilter={renderFilter}>/* Your options here */</Select>;
 };
 ```
-
-## CSS API
-
-| Name                                | Description                      |
-| :---------------------------------- | :------------------------------- |
-| `--g-select-text-color`             | Text color                       |
-| `--g-select-placeholder-color`      | Placeholder color                |
-| `--g-select-background-color`       | Background color (when disabled) |
-| `--g-select-background-color-hover` | Background color hovered         |
-| `--g-select-border-width`           | Border width                     |
-| `--g-select-border-radius`          | Border radius                    |
-| `--g-select-border-color`           | Border color                     |
-| `--g-select-border-color-hover`     | Border color if hovered          |
-| `--g-select-border-color-active`    | Border color if active           |
-| `--g-select-chevron-color`          | Color of arrow                   |
diff --git a/src/components/Select/__stories__/Select.stories.tsx b/src/components/Select/__stories__/Select.stories.tsx
index 512544cf27..6b18651f9e 100644
--- a/src/components/Select/__stories__/Select.stories.tsx
+++ b/src/components/Select/__stories__/Select.stories.tsx
@@ -5,7 +5,6 @@ import type {Meta, StoryFn} from '@storybook/react';
 import {Select} from '..';
 import type {SelectProps} from '..';
 
-import {CustomThemeShowcase} from './SelectCustomThemeShowcase';
 import {SelectPopupWidthShowcase} from './SelectPopupWidthShowcase';
 import {SelectShowcase} from './SelectShowcase';
 
@@ -40,7 +39,3 @@ Showcase.args = {
     label: '',
     hasClear: false,
 };
-
-const CustomThemeTemplate = () => <CustomThemeShowcase />;
-
-export const CustomTheme: StoryFn = CustomThemeTemplate.bind({});
diff --git a/src/components/Select/__stories__/SelectCustom.scss b/src/components/Select/__stories__/SelectCustom.scss
deleted file mode 100644
index 5b62883753..0000000000
--- a/src/components/Select/__stories__/SelectCustom.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.custom-theme {
-    --g-select-text-color: hsl(38, 100%, 69%);
-    --g-select-placeholder-color: hsl(38, 100%, 81%);
-    --g-select-background-color: hsl(38, 89%, 89%);
-    --g-select-background-color-hover: hsl(39, 100%, 95%);
-    --g-select-border-width: 2px;
-    --g-select-border-radius: 20px;
-    --g-select-border-color: hsl(38, 89%, 89%);
-    --g-select-border-color-hover: hsl(38, 93%, 83%);
-    --g-select-border-color-active: hsl(38, 100%, 73%);
-    --g-select-chevron-color: hsl(38, 93%, 83%);
-}
diff --git a/src/components/Select/__stories__/SelectCustomThemeShowcase.tsx b/src/components/Select/__stories__/SelectCustomThemeShowcase.tsx
deleted file mode 100644
index 0e9286469d..0000000000
--- a/src/components/Select/__stories__/SelectCustomThemeShowcase.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-
-import {Showcase} from '../../../demo/Showcase';
-import {ShowcaseItem} from '../../../demo/ShowcaseItem';
-import {Flex} from '../../layout/Flex/Flex';
-import {Select} from '../Select';
-
-import './SelectCustom.scss';
-
-const options = Array.from({length: 4}, (_, i) => `V${i}`).map((value) => ({
-    value,
-    content: value,
-}));
-
-const value = ['V0', 'V1', 'V2', 'V3'];
-
-export const CustomThemeShowcase = () => (
-    <Showcase title="Custom theme for Select">
-        <ShowcaseItem title="Default">
-            <Flex direction="column" gap="4">
-                <Select multiple options={options} placeholder="placeholder" />
-                <Select multiple options={options} value={value} />
-                <Select multiple options={options} value={value} disabled />
-                <Select multiple options={options} value={value} error={'error'} />
-            </Flex>
-        </ShowcaseItem>
-        <ShowcaseItem title="Custom">
-            <Flex direction="column" gap="4" className="custom-theme">
-                <Select multiple options={options} placeholder="placeholder" />
-                <Select multiple options={options} value={value} />
-                <Select multiple options={options} value={value} disabled />
-                <Select multiple options={options} value={value} error={'error'} />
-            </Flex>
-        </ShowcaseItem>
-    </Showcase>
-);
diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss
index cd7c096822..d9a851469e 100644
--- a/src/components/Select/components/SelectControl/SelectControl.scss
+++ b/src/components/Select/components/SelectControl/SelectControl.scss
@@ -8,44 +8,28 @@ $blockButton: '.#{variables.$ns}select-control__button';
 
 @mixin block_control($size: m) {
     @if $size == 's' {
-        --_--options-text-right-padding: #{select-css-variables.$s-hor-padding};
+        --_--text-right-padding: #{select-css-variables.$s-hor-padding};
         --_--border-radius: var(--g-border-radius-s);
         height: #{variables.$s-height};
-        padding: 4px
-            calc(
-                var(--_--options-text-right-padding) +
-                    var(--g-select-border-width, var(--_--border-width))
-            ); // plus border-width
+        padding: 4px calc(var(--_--text-right-padding) + 1px); // plus border-width
     }
     @if $size == 'm' {
-        --_--options-text-right-padding: #{select-css-variables.$m-hor-padding};
+        --_--text-right-padding: #{select-css-variables.$m-hor-padding};
         --_--border-radius: var(--g-border-radius-m);
         height: #{variables.$m-height};
-        padding: 6px
-            calc(
-                var(--_--options-text-right-padding) +
-                    var(--g-select-border-width, var(--_--border-width))
-            ); // plus border-width
+        padding: 6px calc(var(--_--text-right-padding) + 1px); // plus border-width
     }
     @if $size == 'l' {
-        --_--options-text-right-padding: #{select-css-variables.$l-hor-padding};
+        --_--text-right-padding: #{select-css-variables.$l-hor-padding};
         --_--border-radius: var(--g-border-radius-l);
         height: #{variables.$l-height};
-        padding: 10px
-            calc(
-                var(--_--options-text-right-padding) +
-                    var(--g-select-border-width, var(--_--border-width))
-            ); // plus border-width
+        padding: 10px calc(var(--_--text-right-padding) + 1px); // plus border-width
     }
     @if $size == 'xl' {
-        --_--options-text-right-padding: #{select-css-variables.$xl-hor-padding};
+        --_--text-right-padding: #{select-css-variables.$xl-hor-padding};
         --_--border-radius: var(--g-border-radius-xl);
         height: #{variables.$xl-height};
-        padding: 12px
-            calc(
-                var(--_--options-text-right-padding) +
-                    var(--g-select-border-width, var(--_--border-width))
-            ); // plus border-width
+        padding: 12px calc(var(--_--text-right-padding) + 1px); // plus border-width
     }
 }
 
@@ -67,45 +51,36 @@ $blockButton: '.#{variables.$ns}select-control__button';
 @mixin block_clear_reserved_width() {
     // reserving place for clear icon to fix width changing on displaying clear
     #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_s & {
-        padding-inline-end: calc(#{variables.$s-height} + var(--_--options-text-right-padding));
+        padding-inline-end: calc(#{variables.$s-height} + var(--_--text-right-padding));
     }
     #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_m & {
-        padding-inline-end: calc(#{variables.$m-height} + var(--_--options-text-right-padding));
+        padding-inline-end: calc(#{variables.$m-height} + var(--_--text-right-padding));
     }
     #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_l & {
-        padding-inline-end: calc(#{variables.$l-height} + var(--_--options-text-right-padding));
+        padding-inline-end: calc(#{variables.$l-height} + var(--_--text-right-padding));
     }
     #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_xl & {
-        padding-inline-end: calc(#{variables.$xl-height} + var(--_--options-text-right-padding));
+        padding-inline-end: calc(#{variables.$xl-height} + var(--_--text-right-padding));
     }
 }
 
 @mixin block_clear_reserved_disabled_width() {
     // reserving place for clear icon to fix width changing on displaying clear for disabled select
     #{$block}_has-clear#{$block}_size_s #{$blockButton}_disabled & {
-        padding-inline-end: calc(#{variables.$s-height} + var(--_--options-text-right-padding));
+        padding-inline-end: calc(#{variables.$s-height} + var(--_--text-right-padding));
     }
     #{$block}_has-clear#{$block}_size_m #{$blockButton}_disabled & {
-        padding-inline-end: calc(#{variables.$m-height} + var(--_--options-text-right-padding));
+        padding-inline-end: calc(#{variables.$m-height} + var(--_--text-right-padding));
     }
     #{$block}_has-clear#{$block}_size_l #{$blockButton}_disabled & {
-        padding-inline-end: calc(#{variables.$l-height} + var(--_--options-text-right-padding));
+        padding-inline-end: calc(#{variables.$l-height} + var(--_--text-right-padding));
     }
     #{$block}_has-clear#{$block}_size_xl #{$blockButton}_disabled & {
-        padding-inline-end: calc(#{variables.$xl-height} + var(--_--options-text-right-padding));
+        padding-inline-end: calc(#{variables.$xl-height} + var(--_--text-right-padding));
     }
 }
 
 #{$block} {
-    --_--placeholder-color: var(--g-color-text-hint);
-    --_--background-color: var(--g-color-base-generic-accent-disabled);
-    --_--background-color-hover: var(--g-color-base-simple-hover);
-    --_--border-width: 1px;
-    --_--border-color: var(--g-color-line-generic);
-    --_--border-color-hover: var(--g-color-line-generic-hover);
-    --_--border-color-active: var(--g-color-line-generic-active);
-    --_--chevron-color: var(--g-color-text-secondary);
-
     @include mixins.button-reset();
 
     position: relative;
@@ -138,11 +113,7 @@ $blockButton: '.#{variables.$ns}select-control__button';
 
     &__button {
         @include mixins.button-reset();
-        @include mixins.pin(
-            $blockButton,
-            ('::before', '::after'),
-            var(--g-select-border-radius, var(--_--border-radius))
-        );
+        @include mixins.pin($blockButton, ('::before', '::after'), var(--_--border-radius));
 
         display: inline-flex;
         align-items: center;
@@ -157,11 +128,8 @@ $blockButton: '.#{variables.$ns}select-control__button';
             content: '';
             position: absolute;
             inset: 0;
-
-            border-width: var(--g-select-border-width, var(--_--border-width));
-            border-style: solid;
-            border-color: var(--g-select-border-color, var(--_--border-color));
-            border-radius: var(--g-select-border-radius, var(--_--border-radius));
+            border: 1px solid var(--g-color-line-generic);
+            border-radius: var(--_--border-radius);
         }
 
         &::after {
@@ -172,7 +140,9 @@ $blockButton: '.#{variables.$ns}select-control__button';
         }
 
         &_view_clear {
-            border-color: transparent;
+            &::before {
+                border-color: transparent;
+            }
         }
 
         &_size_s {
@@ -192,22 +162,19 @@ $blockButton: '.#{variables.$ns}select-control__button';
         }
 
         &_error::before {
-            border-color: var(--g-color-text-danger);
+            border-color: var(--g-color-line-danger);
         }
 
         &:hover::after {
-            background-color: var(
-                --g-select-background-color-hover,
-                var(--_--background-color-hover)
-            );
+            background-color: var(--g-color-base-simple-hover);
         }
 
         &_disabled {
-            color: var(--g-select-placeholder-color, var(--_--placeholder-color));
+            color: var(--g-color-text-hint);
             pointer-events: none;
 
             &::after {
-                background-color: var(--g-select-background-color, var(--_--background-color));
+                background-color: var(--g-color-base-generic-accent-disabled);
             }
 
             &::before {
@@ -215,13 +182,13 @@ $blockButton: '.#{variables.$ns}select-control__button';
             }
         }
 
-        &:not(&_error):not(&_disabled):hover::before {
-            border-color: var(--g-select-border-color-hover, var(--_--border-color-hover));
+        &:not(&_error):not(&_disabled):not(&_view_clear):hover::before {
+            border-color: var(--g-color-line-generic-hover);
         }
 
-        &_open:not(&_error)::before,
-        &:not(&_error):focus-visible::before {
-            border-color: var(--g-select-border-color-active, var(--_--border-color-active));
+        &_open:not(&_error):not(&_view_clear)::before,
+        &:not(&_error):not(&_view_clear):focus-visible::before {
+            border-color: var(--g-color-line-generic-active);
         }
     }
 
@@ -244,15 +211,11 @@ $blockButton: '.#{variables.$ns}select-control__button';
         @include mixins.overflow-ellipsis();
         @include block_clear_reserved_disabled_width();
 
-        padding-inline-end: var(--_--options-text-right-padding);
-    }
-
-    &__option-text {
-        color: var(--g-select-text-color, inherit);
+        padding-inline-end: var(--_--text-right-padding);
     }
 
     &__placeholder {
-        color: var(--g-select-placeholder-color, var(--_--placeholder-color));
+        color: var(--g-color-text-hint);
 
         #{$blockButton}:not(#{$blockButton}_disabled) & {
             @include block_clear_reserved_width();
@@ -262,8 +225,7 @@ $blockButton: '.#{variables.$ns}select-control__button';
     &__chevron-icon {
         flex: 0 0 16px;
         margin-inline-start: auto;
-
-        color: var(--g-select-chevron-color, var(--_--chevron-color));
+        color: var(--g-color-text-secondary);
 
         &_disabled {
             color: var(--g-color-text-hint);
@@ -276,6 +238,7 @@ $blockButton: '.#{variables.$ns}select-control__button';
 
     &__error {
         @include mixins.text-body-1();
+
         color: var(--g-color-text-danger);
         margin-block-start: 2px;
     }

From 04e72a839d5f46f00ccba5c341bdec6339ef67eb Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Tue, 30 Jan 2024 16:03:12 +0300
Subject: [PATCH 2/2] fix: fix TextInput and TextArea CSS API

---
 src/components/controls/TextArea/README.md    |  20 ++--
 .../controls/TextArea/TextArea.scss           |  81 +++++++-------
 .../__stories__/TextAreaShowcase.scss         |   4 +-
 src/components/controls/TextInput/README.md   |  21 ++--
 .../controls/TextInput/TextInput.scss         | 100 +++++++++---------
 .../TextInputCustomThemeShowcase.tsx          |   3 +-
 .../__stories__/TextInputShowcase.scss        |   4 +-
 7 files changed, 112 insertions(+), 121 deletions(-)

diff --git a/src/components/controls/TextArea/README.md b/src/components/controls/TextArea/README.md
index aebae18169..87968e3a06 100644
--- a/src/components/controls/TextArea/README.md
+++ b/src/components/controls/TextArea/README.md
@@ -217,13 +217,13 @@ LANDING_BLOCK-->
 
 ## CSS API
 
-| Name                                | Description                      |
-| :---------------------------------- | :------------------------------- |
-| `--g-text-area-text-color`          | Text color                       |
-| `--g-text-area-placeholder-color`   | Placeholder color                |
-| `--g-text-area-background-color`    | Background color (when disabled) |
-| `--g-text-area-border-radius`       | Border radius                    |
-| `--g-text-area-border-width`        | Border width                     |
-| `--g-text-area-border-color`        | Border color                     |
-| `--g-text-area-border-color-hover`  | Border color if hovered          |
-| `--g-text-area-border-color-active` | Border color if active           |
+| Name                                | Description             |
+| :---------------------------------- | :---------------------- |
+| `--g-text-area-text-color`          | Text color              |
+| `--g-text-area-placeholder-color`   | Placeholder color       |
+| `--g-text-area-background-color`    | Background color        |
+| `--g-text-area-border-radius`       | Border radius           |
+| `--g-text-area-border-width`        | Border width            |
+| `--g-text-area-border-color`        | Border color            |
+| `--g-text-area-border-color-hover`  | Border color if hovered |
+| `--g-text-area-border-color-active` | Border color if active  |
diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss
index 31962bb1d1..40ced40988 100644
--- a/src/components/controls/TextArea/TextArea.scss
+++ b/src/components/controls/TextArea/TextArea.scss
@@ -1,17 +1,18 @@
 @use '../../../../styles/mixins';
 @use '../../variables';
 @use '../mixins.scss' as control-mixins;
+@use '../variables.scss' as control-variables;
 
 $block: '.#{variables.$ns}text-area';
 
 #{$block} {
     --_--text-color: var(--g-color-text-primary);
     --_--placeholder-color: var(--g-color-text-hint);
-    --_--background-color: var(--g-color-base-generic-accent-disabled);
-    --_--border-color: var(--g-color-line-generic);
-    --_--border-width: 1px;
-    --_--border-color-hover: var(--g-color-line-generic-hover);
-    --_--border-color-active: var(--g-color-line-generic-active);
+    --_--background-color: transparent;
+    --_--border-width: #{control-variables.$border-width};
+    --_--clear-offset: calc(
+        var(--g-text-area-border-width, #{control-variables.$border-width}) + 1px
+    );
 
     display: inline-block;
     width: 100%;
@@ -21,6 +22,19 @@ $block: '.#{variables.$ns}text-area';
         box-sizing: border-box;
         display: flex;
         width: 100%;
+        background-color: var(--g-text-area-background-color, var(--_--background-color));
+        border-width: var(--g-text-area-border-width, var(--_--border-width));
+        border-style: solid;
+        border-color: var(--g-text-area-border-color, var(--_--border-color));
+        color: var(--g-text-area-text-color, var(--_--text-color));
+
+        &:hover {
+            border-color: var(--g-text-area-border-color-hover, var(--_--border-color-hover));
+        }
+
+        &:focus-within {
+            border-color: var(--g-text-area-border-color-active, var(--_--border-color-active));
+        }
     }
 
     &__control {
@@ -34,7 +48,7 @@ $block: '.#{variables.$ns}text-area';
         width: 100%;
         font-weight: var(--g-text-body-font-weight);
         font-family: var(--g-text-body-font-family);
-        color: var(--g-text-area-text-color, var(--_--text-color));
+        color: inherit;
         background-color: transparent;
         border: none;
         resize: none;
@@ -59,14 +73,14 @@ $block: '.#{variables.$ns}text-area';
 
         &_size_s,
         &_size_m {
-            inset-inline-end: 2px;
-            inset-block-start: 2px;
+            inset-inline-end: var(--_--clear-offset);
+            inset-block-start: var(--_--clear-offset);
         }
 
         &_size_l,
         &_size_xl {
-            inset-inline-end: 3px;
-            inset-block-start: 4px;
+            inset-inline-end: calc(var(--_--clear-offset) + 1px);
+            inset-block-start: calc(var(--_--clear-offset) + 2px);
         }
     }
 
@@ -122,32 +136,19 @@ $block: '.#{variables.$ns}text-area';
 
     &_view {
         &_normal {
-            #{$block}__content {
-                border-width: var(--g-text-area-border-width, var(--_--border-width));
-                border-style: solid;
-                border-color: var(--g-text-area-border-color, var(--_--border-color));
-
-                &:hover {
-                    border-color: var(
-                        --g-text-area-border-color-hover,
-                        var(--_--border-color-hover)
-                    );
-                }
-
-                &:focus-within {
-                    border-color: var(
-                        --g-text-area-border-color-active,
-                        var(--_--border-color-active)
-                    );
-                }
-            }
+            --_--border-color: var(--g-color-line-generic);
+            --_--border-color-hover: var(--g-color-line-generic-hover);
+            --_--border-color-active: var(--g-color-line-generic-active);
         }
 
         &_clear {
+            --_--border-color: transparent;
+            --_--border-color-hover: transparent;
+            --_--border-color-active: transparent;
+            --_--border-radius: 0;
+
             & #{$block}__content {
-                border: 1px solid transparent;
                 border-inline: 0;
-                border-radius: 0;
             }
 
             & #{$block}__control {
@@ -164,19 +165,11 @@ $block: '.#{variables.$ns}text-area';
     );
 
     &_disabled {
-        #{$block}__content {
-            background-color: var(--g-text-area-background-color, var(--_--background-color));
-            color: var(--g-color-text-hint);
-            border-color: transparent;
-
-            &:hover {
-                border-color: transparent;
-            }
-        }
-
-        #{$block}__control {
-            color: var(--g-color-text-hint);
-        }
+        --_--text-color: var(--g-color-text-hint);
+        --_--background-color: var(--g-color-base-generic-accent-disabled);
+        --_--border-color: transparent;
+        --_--border-color-hover: transparent;
+        --_--border-color-active: transparent;
     }
 
     &_has-scrollbar {
diff --git a/src/components/controls/TextArea/__stories__/TextAreaShowcase.scss b/src/components/controls/TextArea/__stories__/TextAreaShowcase.scss
index fcb6217e4b..ed58d9c8e1 100644
--- a/src/components/controls/TextArea/__stories__/TextAreaShowcase.scss
+++ b/src/components/controls/TextArea/__stories__/TextAreaShowcase.scss
@@ -58,8 +58,8 @@
     }
 
     &__custom-theme {
-        --g-text-area-text-color: hsl(38, 100%, 74%);
-        --g-text-area-placeholder-color: hsl(38, 100%, 81%);
+        --g-text-area-text-color: hsl(40, 100%, 40%);
+        --g-text-area-placeholder-color: hsl(24, 8%, 51%);
         --g-text-area-background-color: hsl(38, 89%, 89%);
         --g-text-area-border-radius: 20px;
         --g-text-area-border-width: 2px;
diff --git a/src/components/controls/TextInput/README.md b/src/components/controls/TextInput/README.md
index 4a58a9ea41..4d08cdc9cb 100644
--- a/src/components/controls/TextInput/README.md
+++ b/src/components/controls/TextInput/README.md
@@ -271,13 +271,14 @@ LANDING_BLOCK-->
 
 ## CSS API
 
-| Name                                 | Description                      |
-| :----------------------------------- | :------------------------------- |
-| `--g-text-input-text-color`          | Text color                       |
-| `--g-text-input-placeholder-color`   | Placeholder color                |
-| `--g-text-input-background-color`    | Background color (when disabled) |
-| `--g-text-input-border-radius`       | Border radius                    |
-| `--g-text-input-border-width`        | Border width                     |
-| `--g-text-input-border-color`        | Border color                     |
-| `--g-text-input-border-color-hover`  | Border color if hovered          |
-| `--g-text-input-border-color-active` | Border color if active           |
+| Name                                 | Description             |
+| :----------------------------------- | :---------------------- |
+| `--g-text-input-text-color`          | Text color              |
+| `--g-text-input-label-color`         | Label color             |
+| `--g-text-input-placeholder-color`   | Placeholder color       |
+| `--g-text-input-background-color`    | Background color        |
+| `--g-text-input-border-radius`       | Border radius           |
+| `--g-text-input-border-width`        | Border width            |
+| `--g-text-input-border-color`        | Border color            |
+| `--g-text-input-border-color-hover`  | Border color if hovered |
+| `--g-text-input-border-color-active` | Border color if active  |
diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss
index 77f49fbce4..2a323cbafd 100644
--- a/src/components/controls/TextInput/TextInput.scss
+++ b/src/components/controls/TextInput/TextInput.scss
@@ -8,8 +8,10 @@
         @include mixins.text-body-short;
 
         line-height: calc(
-            #{variables.$s-height} -
-                var(--g-text-input-border-width, #{control-variables.$border-width}) *
+            #{variables.$s-height} - var(
+                    --g-text-input-border-width,
+                    #{control-variables.$border-width}
+                ) *
                 2
         );
         padding-block: 0;
@@ -20,8 +22,10 @@
         @include mixins.text-body-short;
 
         line-height: calc(
-            #{variables.$m-height} -
-                var(--g-text-input-border-width, #{control-variables.$border-width}) *
+            #{variables.$m-height} - var(
+                    --g-text-input-border-width,
+                    #{control-variables.$border-width}
+                ) *
                 2
         );
         padding-block: 0;
@@ -32,8 +36,10 @@
         @include mixins.text-body-short;
 
         line-height: calc(
-            #{variables.$l-height} -
-                var(--g-text-input-border-width, #{control-variables.$border-width}) *
+            #{variables.$l-height} - var(
+                    --g-text-input-border-width,
+                    #{control-variables.$border-width}
+                ) *
                 2
         );
         padding-block: 0;
@@ -44,8 +50,10 @@
         @include mixins.text-body-2;
 
         line-height: calc(
-            #{variables.$xl-height} -
-                var(--g-text-input-border-width, #{control-variables.$border-width}) *
+            #{variables.$xl-height} - var(
+                    --g-text-input-border-width,
+                    #{control-variables.$border-width}
+                ) *
                 2
         );
         padding-block: 0;
@@ -59,11 +67,10 @@ $block: '.#{variables.$ns}text-input';
 
 #{$block} {
     --_--text-color: var(--g-color-text-primary);
+    --_--label-color: inherit;
     --_--placeholder-color: var(--g-color-text-hint);
-    --_--background-color: var(--g-color-base-generic-accent-disabled);
-    --_--border-color: var(--g-color-line-generic);
-    --_--border-color-hover: var(--g-color-line-generic-hover);
-    --_--border-color-active: var(--g-color-line-generic-active);
+    --_--background-color: transparent;
+    --_--border-width: #{control-variables.$border-width};
 
     display: inline-block;
     width: 100%;
@@ -73,6 +80,19 @@ $block: '.#{variables.$ns}text-input';
         box-sizing: border-box;
         display: flex;
         width: 100%;
+        background-color: var(--g-text-input-background-color, var(--_--background-color));
+        border-width: var(--g-text-input-border-width, var(--_--border-width));
+        border-style: solid;
+        border-color: var(--g-text-input-border-color, var(--_--border-color));
+        color: var(--g-text-input-text-color, var(--_--text-color));
+
+        &:hover {
+            border-color: var(--g-text-input-border-color-hover, var(--_--border-color-hover));
+        }
+
+        &:focus-within {
+            border-color: var(--g-text-input-border-color-active, var(--_--border-color-active));
+        }
     }
 
     &__control {
@@ -86,7 +106,7 @@ $block: '.#{variables.$ns}text-input';
         width: 100%;
         font-weight: var(--g-text-body-font-weight);
         font-family: var(--g-text-body-font-family);
-        color: var(--g-text-input-text-color, var(--_--text-color));
+        color: inherit;
         background-color: transparent;
         border: none;
         height: var(--g-text-input-height);
@@ -113,6 +133,7 @@ $block: '.#{variables.$ns}text-input';
         text-overflow: ellipsis;
         white-space: nowrap;
         z-index: 1;
+        color: var(--g-text-input-label-color, var(--_--label-color));
     }
 
     &__clear {
@@ -132,7 +153,7 @@ $block: '.#{variables.$ns}text-input';
 
     &__error-icon {
         box-sizing: content-box;
-        color: var(--g-color-line-danger);
+        color: var(--g-color-text-danger);
         padding-block: var(--_--error-icon-padding-block);
         padding-inline: var(--_--error-icon-padding-inline);
     }
@@ -270,32 +291,19 @@ $block: '.#{variables.$ns}text-input';
 
     &_view {
         &_normal {
-            #{$block}__content {
-                border-width: var(--g-text-input-border-width, #{control-variables.$border-width});
-                border-style: solid;
-                border-color: var(--g-text-input-border-color, var(--_--border-color));
-
-                &:hover {
-                    border-color: var(
-                        --g-text-input-border-color-hover,
-                        var(--_--border-color-hover)
-                    );
-                }
-
-                &:focus-within {
-                    border-color: var(
-                        --g-text-input-border-color-active,
-                        var(--_--border-color-active)
-                    );
-                }
-            }
+            --_--border-color: var(--g-color-line-generic);
+            --_--border-color-hover: var(--g-color-line-generic-hover);
+            --_--border-color-active: var(--g-color-line-generic-active);
         }
 
         &_clear {
+            --_--border-color: transparent;
+            --_--border-color-hover: transparent;
+            --_--border-color-active: transparent;
+            --_--border-radius: 0;
+
             & #{$block}__content {
-                border: 1px solid transparent;
                 border-inline: 0;
-                border-radius: 0;
             }
 
             & #{$block}__control {
@@ -312,23 +320,11 @@ $block: '.#{variables.$ns}text-input';
     );
 
     &_disabled {
-        #{$block}__content {
-            background-color: var(--g-text-input-background-color, var(--_--background-color));
-            color: var(--g-color-text-hint);
-            border-color: transparent;
-
-            &:hover {
-                border-color: transparent;
-            }
-        }
-
-        #{$block}__control {
-            color: var(--g-color-text-hint);
-        }
-
-        #{$block}__label {
-            color: var(--g-color-text-hint);
-        }
+        --_--text-color: var(--g-color-text-hint);
+        --_--background-color: var(--g-color-base-generic-accent-disabled);
+        --_--border-color: transparent;
+        --_--border-color-hover: transparent;
+        --_--border-color-active: transparent;
     }
 
     &_has-scrollbar {
diff --git a/src/components/controls/TextInput/__stories__/TextInputCustomThemeShowcase.tsx b/src/components/controls/TextInput/__stories__/TextInputCustomThemeShowcase.tsx
index ba845dff0a..ac109f998d 100644
--- a/src/components/controls/TextInput/__stories__/TextInputCustomThemeShowcase.tsx
+++ b/src/components/controls/TextInput/__stories__/TextInputCustomThemeShowcase.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import {Checkbox} from '../../../Checkbox';
 import {Text} from '../../../Text';
 import {cn} from '../../../utils/cn';
-import {TextInput, TextInputProps} from '../TextInput';
+import {TextInput} from '../TextInput';
+import type {TextInputProps} from '../TextInput';
 
 import './TextInputShowcase.scss';
 
diff --git a/src/components/controls/TextInput/__stories__/TextInputShowcase.scss b/src/components/controls/TextInput/__stories__/TextInputShowcase.scss
index 096373a599..39f2f1395f 100644
--- a/src/components/controls/TextInput/__stories__/TextInputShowcase.scss
+++ b/src/components/controls/TextInput/__stories__/TextInputShowcase.scss
@@ -73,8 +73,8 @@
     &__custom-theme-examples {
         grid-area: themed;
 
-        --g-text-input-text-color: hsl(38, 100%, 68%);
-        --g-text-input-placeholder-color: hsl(38, 100%, 85%);
+        --g-text-input-text-color: hsl(40, 100%, 40%);
+        --g-text-input-placeholder-color: hsl(24, 8%, 51%);
         --g-text-input-background-color: hsl(38, 89%, 89%);
         --g-text-input-border-width: 2px;
         --g-text-input-border-radius: 40px 20px;