feat: base structure of theme creator

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",

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/Theme/Theme.tsx

@@ -0,0 +1,20 @@
+import {Col, Grid, Row} from '@gravity-ui/page-constructor';
+import React from 'react';
+
+import {DEFAULT_THEME} from './lib/constants';
+import {ColorsTab} from './ui/ColorsTab';
+import {ThemeCreatorContextProvider} from './ui/ThemeCreatorContextProvider';
+
+export const Theme = () => {
+    return (
+        <ThemeCreatorContextProvider initialTheme={DEFAULT_THEME}>
+            <Grid>
+                <Row>
+                    <Col sizes={12}>
+                        <ColorsTab />
+                    </Col>
+                </Row>
+            </Grid>
+        </ThemeCreatorContextProvider>
+    );
+};

src/components/Theme/hooks/index.ts

@@ -0,0 +1,4 @@
+export {useThemeCreator, useThemeCreatorMethods} from './useThemeCreator';
+export {useThemePalette, useThemePaletteColor} from './useThemePalette';
+export {useThemeUtilityColor} from './useThemeUtilityColor';
+export {useThemePrivateColorOptions} from './useThemePrivateColorOptions';

src/components/Theme/hooks/useThemeCreator.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+
+import {ThemeCreatorContext, ThemeCreatorMethodsContext} from '../lib/themeCreatorContext';
+
+export const useThemeCreator = () => React.useContext(ThemeCreatorContext);
+export const useThemeCreatorMethods = () => React.useContext(ThemeCreatorMethodsContext);

src/components/Theme/hooks/useThemePalette.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {getThemePalette} from '../lib/themeCreatorUtils';
+import type {ThemeVariant} from '../lib/types';
+
+import {useThemeCreator, useThemeCreatorMethods} from './useThemeCreator';
+
+export const useThemePalette = () => {
+    const themeState = useThemeCreator();
+    return React.useMemo(() => getThemePalette(themeState), [themeState]);
+};
+
+type UseThemePaletteColorParams = {
+    token: string;
+    theme: ThemeVariant;
+};
+
+export const useThemePaletteColor = ({token, theme}: UseThemePaletteColorParams) => {
+    const themeState = useThemeCreator();
+    const {updateColor} = useThemeCreatorMethods();
+
+    const value = React.useMemo(() => themeState.palette[theme][token], [themeState, token, theme]);
+
+    const updateValue = React.useCallback(
+        (newValue: string) => {
+            updateColor({
+                theme,
+                title: token,
+                value: newValue,
+            });
+        },
+        [token, theme, updateColor],
+    );
+
+    return [value, updateValue] as const;
+};

src/components/Theme/hooks/useThemePrivateColorOptions.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {getThemeColorOptions} from '../lib/themeCreatorUtils';
+import {ThemeVariant} from '../lib/types';
+
+import {useThemeCreator} from './useThemeCreator';
+
+export const useThemePrivateColorOptions = (themeVariant: ThemeVariant) => {
+    const themeState = useThemeCreator();
+
+    return React.useMemo(
+        () => getThemeColorOptions({themeState, themeVariant}),
+        [themeState, themeVariant],
+    );
+};

src/components/Theme/hooks/useThemeUtilityColor.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import type {ColorsOptions, ThemeVariant} from '../lib/types';
+
+import {useThemeCreator, useThemeCreatorMethods} from './useThemeCreator';
+
+type UseThemeColorParams = {
+    name: keyof ColorsOptions;
+    theme: ThemeVariant;
+};
+
+export const useThemeUtilityColor = ({name, theme}: UseThemeColorParams) => {
+    const themeState = useThemeCreator();
+    const {changeUtilityColor} = useThemeCreatorMethods();
+
+    const value = React.useMemo(() => themeState.colors[theme][name], [themeState, name, theme]);
+
+    const updateValue = React.useCallback(
+        (newValue: string) => {
+            changeUtilityColor({
+                themeVariant: theme,
+                name,
+                value: newValue,
+            });
+        },
+        [name, theme, changeUtilityColor],
+    );
+
+    return [value, updateValue] as const;
+};