feat(themes): Border radius tab

package.json

@@ -17,6 +17,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "bem-cn-lite": "^4.1.0",
+    "chroma-js": "^2.4.2",
     "husky": "^8.0.3",
     "i18next": "^23.8.3",
     "javascript-time-ago": "^2.5.9",
@@ -45,6 +46,7 @@
     "@gravity-ui/stylelint-config": "^2.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@svgr/webpack": "^6.5.1",
+    "@types/chroma-js": "^2.4.4",
     "@types/jest": "^29.2.4",
     "@types/lodash": "^4.14.197",
     "@types/micromatch": "^4.0.7",

public/locales/en/common.json

@@ -8,6 +8,7 @@
     "menu_components": "Components",
     "menu_design": "Design",
     "menu_icons": "Icons",
+    "menu_themes": "Themes",
     "roadmap_inProgress": "In progress",
     "navigation_previous": "Previous",
     "navigation_next": "Next",

public/locales/en/themes.json

@@ -0,0 +1,32 @@
+{
+  "title": "Themes",
+  "tags_colors": "Colors",
+  "tags_typography": "Typography",
+  "tags_borderRadius": "Border Radius",
+  "tags_preview": "Preview",
+  "btn_export_theme": "Export theme",
+  "custom_brand_palette": "Custom Brand Palette",
+  "page_background": "Page Background",
+  "brand_color": "Brand Color",
+  "hide_advanced_settings": "Hide Advanced Settings",
+  "advanced_settings": "Advanced Settings",
+  "theme": "Theme",
+  "basic_palette": "Basic Palette",
+  "add_color": "Add color",
+  "palette_colors_description": "Support Colors for various cases and <br /> states",
+  "dark_theme": "Dark theme",
+  "light_theme": "Light theme",
+  "advanced_brand_palette": "Advanced Brand Palette",
+  "additional_colors": "Additional Colors",
+  "component_preview": "Component preview",
+  "is_everything_set": "Is everything set?",
+  "radius": "Radius",
+  "radius_regular": "Regular",
+  "radius_circled": "Circled",
+  "radius_squared": "Squared",
+  "radius_custom": "Custom radius",
+  "choose_border_radius": "Choose border radius",
+  "label": "Label",
+  "input_placeholder": "Content",
+  "button": "Button"
+}

public/locales/ru/common.json

@@ -8,6 +8,7 @@
     "menu_components": "Компоненты",
     "menu_design": "Дизайн",
     "menu_icons": "Иконки",
+    "menu_themes": "Темы",
     "roadmap_inProgress": "В работе",
     "navigation_previous": "Назад",
     "navigation_next": "Далее",

public/locales/ru/themes.json

@@ -0,0 +1,32 @@
+{
+  "title": "Темы",
+  "tags_colors": "Цвета",
+  "tags_typography": "Шрифты",
+  "tags_borderRadius": "Радиусы границ",
+  "tags_preview": "Предпоказ",
+  "btn_export_theme": "Экспортировать тему",
+  "custom_brand_palette": "Кастомная брендовая палитра",
+  "page_background": "Цвет фона",
+  "brand_color": "Брендовый цвет",
+  "hide_advanced_settings": "Скрыть расширенные настройки",
+  "advanced_settings": "Расширенные настройки",
+  "theme": "Тема",
+  "basic_palette": "Базовая палитра",
+  "add_color": "Добавить цвет",
+  "palette_colors_description": "Поддерживаемые цвета для различных случаев и состояний",
+  "dark_theme": "Тёмная тема",
+  "light_theme": "Светлая тема",
+  "advanced_brand_palette": "Расширенная брендовая палитра",
+  "additional_colors": "Дополнительные цвета",
+  "component_preview": "Предпросмотр компонентов",
+  "is_everything_set": "Все настроили?",
+  "radius": "Радиус",
+  "radius_regular": "Стандартный",
+  "radius_circled": "Круглый",
+  "radius_squared": "Без скругления",
+  "radius_custom": "Настроить скругление",
+  "choose_border_radius": "Выберите радиус скругления",
+  "label": "Ярлык",
+  "input_placeholder": "Контент",
+  "button": "Кнопка"
+}

src/blocks/Examples/components/Showcase/Showcase.tsx

@@ -44,11 +44,12 @@ const tableColumns = [
 ];
 
 export type ShowcaseProps = {
-    color: string;
+    color?: string;
     theme: Theme;
+    style?: string;
 };
 
