From abd464328c2cf474fb1bf405bab2009f1287b09a Mon Sep 17 00:00:00 2001
From: Nikita Zolotykh <nvzolotykh@yandex-team.ru>
Date: Mon, 16 Mar 2026 15:33:45 +0100
Subject: [PATCH] feat: add colorful view for bool values

---
 docs/spec.md                                  |  2 ++
 src/lib/core/types/specs.ts                   |  4 ++++
 .../components/Views/BaseView/BaseView.tsx    | 22 ++++++++++++++-----
 .../components/InputPreview/constants.ts      | 19 ++++++++++++++++
 4 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/docs/spec.md b/docs/spec.md
index abd45f27..b3871a84 100644
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -53,6 +53,8 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | viewSpec.link              | `any`       |          | A field containing information for forming a [link](#link) for a value                                                                                                                  |
 | viewSpec.hidden            | `boolean`   |          | Hide field and view                                                                                                                                                                     |
 | viewSpec.inputProps        | `object`    |          | [InputProps](./input-props-map.md) Additional properties for internal input components                                                                                                  |
+| viewSpec.viewColor         | `object`    |          | Color map for values, use the keys `"true"` and `"false"` specifying the value from the https://github.com/gravity-ui/uikit/tree/main/src/components/Text#color.                        |
+|                            |
 
 ### NumberSpec
 
diff --git a/src/lib/core/types/specs.ts b/src/lib/core/types/specs.ts
index a2d8ee90..a0a931d7 100644
--- a/src/lib/core/types/specs.ts
+++ b/src/lib/core/types/specs.ts
@@ -70,6 +70,10 @@ export interface BooleanSpec<
         hidden?: boolean;
         inputProps?: InputComponentProps;
         layoutProps?: LayoutComponentProps;
+        viewColor?: {
+            true: TextProps['color'];
+            false: TextProps['color'];
+        };
     };
 }
 
diff --git a/src/lib/kit/components/Views/BaseView/BaseView.tsx b/src/lib/kit/components/Views/BaseView/BaseView.tsx
index d742e5c2..11019982 100644
--- a/src/lib/kit/components/Views/BaseView/BaseView.tsx
+++ b/src/lib/kit/components/Views/BaseView/BaseView.tsx
@@ -2,11 +2,12 @@ import React from 'react';
 
 import isString from 'lodash/isString';
 
-import type {
-    BooleanViewProps,
-    NumberViewProps,
-    StringSpec,
-    StringViewProps,
+import {
+    type BooleanViewProps,
+    type NumberViewProps,
+    type StringSpec,
+    type StringViewProps,
+    isBooleanSpec,
 } from '../../../../core';
 import {LongValue} from '../../../components';
 
@@ -15,11 +16,20 @@ export const BaseView = <T extends BooleanViewProps | NumberViewProps | StringVi
     spec,
     linkValue,
 }: React.PropsWithChildren<T>) => {
+    const stringValue = String(value);
+    const color =
+        (isBooleanSpec(spec) &&
+            spec.viewSpec.viewColor?.[stringValue as keyof typeof spec.viewSpec.viewColor]) ||
+        undefined;
+
     if (isString(value) && linkValue) {
         return <>{linkValue}</>;
     }
 
     return (
-        <LongValue value={(spec as StringSpec)?.description?.[String(value)] || String(value)} />
+        <LongValue
+            value={(spec as StringSpec)?.description?.[stringValue] || stringValue}
+            color={color}
+        />
     );
 };
diff --git a/src/stories/components/InputPreview/constants.ts b/src/stories/components/InputPreview/constants.ts
index 357d906b..5c9c3ffd 100644
--- a/src/stories/components/InputPreview/constants.ts
+++ b/src/stories/components/InputPreview/constants.ts
@@ -16,6 +16,23 @@ const required: BooleanSpec = {
     viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Required'},
 };
 
+const viewColor: ObjectSpec = {
+    type: SpecTypes.Object,
+    properties: {
+        true: {
+            type: SpecTypes.String,
+            enum: ['―', ...TEXT_COLORS],
+            viewSpec: {type: 'select', layout: 'transparent', placeholder: 'True value color'},
+        },
+        false: {
+            type: SpecTypes.String,
+            enum: ['―', ...TEXT_COLORS],
+            viewSpec: {type: 'select', layout: 'transparent', placeholder: 'False value color'},
+        },
+    },
+    viewSpec: {type: 'base', layout: 'row', layoutTitle: 'View color'},
+};
+
 const maxLength: NumberSpec = {
     type: SpecTypes.Number,
     viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Max length'},
@@ -827,6 +844,7 @@ export const getBooleanOptions = (): ObjectSpec => ({
                 layoutOpen,
                 hidden,
                 inputProps,
+                viewColor,
             },
             [
                 'disabled',
@@ -837,6 +855,7 @@ export const getBooleanOptions = (): ObjectSpec => ({
                 'layoutOpen',
                 'hidden',
                 'inputProps',
+                'viewColor',
             ],
         ),
     },