-export const Showcase: React.FC<ShowcaseProps> = ({color, theme}) => {
+export const Showcase: React.FC<ShowcaseProps> = ({color, theme, style}) => {
     const [activeTab, setActiveTab] = React.useState(tabs[0].id);
 
     const [tableSelectedIds, setTableSelectedIds] = React.useState(['1']);
@@ -67,6 +68,9 @@ export const Showcase: React.FC<ShowcaseProps> = ({color, theme}) => {
 
     return (
         <ThemeProvider theme={theme} scoped rootClassName={`${b()} ${b({color, theme})}`}>
+            {style ? (
+                <style>{`.gravity-ui-landing-examples-showcase_theme_${theme} {${style}}`}</style>
+            ) : null}
             <div className={b('row')}>
                 <div className={b('col')}>
                     <div className={b('sub-row')}>

src/components/ColorPickerInput/ColorPickerInput.scss

@@ -3,18 +3,28 @@
 $block: '.#{variables.$ns}color-picker';
 
 #{$block} {
+    --g-border-radius-xl: 8px;
+    flex-grow: 1;
+    position: relative;
+
+    &__text-input {
+        z-index: 1;
+    }
+
     &__preview {
-        width: 16px;
-        height: 16px;
         margin-inline-start: var(--g-spacing-2);
         margin-inline-end: var(--g-spacing-1);
-        border-radius: var(--g-border-radius-xs);
     }
 
     &__input {
-        width: 100%;
-        height: 0;
+        width: 35px;
         opacity: 0;
-        border: 1px solid transparent;
+        padding: 0;
+        margin: 0;
+        border: 0;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        z-index: 0;
     }
 }

src/components/ColorPickerInput/ColorPickerInput.tsx

@@ -4,9 +4,9 @@ import {useTranslation} from 'next-i18next';
 import React, {ChangeEventHandler, useCallback, useRef, useState} from 'react';
 
 import {block} from '../../utils';
+import {ColorPreview} from '../ColorPreview/ColorPreview';
 
 import './ColorPickerInput.scss';
-import {ColorPreview} from './ColorPreview';
 import {NativeColorPicker} from './NativeColorPicker';
 import {hexRegexp, parseRgbStringToHex, rgbRegexp, rgbaRegexp} from './utils';
 
@@ -16,8 +16,9 @@ export interface ColorPickerInputProps {
     defaultValue: string;
     name?: string;
     value?: string;
-    onChange?: (color: string) => void;
+    onChange: (color: string) => void;
     errorMessage?: string;
+    size?: TextInputProps['size'];
 }
 
 export const ColorPickerInput = ({
@@ -26,6 +27,7 @@ export const ColorPickerInput = ({
     onChange: onChangeExternal,
     defaultValue,
     errorMessage,
+    size = 'l',
 }: ColorPickerInputProps) => {
     const {t} = useTranslation('component');
 
@@ -37,10 +39,14 @@ export const ColorPickerInput = ({
 
     const managedValue = value || inputValue;
 
+    React.useEffect(() => {
+        setColor(defaultValue);
+    }, [defaultValue]);
+
     const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(
         (event) => {
             const newValue = event.target.value.replaceAll(' ', '');
-            onChangeExternal?.(newValue);
+            onChangeExternal(newValue);
             setInputValue(newValue);
             setValidationError(undefined);
 
@@ -64,12 +70,16 @@ export const ColorPickerInput = ({
         [onChangeExternal],
     );
 
-    const onNativeInputChange: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
-        const newValue = e.target.value.toUpperCase();
+    const onNativeInputChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+        (e) => {
+            const newValue = e.target.value.toUpperCase();
 
-        setColor(newValue);
-        setInputValue(newValue);
-    }, []);
+            setColor(newValue);
+            setInputValue(newValue);
+            onChangeExternal(newValue);
+        },
+        [onChangeExternal],
+    );
 
     const onBlur = useCallback(() => {
         if (
@@ -85,15 +95,16 @@ export const ColorPickerInput = ({
     return (
         <Flex className={b()} direction="column">
             <TextInput
+                className={b('text-input')}
                 name={name}
                 value={managedValue}
                 errorPlacement="inside"
                 errorMessage={errorMessage || t('color-input_validation-format-error')}
                 validationState={validationError}
                 view="normal"
-                size="l"
+                size={size}
                 onChange={onChange}
-                startContent={<ColorPreview color={color} />}
+                startContent={<ColorPreview className={b('preview')} color={color} />}
                 endContent={
                     <Button
                         view="flat-action"

src/components/ColorPreview/ColorPreview.scss

@@ -0,0 +1,35 @@
+@use '../../variables.scss';
+
+$block: '.#{variables.$ns}color-preview';
+
+#{$block} {
+    --chess: rgb(235, 235, 235);
+    --surface: rgb(255, 255, 255);
+    --opacity-pattern: repeating-conic-gradient(var(--chess) 0% 25%, var(--surface) 0% 50%) 50% /
+        8px 8px;
+
+    width: 16px;
+    height: 16px;
+    border-radius: var(--g-border-radius-xs);
+    overflow: hidden;
+    position: relative;
+
+    &__color {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+
+    &_with-opacity {
+        &::before {
+            content: '';
+            display: block;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--opacity-pattern);
+        }
+    }
+}

src/components/ColorPreview/ColorPreview.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {block} from '../../utils';
+
+import './ColorPreview.scss';
+
+export interface ColorPreviewProps {
+    color?: string;
+    className?: string;
+}
+
+const b = block('color-preview');
+
+const isColorWithOpacity = (color?: string) => !color || color?.startsWith('rgba');
+
+export const ColorPreview = ({color, className}: ColorPreviewProps) => {
+    return (
+        <div className={b({'with-opacity': isColorWithOpacity(color)}, className)}>
+            <div className={b('color')} style={{backgroundColor: color}} />
+        </div>
+    );
+};

src/components/Libraries/Libraries.tsx

@@ -8,9 +8,9 @@ import starIcon from '../../assets/icons/star.svg';
 import versionIcon from '../../assets/icons/version.svg';
 import {block, getLibsList} from '../../utils';
 import {Link} from '../Link';
+import {TagItem, Tags} from '../Tags/Tags';
 
 import './Libraries.scss';
-import {TagItem, Tags} from './Tags/Tags';
 
 const b = block('libraries');