From ba15340f62a5ddacdb1e094b619c7f54af469cec Mon Sep 17 00:00:00 2001
From: Neretin Artem <hawktrike@gmail.com>
Date: Tue, 3 Sep 2024 15:39:20 +0500
Subject: [PATCH 1/7] feat: Update

---
 .../src/components/App.tsx                    | 71 ++++++++++++-------
 website/plasma-theme-builder/src/index.tsx    | 11 +--
 2 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/website/plasma-theme-builder/src/components/App.tsx b/website/plasma-theme-builder/src/components/App.tsx
index 6b96c6fc88..e26f09d5cd 100644
--- a/website/plasma-theme-builder/src/components/App.tsx
+++ b/website/plasma-theme-builder/src/components/App.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
+import { Route, Routes, useNavigate } from 'react-router-dom';
 
 import { Footer } from './Footer/Footer';
 import { Main } from './Main/Main';
@@ -12,6 +13,12 @@ import { useDefaultThemeData, useFetchTheme } from '../hooks';
 import { multipleMediaQuery } from './mixins';
 import { getURLParams, pushHistoryState } from '../utils';
 import type { Theme as ThemeType } from '../types';
+// import { useDefaultThemeData, useFetchTheme } from '../hooks';
+// import { multipleMediaQuery } from './mixins';
+// import { getURLParams, pushHistoryState } from '../utils';
+// import type { Theme as ThemeType } from '../types';
+import { TokensEditor } from './_new/TokensEditor';
+import { ToneGenerator } from './ColorGenerator/ToneGenerator';
 
 const StyledRoot = styled.div`
     min-width: 35rem;
@@ -31,20 +38,21 @@ const StyledRoot = styled.div`
 `;
 
 const PAGE_TYPE = {
-    MAIN: 'MAIN',
-    GENERATOR: 'GENERATOR',
-    THEME: 'THEME',
-    PULL_REQUEST: 'PULL_REQUEST',
-    ERROR: 'ERROR',
+    TONE: 'TONE',
+    GRAYSCALE: 'GRAYSCALE',
+    FONT_FAMILY: 'FONT_FAMILY',
+    TOKENS_EDITOR: 'TOKENS_EDITOR',
 } as const;
 
 type PageType = typeof PAGE_TYPE[keyof typeof PAGE_TYPE];
 
 const App = () => {
-    const [state, setState] = useState<PageType>(PAGE_TYPE.MAIN);
-    const [data, setData] = useState<ThemeType>();
-    const [token, setToken] = useState<string | undefined>();
-    const defaultData = useDefaultThemeData();
+    const [state, setState] = useState<PageType>(PAGE_TYPE.TOKENS_EDITOR);
+    const navigate = useNavigate();
+
+    // const [data, setData] = useState<ThemeType>();
+    // const [token, setToken] = useState<string | undefined>();
+    // const defaultData = useDefaultThemeData();
 
     const [themeName, branchName] = getURLParams(['theme', 'branch']);
     const [themeData, errorMessage] = useFetchTheme(themeName, branchName);
@@ -89,24 +97,35 @@ const App = () => {
         setData(data);
     }, []);
 
+    const onTokensEditor = () => {
+        setState(PAGE_TYPE.TOKENS_EDITOR);
+    };
+
     return (
-        <StyledRoot>
-            {state === PAGE_TYPE.MAIN && <Main onSetToken={onSetToken} onGenerateTheme={onGenerateTheme} />}
-            {state === PAGE_TYPE.GENERATOR && <Generator onMain={onMain} onPreviewTheme={onPreviewTheme} />}
-            {state === PAGE_TYPE.THEME && (
-                <Theme
-                    data={data}
-                    defaultData={defaultData}
-                    themeNameFromParam={themeName}
-                    branchNameFromParam={branchName}
-                    onGenerateTheme={onGenerateTheme}
-                    onPullRequest={onPullRequest}
-                />
-            )}
-            {state === PAGE_TYPE.PULL_REQUEST && <PullRequest data={data} token={token} />}
-            {state === PAGE_TYPE.ERROR && <Error message={errorMessage} onMain={onMain} />}
-            <Footer />
-        </StyledRoot>
+        <Routes>
+            <Route path="new" element={<TokensEditor onPreviousPage={onFontFamily} onNextPage={onTone} />} />
+            <Route
+                path="test"
+                element={
+                    <ToneGenerator
+                        onPreviousPage={onTokensEditor}
+                        onNextPage={() => {
+                            navigate('/new');
+                        }}
+                    />
+                }
+            />
+            {/* {state === PAGE_TYPE.TONE && <ToneGenerator onNextPage={onGrayScale} />}
+                {state === PAGE_TYPE.GRAYSCALE && (
+                    <GrayscaleGenerator onPreviousPage={onTone} onNextPage={onFontFamily} />
+                )}
+                {state === PAGE_TYPE.FONT_FAMILY && (
+                    <FontFamilyGenerator onPreviousPage={onGrayScale} onNextPage={onTokensEditor} />
+                )}
+                {state === PAGE_TYPE.TOKENS_EDITOR && (
+                    <TokensEditor onPreviousPage={onFontFamily} onNextPage={onTone} />
+                )} */}
+        </Routes>
     );
 };
 
diff --git a/website/plasma-theme-builder/src/index.tsx b/website/plasma-theme-builder/src/index.tsx
index 729b515bfc..981d94b5b0 100644
--- a/website/plasma-theme-builder/src/index.tsx
+++ b/website/plasma-theme-builder/src/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 
 import App from './components/App';
 import { GlobalStyle } from './GlobalStyle';
@@ -13,8 +14,10 @@ if (!rootElement) {
 const root = createRoot(rootElement);
 
 root.render(
-    <>
-        <GlobalStyle />
-        <App />
-    </>,
+    <GlobalStyle>
+        <BrowserRouter>
+            <App />
+        </BrowserRouter>
+        {/* <RouterProvider router={router} /> */}
+    </GlobalStyle>,
 );

From 1a9d992db5121958542abf2bacb2fdb52b5a0089 Mon Sep 17 00:00:00 2001
From: Neretin Artem <hawktrike@gmail.com>
Date: Fri, 13 Sep 2024 23:44:15 +0500
Subject: [PATCH 2/7] feat: Small refactor for _new directory

---
 .../src/_new/examples/buildAndModifyMockTheme.ts          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/website/plasma-theme-builder/src/_new/examples/buildAndModifyMockTheme.ts b/website/plasma-theme-builder/src/_new/examples/buildAndModifyMockTheme.ts
index 8c356e1568..80b5ba974e 100644
--- a/website/plasma-theme-builder/src/_new/examples/buildAndModifyMockTheme.ts
+++ b/website/plasma-theme-builder/src/_new/examples/buildAndModifyMockTheme.ts
@@ -263,13 +263,13 @@ export const buildAndModifyMockTheme = async () => {
         },
     });
 
-    const onlyGradientTokens = mockTheme.getTokens('gradient');
-    console.log('onlyGradientTokens', onlyGradientTokens);
+    const allTokens = mockTheme.getTokens();
+    console.log('allTokens', allTokens);
 
     mockTheme.setTokenValue('shadow.name', 'shadow', 'android', { color: 'red', elevation: 0 });
 
-    const allTokens = mockTheme.getTokens();
-    console.log('allTokens', allTokens);
+    const onlyGradientTokens = mockTheme.getTokens('gradient');
+    console.log('onlyGradientTokens', onlyGradientTokens);
 
     const value = mockTheme.getTokenValue('shape.name', 'shape', 'ios');
     const values = mockTheme.getTokenValue('shape.name', 'shape');

From 9a0570a302d77f6ce5912f8cce9b4b131c4dafd7 Mon Sep 17 00:00:00 2001
From: Neretin Artem <hawktrike@gmail.com>
Date: Fri, 13 Sep 2024 23:46:48 +0500
Subject: [PATCH 3/7] feat(plasma-theme-builder): Add Header and RadioboxButton
 components

---
 website/plasma-theme-builder/package.json     |  1 +
 .../src/components/ColorGenerator/Header.tsx  | 63 +++++++++++++++
 .../ColorGenerator/RadioboxButton.tsx         | 78 +++++++++++++++++++
 .../src/components/ColorGenerator/types.ts    |  7 ++
 4 files changed, 149 insertions(+)
 create mode 100644 website/plasma-theme-builder/src/components/ColorGenerator/Header.tsx
 create mode 100644 website/plasma-theme-builder/src/components/ColorGenerator/RadioboxButton.tsx
 create mode 100644 website/plasma-theme-builder/src/components/ColorGenerator/types.ts

diff --git a/website/plasma-theme-builder/package.json b/website/plasma-theme-builder/package.json
index bcefc57b7d..0239f9f2f7 100644
--- a/website/plasma-theme-builder/package.json
+++ b/website/plasma-theme-builder/package.json
@@ -23,6 +23,7 @@
     "prettier": "^2.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.26.1",
     "react-scripts": "4.0.0",
     "styled-components": "^5.3.3"
   },
diff --git a/website/plasma-theme-builder/src/components/ColorGenerator/Header.tsx b/website/plasma-theme-builder/src/components/ColorGenerator/Header.tsx
new file mode 100644
index 0000000000..05ad19658b
--- /dev/null
+++ b/website/plasma-theme-builder/src/components/ColorGenerator/Header.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { textPrimary } from '@salutejs/plasma-tokens-b2c/new';
+
+const HeaderArrow = styled.div`
+    width: 1.25rem;
+    height: 1.25rem;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    opacity: 0.56;
+`;
+
+const HeaderWrapper = styled.div`
+    display: flex;
+
+    top: 1.875rem;
+    left: 1rem;
+    gap: 1.125rem;
+
+    position: fixed;
+    align-items: center;
+    text-decoration: none;
+
+    cursor: pointer;
+    z-index: 999;
+
+    color: ${textPrimary};
+
+    &:hover ${HeaderArrow} {
+        opacity: 1;
+    }
+`;
+
+const HeaderTextBold = styled.div`
+    font-size: var(--plasma-typo-body-m-font-size);
+    line-height: var(--plasma-typo-body-m-line-height);
+    font-weight: var(--plasma-typo-body-m-bold-font-weight);
+`;
+
+interface HeaderProps {
+    text?: string;
+    onClick?: () => void;
+}
+
+export const Header = ({ text, onClick, ...rest }: HeaderProps) => {
+    return (
+        <HeaderWrapper onClick={onClick} {...rest}>
+            <HeaderArrow>
+                <svg width="12" height="5" viewBox="0 0 12 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M2.56 4.64C2.22933 4.24533 1.88267 3.904 1.52 3.616C1.168 3.31733 0.794667 3.072 0.4 2.88V2.192C1.18933 1.78667 1.90933 1.19467 2.56 0.415999H3.792C3.67467 0.725333 3.536 1.01867 3.376 1.296C3.22667 1.56267 3.06667 1.81867 2.896 2.064V3.008C3.06667 3.232 3.22667 3.48267 3.376 3.76C3.536 4.02667 3.67467 4.32 3.792 4.64H2.56ZM2.8 3.184L2.816 1.872H11.6V3.184H2.8Z"
+                        fill="currentColor"
+                    />
+                </svg>
+            </HeaderArrow>
+            <HeaderTextBold>{text}</HeaderTextBold>
+        </HeaderWrapper>
+    );
+};
diff --git a/website/plasma-theme-builder/src/components/ColorGenerator/RadioboxButton.tsx b/website/plasma-theme-builder/src/components/ColorGenerator/RadioboxButton.tsx
new file mode 100644
index 0000000000..e8600ccfac
--- /dev/null
+++ b/website/plasma-theme-builder/src/components/ColorGenerator/RadioboxButton.tsx
@@ -0,0 +1,78 @@
+import React, { ChangeEvent } from 'react';
+import styled from 'styled-components';
+
+import { IconArrowRight } from '@salutejs/plasma-icons';
+import { IconButton } from '@salutejs/plasma-b2c';
+
+const Root = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+
+    height: 3.5rem;
+`;
+
+const Label = styled.label<{ view: 'black' | 'white' }>`
+    cursor: pointer;
+    display: block;
+    flex: 1;
+    padding: 1rem 0;
+
+    color: ${({ view }) => (view === 'white' ? '#FFFFFF' : '#080808')};
+
+    font-family: var(--plasma-typo-text-l-font-family);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: bold;
+    line-height: 20px;
+`;
+
+const Input = styled.input<{ view: 'black' | 'white' }>`
+    display: none;
+
+    &:checked + ${Label} {
+        flex: unset;
+
+        border-radius: 2.5rem;
+        padding: 1rem 2.375rem;
+        border: 0.125rem solid ${({ view }) => (view === 'white' ? '#FFFFFF' : '#000000')};
+    }
+`;
+
+const ContinueButton = styled(IconButton)`
+    position: relative;
+`;
+
+interface RadioboxButtonProps {
+    label: string;
+    id: string;
+    value?: number;
+    checked?: boolean;
+    view: 'black' | 'white';
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+
+export const RadioboxButton = ({ value, checked, label, view, id, onChange, onClick }: RadioboxButtonProps) => {
+    return (
+        <Root>
+            <Input
+                view={view}
+                autoComplete="off"
+                type="radio"
+                id={id}
+                value={value}
+                checked={checked}
+                onChange={onChange}
+            />
+            <Label view={view} htmlFor={id}>
+                {label}
+            </Label>
+            {checked && (
+                <ContinueButton size="l" view={view} pin="circle-circle" onClick={onClick}>
+                    <IconArrowRight color="inherit" />
+                </ContinueButton>
+            )}
+        </Root>
+    );
+};
diff --git a/website/plasma-theme-builder/src/components/ColorGenerator/types.ts b/website/plasma-theme-builder/src/components/ColorGenerator/types.ts
new file mode 100644
index 0000000000..f5e4236024
--- /dev/null
+++ b/website/plasma-theme-builder/src/components/ColorGenerator/types.ts
@@ -0,0 +1,7 @@
+export interface BackgroundGradientSaturation {
+    1000: string;
+    800: string;
+    500: string;
+    250: string;
+    100: string;
+}

From d8b13208bf5e000c373dc7aecb3cad96be671daf Mon Sep 17 00:00:00 2001
From: Neretin Artem <hawktrike@gmail.com>
Date: Fri, 13 Sep 2024 23:48:41 +0500
Subject: [PATCH 4/7] feat(plasma-theme-builder): Add GradientVerticalSlider
 component and Tone page

---
 .../ColorGenerator/GradientVerticalSlider.tsx | 126 +++++++
 .../ColorGenerator/ToneGenerator.tsx          | 329 ++++++++++++++++++
 2 files changed, 455 insertions(+)
 create mode 100644 website/plasma-theme-builder/src/components/ColorGenerator/GradientVerticalSlider.tsx
 create mode 100644 website/plasma-theme-builder/src/components/ColorGenerator/ToneGenerator.tsx

diff --git a/website/plasma-theme-builder/src/components/ColorGenerator/GradientVerticalSlider.tsx b/website/plasma-theme-builder/src/components/ColorGenerator/GradientVerticalSlider.tsx
new file mode 100644
index 0000000000..b5a6e6bcbc
--- /dev/null
+++ b/website/plasma-theme-builder/src/components/ColorGenerator/GradientVerticalSlider.tsx
@@ -0,0 +1,126 @@
+import React, { ChangeEvent, RefObject } from 'react';
+import styled, { css } from 'styled-components';
+
+import { IconArrowsMoveVertical } from '@salutejs/plasma-icons';
+import { BackgroundGradientSaturation } from './types';
+
+const getGradientColorPart = (colors: string[]) =>
+    colors.map((color: string, index: number) => `${color} ${(100 / colors.length) * index}%`).join(',');
+
+const Root = styled.div<{ colors: string[] }>`
+    position: absolute;
+    z-index: 999;
+
+    left: 1.5rem;
+    top: 6.125rem;
+
+    --private-gradient-scroll-height: calc(100vh - 6.125rem - 4.375rem);
+    height: var(--private-gradient-scroll-height);
+    width: 0.25rem;
+    border-radius: 0.125rem;
+
+    background: linear-gradient(180deg, ${({ colors }) => getGradientColorPart(colors)});
+`;
+
+const thumbStyle = css`
+    border-radius: 0.5rem;
+    height: 0.25rem;
+    width: 0.25rem;
+    outline: 0.5rem solid #fff;
+`;
+
+const Slider = styled.input`
+    cursor: pointer;
+    appearance: none;
+    background: transparent;
+    margin: 0;
+    opacity: 0;
+
+    position: absolute;
+    left: 0.75rem;
+
+    transform: rotate(90deg);
+    transform-origin: 0 0;
+
+    padding: 0 0.5rem;
+    top: -0.5rem;
+    height: 1.25rem;
+    width: var(--private-gradient-scroll-height);
+
+    :focus {
+        outline: none;
+    }
+
+    ::-webkit-slider-thumb {
+        appearance: none;
+        position: relative;
+
+        ${thumbStyle}
+    }
+
+    ::-moz-range-thumb {
+        border: none;
+        border-radius: 0;
+        background: transparent;
+
+        ${thumbStyle}
+    }
+`;
+
+const Thumb = styled.div`
+    position: absolute;
+
+    ${thumbStyle}
+
+    transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
+    will-change: transform;
+`;
+
+const GradientShadow = styled.div<{ colors: string[] }>`
+    position: absolute;
+    width: 0.25rem;
+    left: -0.375rem;
+    top: 1.5rem;
+    bottom: 1.5rem;
+
+    border-radius: 0.125rem;
+
+    filter: blur(32px);
+    opacity: 0.6;
+
+    background: linear-gradient(180deg, ${({ colors }) => getGradientColorPart(colors)});
+`;
+
+const HintIcon = styled(IconArrowsMoveVertical)`
+    position: absolute;
+    bottom: -1.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+`;
+
+interface GradientVerticalSliderProps {
+    value: number;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    min: number;
+    max: number;
+    gradients: BackgroundGradientSaturation[];
+    thumbRef: RefObject<HTMLDivElement>;
+}
+
+export const GradientVerticalSlider = ({
+    value,
+    gradients,
+    min,
+    max,
+    thumbRef,
+    onChange,
+}: GradientVerticalSliderProps) => {
+    return (
+        <Root colors={gradients.map((item) => item[500])}>
+            <GradientShadow colors={gradients.map((item) => item[500])} />
+            <Thumb ref={thumbRef} />
+            <Slider type="range" min={min} max={max} value={value} onChange={onChange} />
+            <HintIcon size="xs" />
+        </Root>
+    );
+};
diff --git a/website/plasma-theme-builder/src/components/ColorGenerator/ToneGenerator.tsx b/website/plasma-theme-builder/src/components/ColorGenerator/ToneGenerator.tsx
new file mode 100644
index 0000000000..3ae80a6360
--- /dev/null
+++ b/website/plasma-theme-builder/src/components/ColorGenerator/ToneGenerator.tsx
@@ -0,0 +1,329 @@
+import React, { ChangeEvent, UIEvent, useEffect, useRef, useState } from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+
+import { textPrimary, onLightTextPrimary, onLightTextSecondary } from '@salutejs/plasma-tokens-b2c/new';
+import { Container as ContainerBase, Col, Row, Button } from '@salutejs/plasma-b2c';
+import { general } from '@salutejs/plasma-colors';
+import { IconArrowRight } from '@salutejs/plasma-icons';
+import { getHSLARawColor, upperFirstLetter } from '@salutejs/plasma-tokens-utils';
+
+import { GradientVerticalSlider } from './GradientVerticalSlider';
+import { Header } from './Header';
+import { BackgroundGradientSaturation } from './types';
+
+const NoScroll = createGlobalStyle`
+    html, body {
+        overscroll-behavior: none;
+    }
+`;
+
+const Container = styled.div`
+    position: relative;
+
+    width: 100%;
+    height: 100vh;
+    box-sizing: border-box;
+    background-color: #000;
+`;
+
+const Wrapper = styled.div`
+    position: absolute;
+    inset: 0.125rem;
+    border-radius: 0.5rem;
+
+    overflow: scroll;
+
+    ::-webkit-scrollbar {
+        display: none;
+    }
+    scrollbar-width: none;
+
+    .transitionOpacity {
+        opacity: 1;
+    }
+`;
+
+const ColorTone = styled.div<{ colors: BackgroundGradientSaturation }>`
+    position: absolute;
+    inset: 0;
+
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+
+    /* stylelint-disable */
+    background: linear-gradient(
+        90deg,
+        ${({ colors }) => colors[1000]} 5%,
+        ${({ colors }) => colors[800]} 30%,
+        ${({ colors }) => colors[500]} 50%,
+        ${({ colors }) => colors[250]} 70%,
+        ${({ colors }) => colors[100]} 95%
+    );
+
+    padding: 2rem;
+    color: #ffffff17;
+    font-size: 4rem;
+`;
+
+const ScrollableHiddenContainer = styled.div`
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
+    scroll-bar-width: none;
+    opacity: 0;
+
+    position: absolute;
+    inset: 0;
+`;
+
+const HiddenColorTone = styled.div`
+    position: relative;
+    height: 100vh;
+
+    scroll-snap-align: center;
+    opacity: 1;
+
+    background: transparent;
+`;
+
+const ColorBox = styled.div`
+    position: absolute;
+    z-index: 999;
+
+    left: 3.375rem;
+    bottom: 3.875rem;
+
+    width: 11rem;
+
+    color: ${textPrimary};
+`;
+
+const InputLabel = styled.div`
+    margin-bottom: 1rem;
+
+    font-family: var(--plasma-typo-body-s-font-family);
+    font-size: var(--plasma-typo-body-s-font-size);
+    font-weight: var(--plasma-typo-body-s-font-weight);
+    line-height: var(--plasma-typo-body-s-line-height);
+`;
+
+const InputHex = styled.input`
+    width: inherit;
+    outline: none;
+    border: none;
+    background: transparent;
+    color: inherit;
+
+    caret-color: ${textPrimary};
+
+    ::placeholder {
+        opacity: 0.28;
+    }
+
+    font-family: var(--plasma-typo-h1-font-family);
+    font-size: var(--plasma-typo-h1-font-size);
+    font-weight: var(--plasma-typo-h1-font-weight);
+    line-height: var(--plasma-typo-h1-line-height);
+`;
+
+const Grid = styled(ContainerBase)`
+    position: absolute;
+`;
+
+const ColorToneDisplay = styled.div`
+    position: relative;
+    top: 6.125rem;
+    height: 15.25rem;
+`;
+
+const ColorToneDescription = styled.div`
+    width: 16.25rem;
+    margin-bottom: 1.5rem;
+
+    color: ${onLightTextSecondary};
+
+    font-family: var(--plasma-typo-text-s-font-family);
+    font-size: var(--plasma-typo-text-s-font-size);
+    font-weight: var(--plasma-typo-text-s-font-weight);
+    line-height: var(--plasma-typo-text-s-line-height);
+`;
+
+const ColorToneName = styled.div`
+    color: ${onLightTextPrimary};
+
+    font-family: var(--plasma-typo-dspl-m-font-family);
+    font-size: var(--plasma-typo-dspl-m-font-size);
+    font-weight: var(--plasma-typo-dspl-m-font-weight);
+    line-height: var(--plasma-typo-dspl-m-line-height);
+`;
+
+const ContinueButton = styled(Button)`
+    position: relative;
+    z-index: 999;
+    top: 13rem;
+`;
+
+const toneColorsName = Object.keys(general).slice(2, -2);
+
+const gradients = Object.entries(general)
+    .map(([_, saturation]) => ({
+        1000: saturation['1000'],
+        800: saturation['800'],
+        500: saturation['500'],
+        250: saturation['250'],
+        100: saturation['100'],
+    }))
+    .slice(2, -2);
+
+const findNearestIndex = (inputNumber: number, numbers: number[]) => {
+    return numbers.reduce((closestIndex, curr, index, arr) => {
+        return Math.abs(curr - inputNumber) < Math.abs(arr[closestIndex] - inputNumber) ? index : closestIndex;
+    }, 0);
+};
+
+const formatColorToneName = (value: string) => {
+    return upperFirstLetter(value).replace(/([a-z])([A-Z])/g, '$1 $2');
+};
+
+interface ToneGeneratorProps {
+    onNextPage?: () => void;
+    onPreviousPage?: () => void;
+}
+
+export const ToneGenerator = (props: ToneGeneratorProps) => {
+    const colorRefs = useRef<HTMLDivElement[]>([]);
+    const hiddenContainerRef = useRef<HTMLDivElement>(null);
+    const thumbRef = useRef<HTMLDivElement>(null);
+
+    const sliderMin = 0;
+    const sliderMax = gradients.length - 1;
+
+    const [colorHex, setColorHex] = useState('');
+    const [colorIndexValue, setColorIndexValue] = useState(0);
+
+    useEffect(() => {
+        colorRefs.current?.[0]?.classList.add('transitionOpacity');
+    }, []);
+
+    useEffect(() => {
+        const scaledColorValue = ((colorIndexValue - sliderMin) / (sliderMax - sliderMin)).toFixed(3);
+
+        if (thumbRef.current) {
+            thumbRef.current.style.transform = `translateY(calc(${scaledColorValue} * calc(var(--private-gradient-scroll-height) - 0.25rem)))`;
+        }
+    }, [colorIndexValue, sliderMax]);
+
+    const getColorRefs = (element: HTMLDivElement, index: number) => {
+        if (colorRefs.current) {
+            colorRefs.current[index] = element;
+        }
+    };
+
+    const updateTransitionOpacityClass = (selectColorIndex: number) => {
+        if (selectColorIndex < colorIndexValue) {
+            for (let index = sliderMax; index > selectColorIndex; index--) {
+                colorRefs.current?.[index]?.classList.remove('transitionOpacity');
+            }
+
+            return;
+        }
+
+        for (let index = sliderMin; index <= selectColorIndex; index++) {
+            colorRefs.current?.[index]?.classList.add('transitionOpacity');
+        }
+    };
+
+    const updateSliderValue = (selectColorIndex: number, withAutoScroll = true) => {
+        updateTransitionOpacityClass(selectColorIndex);
+        setColorIndexValue(selectColorIndex);
+
+        if (withAutoScroll && hiddenContainerRef.current) {
+            hiddenContainerRef.current.scrollTo({
+                top: hiddenContainerRef.current.offsetHeight * selectColorIndex,
+            });
+        }
+    };
+
+    const onChangeSliderValue = (event: ChangeEvent<HTMLInputElement>) => {
+        const selectColorIndex = Number(event.target.value);
+
+        updateSliderValue(selectColorIndex);
+    };
+
+    const onScrollHiddenContainer = (event: UIEvent<HTMLDivElement>) => {
+        const selectColorIndex = Math.round(event.currentTarget.scrollTop / event.currentTarget.offsetHeight);
+        const withAutoScroll = false;
+
+        updateSliderValue(selectColorIndex, withAutoScroll);
+    };
+
+    const onChangeColorHex = (event: ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
+        const hue = getHSLARawColor(value).color[0];
+        const huesArray = gradients.map((item) => getHSLARawColor(item['500']).color[0]);
+        const nearestIndex = findNearestIndex(hue, huesArray);
+
+        updateSliderValue(nearestIndex);
+        setColorHex(value);
+    };
+
+    return (
+        <Container>
+            <Header text="Тон" onClick={props.onPreviousPage} />
+            <Wrapper>
+                {gradients.map((colors, index) => (
+                    <ColorTone ref={(element: HTMLDivElement) => getColorRefs(element, index)} colors={colors} />
+                ))}
+                <GradientVerticalSlider
+                    value={colorIndexValue}
+                    gradients={gradients}
+                    min={sliderMin}
+                    max={sliderMax}
+                    thumbRef={thumbRef}
+                    onChange={onChangeSliderValue}
+                />
+                <ColorBox>
+                    <InputLabel>Подобрать ближайший по hex-коду</InputLabel>
+                    <InputHex
+                        onScroll={(e) => e.preventDefault()}
+                        value={colorHex}
+                        onChange={onChangeColorHex}
+                        placeholder="#HEX"
+                    />
+                </ColorBox>
+
+                <Grid view="default">
+                    <Row>
+                        <Col offset={16} size={6}>
+                            <ColorToneDisplay>
+                                <ColorToneDescription>Влияет на оттенок акцентного цвета темы</ColorToneDescription>
+                                <ColorToneName>{formatColorToneName(toneColorsName[colorIndexValue])}</ColorToneName>
+                            </ColorToneDisplay>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col offset={16} size={5}>
+                            <ContinueButton
+                                onClick={() => {
+                                    props.onNextPage?.();
+                                }}
+                                contentRight={<IconArrowRight />}
+                                size="l"
+                                stretching="filled"
+                                text="Продолжить"
+                                pin="circle-circle"
+                                view="black"
+                            />
+                        </Col>
+                    </Row>
+                </Grid>
+
+                <ScrollableHiddenContainer ref={hiddenContainerRef} onScroll={onScrollHiddenContainer}>
+                    {gradients.map(() => (
+                        <HiddenColorTone />
+                    ))}
+                </ScrollableHiddenContainer>
+            </Wrapper>
+            <NoScroll />
+        </Container>
+    );
+};

From bc60f9780a72e10b70a7931139643fe10f3f0163 Mon Sep 17 00:00:00 2001
From: Neretin Artem <hawktrike@gmail.com>
Date: Fri, 13 Sep 2024 23:49:40 +0500
Subject: [PATCH 5/7] feat(plasma-theme-builder): Add Grayscale page

---
 .../ColorGenerator/GrayscaleGenerator.tsx     | 271 ++++++++++++++++++
 1 file changed, 271 insertions(+)
 create mode 100644 website/plasma-theme-builder/src/components/ColorGenerator/GrayscaleGenerator.tsx

diff --git a/website/plasma-theme-builder/src/components/ColorGenerator/GrayscaleGenerator.tsx b/website/plasma-theme-builder/src/components/ColorGenerator/GrayscaleGenerator.tsx
new file mode 100644
index 0000000000..2636575bf0
--- /dev/null
+++ b/website/plasma-theme-builder/src/components/ColorGenerator/GrayscaleGenerator.tsx
@@ -0,0 +1,271 @@
+import React, { ChangeEvent, UIEvent, useEffect, useRef, useState } from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+
+import { onLightTextPrimary, onLightTextSecondary } from '@salutejs/plasma-tokens-b2c/new';
+import { Container as ContainerBase, Col, Row } from '@salutejs/plasma-b2c';
+import { general } from '@salutejs/plasma-colors';
+import { upperFirstLetter } from '@salutejs/plasma-tokens-utils';
+
+import { Header } from './Header';
+import { BackgroundGradientSaturation } from './types';
+import { RadioboxButton } from './RadioboxButton';
+
+const NoScroll = createGlobalStyle`
+    html, body {
+        overscroll-behavior: none;
+    }
+`;
+
+const Container = styled.div`
+    position: relative;
+
+    width: 100%;
+    height: 100vh;
+    box-sizing: border-box;
+    background-color: #000;
+`;
+
+const Wrapper = styled.div`
+    position: absolute;
+    inset: 0.125rem;
+    border-radius: 0.5rem;
+
+    overflow: scroll;
+
+    ::-webkit-scrollbar {
+        display: none;
+    }
+    scrollbar-width: none;
+
+    .transitionOpacity {
+        opacity: 1;
+    }
+`;
+
+const ColorTone = styled.div<{ colors: BackgroundGradientSaturation }>`
+    position: absolute;
+    inset: 0;
+
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+
+    /* stylelint-disable */
+    background: linear-gradient(
+        90deg,
+        ${({ colors }) => colors[1000]} 5%,
+        ${({ colors }) => colors[800]} 30%,
+        ${({ colors }) => colors[500]} 50%,
+        ${({ colors }) => colors[250]} 70%,
+        ${({ colors }) => colors[100]} 95%
+    );
+
+    padding: 2rem;
+    color: #ffffff17;
+    font-size: 4rem;
+`;
+
+const ScrollableHiddenContainer = styled.div`
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
+    scroll-bar-width: none;
+    opacity: 0;
+
+    position: absolute;
+    inset: 0;
+`;
+
+const HiddenColorTone = styled.div`
+    position: relative;
+    height: 100vh;
+
+    scroll-snap-align: center;
+    opacity: 1;
+
+    background: transparent;
+`;
+
+const Grid = styled(ContainerBase)`
+    position: absolute;
+`;
+
+const ColorToneDisplay = styled.div`
+    position: relative;
+    top: 6.125rem;
+    height: 15.25rem;
+`;
+
+const ColorToneDescription = styled.div`
+    width: 16.25rem;
+    margin-bottom: 1.5rem;
+
+    color: ${onLightTextSecondary};
+
+    font-family: var(--plasma-typo-text-s-font-family);
+    font-size: var(--plasma-typo-text-s-font-size);
+    font-weight: var(--plasma-typo-text-s-font-weight);
+    line-height: var(--plasma-typo-text-s-line-height);
+`;
+
+const ColorToneName = styled.div`
+    color: ${onLightTextPrimary};
+
+    font-family: var(--plasma-typo-dspl-m-font-family);
+    font-size: var(--plasma-typo-dspl-m-font-size);
+    font-weight: var(--plasma-typo-dspl-m-font-weight);
+    line-height: var(--plasma-typo-dspl-m-line-height);
+`;
+
+const grayShadeIndex = Math.max(Object.entries(general).length - 2, 1);
+
+const toneColorsName = Object.keys(general).slice(grayShadeIndex).reverse();
+
+const gradients = Object.entries(general)
+    .map(([_, saturation]) => ({
+        1000: saturation['1000'],
+        800: saturation['800'],
+        500: saturation['500'],
+        250: saturation['250'],
+        100: saturation['100'],
+    }))
+    .slice(grayShadeIndex)
+    .reverse();
+
+const formatColorToneName = (value: string) => {
+    return upperFirstLetter(value).replace(/([a-z])([A-Z])/g, '$1 $2');
+};
+
+interface GrayscaleGeneratorProps {
+    onNextPage?: () => void;
+    onPreviousPage?: () => void;
+}
+
+export const GrayscaleGenerator = (props: GrayscaleGeneratorProps) => {
+    const colorRefs = useRef<HTMLDivElement[]>([]);
+    const hiddenContainerRef = useRef<HTMLDivElement>(null);
+    const thumbRef = useRef<HTMLDivElement>(null);
+
+    const sliderMin = 0;
+    const sliderMax = gradients.length - 1;
+
+    const [colorIndexValue, setColorIndexValue] = useState(0);
+
+    useEffect(() => {
+        colorRefs.current?.[0]?.classList.add('transitionOpacity');
+    }, []);
+
+    useEffect(() => {
+        const scaledColorValue = ((colorIndexValue - sliderMin) / (sliderMax - sliderMin)).toFixed(3);
+
+        if (thumbRef.current) {
+            thumbRef.current.style.transform = `translateY(calc(${scaledColorValue} * calc(var(--private-gradient-scroll-height) - 0.25rem)))`;
+        }
+    }, [colorIndexValue, sliderMax]);
+
+    const getColorRefs = (element: HTMLDivElement, index: number) => {
+        if (colorRefs.current) {
+            colorRefs.current[index] = element;
+        }
+    };
+
+    const updateTransitionOpacityClass = (selectColorIndex: number) => {
+        if (selectColorIndex < colorIndexValue) {
+            for (let index = sliderMax; index > selectColorIndex; index--) {
+                colorRefs.current?.[index]?.classList.remove('transitionOpacity');
+            }
+
+            return;
+        }
+
+        for (let index = sliderMin; index <= selectColorIndex; index++) {
+            colorRefs.current?.[index]?.classList.add('transitionOpacity');
+        }
+    };
+
+    const updateSliderValue = (selectColorIndex: number, withAutoScroll = true) => {
+        updateTransitionOpacityClass(selectColorIndex);
+        setColorIndexValue(selectColorIndex);
+
+        if (withAutoScroll && hiddenContainerRef.current) {
+            hiddenContainerRef.current.scrollTo({
+                top: hiddenContainerRef.current.offsetHeight * selectColorIndex,
+            });
+        }
+    };
+
+    const onScrollHiddenContainer = (event: UIEvent<HTMLDivElement>) => {
+        const selectColorIndex = Math.round(event.currentTarget.scrollTop / event.currentTarget.offsetHeight);
+        const withAutoScroll = false;
+
+        updateSliderValue(selectColorIndex, withAutoScroll);
+    };
+
+    const handleOptionChange = (event: ChangeEvent<HTMLInputElement>) => {
+        updateSliderValue(Number(event.target.value));
+    };
+
+    return (
+        <Container>
+            <Header text="Оттенок серого" onClick={props.onPreviousPage} />
+            <Wrapper>
+                {gradients.map((colors, index) => (
+                    <ColorTone ref={(element: HTMLDivElement) => getColorRefs(element, index)} colors={colors} />
+                ))}
+
+                <Grid view="default">
+                    <Row>
+                        <Col offset={16} size={6}>
+                            <ColorToneDisplay>
+                                <ColorToneDescription>Определяет оттенок серого для текста и фона</ColorToneDescription>
+                                <ColorToneName>{formatColorToneName(toneColorsName[colorIndexValue])}</ColorToneName>
+                            </ColorToneDisplay>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col offset={16} size={7}>
+                            <div
+                                style={{
+                                    position: 'relative',
+                                    zIndex: 999,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: '0.5rem',
+                                    top: '13rem',
+                                }}
+                            >
+                                <RadioboxButton
+                                    id="test-1"
+                                    label="Без примесей"
+                                    view="black"
+                                    value={0}
+                                    checked={colorIndexValue === 0}
+                                    onChange={handleOptionChange}
+                                    onClick={() => {
+                                        props.onNextPage?.();
+                                    }}
+                                />
+                                <RadioboxButton
+                                    id="test-2"
+                                    label="Холодный"
+                                    view="black"
+                                    value={1}
+                                    checked={colorIndexValue === 1}
+                                    onChange={handleOptionChange}
+                                    onClick={() => {
+                                        props.onNextPage?.();
+                                    }}
+                                />
+                            </div>
+                        </Col>
+                    </Row>
+                </Grid>
+
+                <ScrollableHiddenContainer ref={hiddenContainerRef} onScroll={onScrollHiddenContainer}>
+                    {gradients.map(() => (
+                        <HiddenColorTone />
+                    ))}
+                </ScrollableHiddenContainer>
+            </Wrapper>
+            <NoScroll />
+        </Container>
+    );
+};

From da9d2a665a91f58e9472228f700457da6707c5df Mon Sep 17 00:00:00 2001
From: Neretin Artem <hawktrike@gmail.com>
Date: Fri, 13 Sep 2024 23:52:53 +0500
Subject: [PATCH 6/7] feat(plasma-theme-builder): Add FontFamily page

---
 .../plasma-theme-builder/public/index.html    |   2 +
 .../plasma-theme-builder/src/GlobalStyle.tsx  |  45 +-
 .../src/components/App.tsx                    |  62 +-
 .../ColorGenerator/FontFamilyGenerator.tsx    | 606 ++++++++++++++++++
 .../src/components/mixins.ts                  |   3 +-
 5 files changed, 664 insertions(+), 54 deletions(-)
 create mode 100644 website/plasma-theme-builder/src/components/ColorGenerator/FontFamilyGenerator.tsx

diff --git a/website/plasma-theme-builder/public/index.html b/website/plasma-theme-builder/public/index.html
index 4671d8a003..323a7a520a 100644
--- a/website/plasma-theme-builder/public/index.html
+++ b/website/plasma-theme-builder/public/index.html
@@ -10,6 +10,8 @@
     />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💎</text></svg>"/>
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css" />
+    <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSerifDisplay.0.2.0.css" />
     <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
     <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansTextMono.0.2.0.css" />
     <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansCondMono.0.2.0.css" />
diff --git a/website/plasma-theme-builder/src/GlobalStyle.tsx b/website/plasma-theme-builder/src/GlobalStyle.tsx
index 29945fc5f7..7e20f59771 100644
--- a/website/plasma-theme-builder/src/GlobalStyle.tsx
+++ b/website/plasma-theme-builder/src/GlobalStyle.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { useState, createContext, useContext } from 'react';
 import { createGlobalStyle } from 'styled-components';
-import { plasma } from '@salutejs/plasma-typo';
+import { plasma, ruler, sage, mage, soulmate } from '@salutejs/plasma-typo';
 import { dark } from '@salutejs/plasma-tokens-b2c/themes';
 import { text } from '@salutejs/plasma-tokens-b2c';
 import { b2c } from '@salutejs/plasma-tokens-b2c/typo';
-import type { ThemeMode } from '@salutejs/plasma-tokens-utils';
 
 import { SBSansTextMono } from './components/mixins';
 
@@ -24,18 +23,46 @@ const DocumentStyle = createGlobalStyle`
 `;
 
 const DarkThemeStyle = createGlobalStyle(dark);
-const TypoStyle = createGlobalStyle(plasma);
 const OldTypoStyle = createGlobalStyle(b2c);
 
-export const GlobalStyle = () => {
-    const theme: ThemeMode = 'dark';
+const archetypeMap = {
+    plasma: createGlobalStyle(plasma),
+    ruler: createGlobalStyle(ruler),
+    sage: createGlobalStyle(sage),
+    mage: createGlobalStyle(mage),
+    soulmate: createGlobalStyle(soulmate),
+};
+
+export type Archetype = keyof typeof archetypeMap;
+
+const ThemeContext = createContext<{
+    toggleArchetype: (value: Archetype) => void;
+}>({
+    toggleArchetype: () => {},
+});
+
+export const useTheme = () => useContext(ThemeContext);
+
+export const GlobalStyle = ({ children }: any) => {
+    const [archetype, setArchetype] = useState<Archetype>('plasma');
+
+    const toggleArchetype = (value: Archetype) => {
+        setArchetype(value);
+    };
+
+    const TypoStyle = archetypeMap[archetype];
 
     return (
-        <>
+        <ThemeContext.Provider
+            value={{
+                toggleArchetype,
+            }}
+        >
             <DocumentStyle />
-            {theme === 'dark' && <DarkThemeStyle />}
+            <DarkThemeStyle />
             <TypoStyle />
             <OldTypoStyle />
-        </>
+            {children}
+        </ThemeContext.Provider>
     );
 };
diff --git a/website/plasma-theme-builder/src/components/App.tsx b/website/plasma-theme-builder/src/components/App.tsx
index e26f09d5cd..a0fd727ff1 100644
--- a/website/plasma-theme-builder/src/components/App.tsx
+++ b/website/plasma-theme-builder/src/components/App.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { Route, Routes, useNavigate } from 'react-router-dom';
 
@@ -17,8 +17,10 @@ import type { Theme as ThemeType } from '../types';
 // import { multipleMediaQuery } from './mixins';
 // import { getURLParams, pushHistoryState } from '../utils';
 // import type { Theme as ThemeType } from '../types';
-import { TokensEditor } from './_new/TokensEditor';
 import { ToneGenerator } from './ColorGenerator/ToneGenerator';
+import { GrayscaleGenerator } from './ColorGenerator/GrayscaleGenerator';
+import { FontFamilyGenerator } from './ColorGenerator/FontFamilyGenerator';
+import { TokensEditor } from './_new/TokensEditor';
 
 const StyledRoot = styled.div`
     min-width: 35rem;
@@ -47,60 +49,32 @@ const PAGE_TYPE = {
 type PageType = typeof PAGE_TYPE[keyof typeof PAGE_TYPE];
 
 const App = () => {
-    const [state, setState] = useState<PageType>(PAGE_TYPE.TOKENS_EDITOR);
-    const navigate = useNavigate();
-
+    const [state, setState] = useState<PageType>(PAGE_TYPE.TONE);
     // const [data, setData] = useState<ThemeType>();
     // const [token, setToken] = useState<string | undefined>();
     // const defaultData = useDefaultThemeData();
 
+    const navigate = useNavigate();
+
     const [themeName, branchName] = getURLParams(['theme', 'branch']);
     const [themeData, errorMessage] = useFetchTheme(themeName, branchName);
 
-    useEffect(() => {
-        if (!token) {
-            return;
-        }
-
-        if (themeData) {
-            setState(PAGE_TYPE.THEME);
-            setData(themeData);
-            return;
-        }
-
-        if (errorMessage) {
-            setState(PAGE_TYPE.ERROR);
-        }
-    }, [themeData, token, errorMessage]);
-
-    const onSetToken = useCallback((value: string) => {
-        setToken(value);
-    }, []);
-
-    const onMain = useCallback(() => {
-        setState(PAGE_TYPE.MAIN);
-        pushHistoryState('./');
-    }, []);
-
-    const onGenerateTheme = useCallback(() => {
-        setState(PAGE_TYPE.GENERATOR);
-        pushHistoryState('./');
-    }, []);
-
-    const onPreviewTheme = useCallback((data: ThemeType) => {
-        setState(PAGE_TYPE.THEME);
-        setData(data);
-    }, []);
-
-    const onPullRequest = useCallback((data: ThemeType) => {
-        setState(PAGE_TYPE.PULL_REQUEST);
-        setData(data);
-    }, []);
+    const onGrayScale = () => {
+        setState(PAGE_TYPE.GRAYSCALE);
+    };
 
     const onTokensEditor = () => {
         setState(PAGE_TYPE.TOKENS_EDITOR);
     };
 
+    const onTone = () => {
+        setState(PAGE_TYPE.TONE);
+    };
+
+    const onFontFamily = () => {
+        setState(PAGE_TYPE.FONT_FAMILY);
+    };
+
     return (
         <Routes>
             <Route path="new" element={<TokensEditor onPreviousPage={onFontFamily} onNextPage={onTone} />} />
diff --git a/website/plasma-theme-builder/src/components/ColorGenerator/FontFamilyGenerator.tsx b/website/plasma-theme-builder/src/components/ColorGenerator/FontFamilyGenerator.tsx
new file mode 100644
index 0000000000..09614c53b6
--- /dev/null
+++ b/website/plasma-theme-builder/src/components/ColorGenerator/FontFamilyGenerator.tsx
@@ -0,0 +1,606 @@
+import React, { ChangeEvent, UIEvent, useEffect, useRef, useState } from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+
+import { textPrimary } from '@salutejs/plasma-tokens-b2c/new';
+
+import { Container as ContainerBase, Col, Row } from '@salutejs/plasma-b2c';
+import {
+    h1,
+    h1Bold,
+    h2,
+    h2Bold,
+    h3,
+    h3Bold,
+    h4,
+    h4Bold,
+    h5,
+    h5Bold,
+    bodyL,
+    bodyLBold,
+    bodyM,
+    bodyMBold,
+    bodyS,
+    bodySBold,
+    bodyXS,
+    bodyXSBold,
+    bodyXXS,
+    bodyXXSBold,
+} from '@salutejs/plasma-typo';
+
+import { Header } from './Header';
+import { RadioboxButton } from './RadioboxButton';
+import { Archetype, useTheme } from '../../GlobalStyle';
+
+const NoScroll = createGlobalStyle`
+    html, body {
+        overscroll-behavior: none;
+    }
+`;
+
+const Container = styled.div`
+    position: relative;
+
+    width: 100%;
+    height: 100vh;
+    box-sizing: border-box;
+    background-color: #000;
+`;
+
+const Wrapper = styled.div`
+    position: absolute;
+    inset: 0.125rem;
+    border-radius: 0.5rem;
+
+    overflow: scroll;
+
+    ::-webkit-scrollbar {
+        display: none;
+    }
+    scrollbar-width: none;
+`;
+
+const ColorTone = styled.div`
+    position: absolute;
+    inset: 0;
+
+    background: linear-gradient(90deg, #080808 0%, #080808 25.03%, #080808 49.72%, #080808 74.76%, #080808 100%);
+
+    padding: 2rem;
+    color: #ffffff17;
+    font-size: 4rem;
+`;
+
+const ScrollableHiddenContainer = styled.div`
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
+    scrollbar-width: none;
+    opacity: 0;
+
+    position: absolute;
+    inset: 0;
+`;
+
+const HiddenColorTone = styled.div`
+    position: relative;
+    height: 100vh;
+
+    scroll-snap-align: center;
+    opacity: 1;
+
+    background: transparent;
+`;
+
+const Grid = styled(ContainerBase)`
+    position: absolute;
+`;
+
+const ColorToneDisplay = styled.div`
+    position: relative;
+    top: 6.125rem;
+`;
+
+const ColorToneDescription = styled.div`
+    width: 16.25rem;
+    margin-bottom: 1.5rem;
+
+    color: ${textPrimary};
+
+    font-family: var(--plasma-typo-text-s-font-family);
+    font-size: var(--plasma-typo-text-s-font-size);
+    font-weight: var(--plasma-typo-text-s-font-weight);
+    line-height: var(--plasma-typo-text-s-line-height);
+`;
+
+const ColorToneName = styled.div`
+    color: ${textPrimary};
+
+    font-family: var(--plasma-typo-dspl-m-font-family);
+    font-size: var(--plasma-typo-dspl-m-font-size);
+    font-weight: var(--plasma-typo-dspl-m-font-weight);
+    line-height: var(--plasma-typo-dspl-m-line-height);
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+
+const HelperBlock = styled.div`
+    flex: 1;
+    max-width: calc(100% / var(--plasma_private-grid-cols-count) * var(--plasma_private-grid-col-largeM-offset, 16));
+`;
+
+const ColorToneName2 = styled.div`
+    margin-top: 0.75rem;
+
+    color: ${textPrimary};
+
+    font-family: var(--plasma-typo-body-m-font-family);
+    font-size: var(--plasma-typo-body-m-font-size);
+    font-weight: var(--plasma-typo-body-m-font-weight);
+    line-height: var(--plasma-typo-body-m-line-height);
+`;
+
+const StyledHeader = styled(Header)``;
+
+const TypographyPreview = styled.div`
+    position: absolute;
+    left: 3.375rem;
+    bottom: 2.875rem;
+`;
+
+const TypographyPreviewBlock = styled.div`
+    margin-top: 2rem;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+`;
+
+const TypographyLabel = styled.div`
+    color: rgba(255, 255, 255, 0.28);
+
+    ${bodyXXS};
+`;
+
+const TypographySeparator = styled.span`
+    margin: 0 -0.625rem;
+`;
+
+/** HEADER 1 */
+const HeaderH1Wrapper = styled.div`
+    color: rgba(255, 255, 255, 0.28);
+
+    ${h1};
+
+    display: flex;
+    gap: 0.5rem;
+`;
+const HeaderH1Regular = styled.span`
+    color: rgba(255, 255, 255, 0.96);
+
+    ${h1};
+`;
+const HeaderH1Bold = styled.span`
+    color: rgba(255, 255, 255, 0.96);
+
+    ${h1Bold};
+`;
+const BodyLWrapper = styled.div`
+    color: rgba(255, 255, 255, 0.28);
+
+    ${bodyL};
+
+    display: flex;
+    gap: 0.5rem;
+`;
+const BodyLRegular = styled.span`
+    color: rgba(255, 255, 255, 0.8);
+
+    ${bodyL};
+`;
+const BodyLBold = styled.span`
+    color: rgba(255, 255, 255, 0.8);
+
+    ${bodyLBold};
+`;
+
+/** HEADER 2 */
+const HeaderH2Wrapper = styled.div`
+    color: rgba(255, 255, 255, 0.28);
+
+    ${h2};
+
+    display: flex;
+    gap: 0.5rem;
+`;
+const HeaderH2Regular = styled.span`
+    color: rgba(255, 255, 255, 0.96);
+
+    ${h2};
+`;
+const HeaderH2Bold = styled.span`
+    color: rgba(255, 255, 255, 0.96);
+
+    ${h2Bold};
+`;
+const BodyMWrapper = styled.div`
+    color: rgba(255, 255, 255, 0.28);
+
+    ${bodyM};
+
+    display: flex;
+    gap: 0.5rem;
+`;
+const BodyMRegular = styled.span`
+    color: rgba(255, 255, 255, 0.8);
+
+    ${bodyM};
+`;
+const BodyMBold = styled.span`
+    color: rgba(255, 255, 255, 0.8);
+
+    ${bodyMBold};
+`;
+
+/** HEADER 3 */
+const HeaderH3Wrapper = styled.div`
+    color: rgba(255, 255, 255, 0.28);
+
+    ${h3};
+
+    display: flex;
+    gap: 0.5rem;
+`;
+const HeaderH3Regular = styled.span`
+    color: rgba(255, 255, 255, 0.96);
+
+    ${h3};
+`;
+const HeaderH3Bold = styled.span`
+    color: rgba(255, 255, 255, 0.96);
+
+    ${h3Bold};
+`;
+const BodySWrapper = styled.div`
+    color: rgba(255, 255, 255, 0.28);
+
+    ${bodyS};
+
+    display: flex;
+    gap: 0.5rem;
+`;
+const BodySRegular = styled.span`
+    color: rgba(255, 255, 255, 0.8);
+
+    ${bodyS};
+`;
+const BodySBold = styled.span`
+    color: rgba(255, 255, 255, 0.8);
+
+    ${bodySBold};
+`;
+
+/** HEADER 4 */
+const HeaderH4Wrapper = styled.div`
+    color: rgba(255, 255, 255, 0.28);
+
+    ${h4};
+
+    display: flex;
+    gap: 0.5rem;
+`;
+const HeaderH4Regular = styled.span`
+    color: rgba(255, 255, 255, 0.96);
+
+    ${h4};
+`;
+const HeaderH4Bold = styled.span`
+    color: rgba(255, 255, 255, 0.96);
+
+    ${h4Bold};
+`;
+const BodyXSWrapper = styled.div`
+    color: rgba(255, 255, 255, 0.28);
+
+    ${bodyXS};
+
+    display: flex;
+    gap: 0.5rem;
+`;
+const BodyXSRegular = styled.span`
+    color: rgba(255, 255, 255, 0.8);
+
+    ${bodyXS};
+`;
+const BodyXSBold = styled.span`
+    color: rgba(255, 255, 255, 0.8);
+
+    ${bodyXSBold};
+`;
+
+/** HEADER 5 */
+const HeaderH5Wrapper = styled.div`
+    color: rgba(255, 255, 255, 0.28);
+
+    ${h5};
+
+    display: flex;
+    gap: 0.5rem;
+`;
+const HeaderH5Regular = styled.span`
+    color: rgba(255, 255, 255, 0.96);
+
+    ${h5};
+`;
+const HeaderH5Bold = styled.span`
+    color: rgba(255, 255, 255, 0.96);
+
+    ${h5Bold};
+`;
+const BodyXXSWrapper = styled.div`
+    color: rgba(255, 255, 255, 0.28);
+
+    ${bodyXXS};
+
+    display: flex;
+    gap: 0.5rem;
+`;
+const BodyXXSRegular = styled.span`
+    color: rgba(255, 255, 255, 0.8);
+
+    ${bodyXXS};
+`;
+const BodyXXSBold = styled.span`
+    color: rgba(255, 255, 255, 0.8);
+
+    ${bodyXXSBold};
+`;
+
+const fontFamilyMap: {
+    archetype: Archetype;
+    name: string;
+    displayFontFamily: string;
+    textFontFamily: string;
+}[] = [
+    {
+        archetype: 'ruler',
+        name: 'Правитель',
+        displayFontFamily: 'SB Sans Display',
+        textFontFamily: 'SB Sans Text',
+    },
+    {
+        archetype: 'sage',
+        name: 'Мудрец',
+        displayFontFamily: 'SB Serif Display',
+        textFontFamily: 'SB Sans Text',
+    },
+    {
+        archetype: 'mage',
+        name: 'Маг',
+        displayFontFamily: 'SB Sans Display',
+        textFontFamily: 'SB Sans Text',
+    },
+    {
+        archetype: 'soulmate',
+        name: 'Душа компании',
+        displayFontFamily: 'SB Sans Display',
+        textFontFamily: 'SB Sans Text',
+    },
+    {
+        archetype: 'soulmate',
+        name: 'Длинное название',
+        displayFontFamily: 'SB Sans Display SB Sans Display SB Sans Display SB Sans Display SB Sans Display',
+        textFontFamily: 'SB Sans Text',
+    },
+    {
+        archetype: 'soulmate',
+        name: 'Короткое название',
+        displayFontFamily: 'SB Sans',
+        textFontFamily: 'SB Sans Text',
+    },
+];
+
+interface FontFamilyGeneratorProps {
+    onNextPage?: () => void;
+    onPreviousPage?: () => void;
+}
+
+export const FontFamilyGenerator = (props: FontFamilyGeneratorProps) => {
+    const hiddenContainerRef = useRef<HTMLDivElement>(null);
+    const thumbRef = useRef<HTMLDivElement>(null);
+
+    const { toggleArchetype } = useTheme();
+
+    const sliderMin = 0;
+    const sliderMax = fontFamilyMap.length - 1;
+
+    const [colorIndexValue, setColorIndexValue] = useState(0);
+
+    useEffect(() => {
+        const scaledColorValue = ((colorIndexValue - sliderMin) / (sliderMax - sliderMin)).toFixed(3);
+
+        if (thumbRef.current) {
+            thumbRef.current.style.transform = `translateY(calc(${scaledColorValue} * calc(var(--private-gradient-scroll-height) - 0.25rem)))`;
+        }
+    }, [colorIndexValue, sliderMax]);
+
+    const updateSliderValue = (selectColorIndex: number, withAutoScroll = true) => {
+        setColorIndexValue(selectColorIndex);
+        toggleArchetype(fontFamilyMap[selectColorIndex].archetype);
+
+        if (withAutoScroll && hiddenContainerRef.current) {
+            hiddenContainerRef.current.scrollTo({
+                top: hiddenContainerRef.current.offsetHeight * selectColorIndex,
+            });
+        }
+    };
+
+    const onScrollHiddenContainer = (event: UIEvent<HTMLDivElement>) => {
+        const selectColorIndex = Math.round(event.currentTarget.scrollTop / event.currentTarget.offsetHeight);
+        const withAutoScroll = false;
+
+        updateSliderValue(selectColorIndex, withAutoScroll);
+    };
+
+    const handleOptionChange = (event: ChangeEvent<HTMLInputElement>) => {
+        updateSliderValue(Number(event.target.value));
+    };
+
+    return (
+        <Container>
+            <StyledHeader text="Типографика" onClick={props.onPreviousPage} />
+            <Wrapper>
+                {fontFamilyMap.map(() => (
+                    <ColorTone />
+                ))}
+
+                <TypographyPreview>
+                    <TypographyPreviewBlock>
+                        <HeaderH1Wrapper>
+                            <HeaderH1Bold>Bold</HeaderH1Bold>
+                            <TypographySeparator>&</TypographySeparator>
+                            <HeaderH1Regular>Regular</HeaderH1Regular>
+                            <TypographyLabel>headerH1</TypographyLabel>
+                        </HeaderH1Wrapper>
+                        <BodyLWrapper>
+                            <BodyLBold>Bold</BodyLBold>
+                            <TypographySeparator>&</TypographySeparator>
+                            <BodyLRegular>Regular</BodyLRegular>
+                            <TypographyLabel>bodyL</TypographyLabel>
+                        </BodyLWrapper>
+                    </TypographyPreviewBlock>
+
+                    <TypographyPreviewBlock>
+                        <HeaderH2Wrapper>
+                            <HeaderH2Bold>Bold</HeaderH2Bold>
+                            <TypographySeparator>&</TypographySeparator>
+                            <HeaderH2Regular>Regular</HeaderH2Regular>
+                            <TypographyLabel>headerH2</TypographyLabel>
+                        </HeaderH2Wrapper>
+                        <BodyMWrapper>
+                            <BodyMBold>Bold</BodyMBold>
+                            <TypographySeparator>&</TypographySeparator>
+                            <BodyMRegular>Regular</BodyMRegular>
+                            <TypographyLabel>BodyM</TypographyLabel>
+                        </BodyMWrapper>
+                    </TypographyPreviewBlock>
+
+                    <TypographyPreviewBlock>
+                        <HeaderH3Wrapper>
+                            <HeaderH3Bold>Bold</HeaderH3Bold>
+                            <TypographySeparator>&</TypographySeparator>
+                            <HeaderH3Regular>Regular</HeaderH3Regular>
+                            <TypographyLabel>headerH3</TypographyLabel>
+                        </HeaderH3Wrapper>
+                        <BodySWrapper>
+                            <BodySBold>Bold</BodySBold>
+                            <TypographySeparator>&</TypographySeparator>
+                            <BodySRegular>Regular</BodySRegular>
+                            <TypographyLabel>BodyS</TypographyLabel>
+                        </BodySWrapper>
+                    </TypographyPreviewBlock>
+
+                    <TypographyPreviewBlock>
+                        <HeaderH4Wrapper>
+                            <HeaderH4Bold>Bold</HeaderH4Bold>
+                            <TypographySeparator>&</TypographySeparator>
+                            <HeaderH4Regular>Regular</HeaderH4Regular>
+                            <TypographyLabel>headerH4</TypographyLabel>
+                        </HeaderH4Wrapper>
+                        <BodyXSWrapper>
+                            <BodyXSBold>Bold</BodyXSBold>
+                            <TypographySeparator>&</TypographySeparator>
+                            <BodyXSRegular>Regular</BodyXSRegular>
+                            <TypographyLabel>BodyXS</TypographyLabel>
+                        </BodyXSWrapper>
+                    </TypographyPreviewBlock>
+
+                    <TypographyPreviewBlock>
+                        <HeaderH5Wrapper>
+                            <HeaderH5Bold>Bold</HeaderH5Bold>
+                            <TypographySeparator>&</TypographySeparator>
+                            <HeaderH5Regular>Regular</HeaderH5Regular>
+                            <TypographyLabel>headerH5</TypographyLabel>
+                        </HeaderH5Wrapper>
+                        <BodyXXSWrapper>
+                            <BodyXXSBold>Bold</BodyXXSBold>
+                            <TypographySeparator>&</TypographySeparator>
+                            <BodyXXSRegular>Regular</BodyXXSRegular>
+                            <TypographyLabel>BodyXXS</TypographyLabel>
+                        </BodyXXSWrapper>
+                    </TypographyPreviewBlock>
+                </TypographyPreview>
+
+                <Grid view="default">
+                    <Row>
+                        <Col offset={16} size={5}>
+                            <ColorToneDisplay>
+                                <ColorToneDescription>
+                                    Определяет шрифты <br /> для заголовков и текста
+                                </ColorToneDescription>
+                            </ColorToneDisplay>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col
+                            style={{
+                                width: '100%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    position: 'relative',
+                                    top: '6.125rem',
+                                    height: '15.25rem',
+                                }}
+                            >
+                                <HelperBlock />
+                                <ColorToneName>
+                                    {fontFamilyMap[colorIndexValue].displayFontFamily}
+                                    <ColorToneName2>{fontFamilyMap[colorIndexValue].textFontFamily}</ColorToneName2>
+                                </ColorToneName>
+                            </div>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col offset={16} size={10}>
+                            <div
+                                style={{
+                                    position: 'relative',
+                                    zIndex: 999,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: '0.5rem',
+                                    top: '8.55rem',
+                                }}
+                            >
+                                {fontFamilyMap.map((item, index) => (
+                                    <RadioboxButton
+                                        key={`test-${index}`}
+                                        id={`test-${index}`}
+                                        label={item.name}
+                                        value={index}
+                                        view="white"
+                                        checked={colorIndexValue === index}
+                                        onChange={handleOptionChange}
+                                        onClick={() => {
+                                            props.onNextPage?.();
+                                        }}
+                                    />
+                                ))}
+                            </div>
+                        </Col>
+                    </Row>
+                </Grid>
+
+                <ScrollableHiddenContainer ref={hiddenContainerRef} onScroll={onScrollHiddenContainer}>
+                    {fontFamilyMap.map(() => (
+                        <HiddenColorTone />
+                    ))}
+                </ScrollableHiddenContainer>
+            </Wrapper>
+            <NoScroll />
+        </Container>
+    );
+};
diff --git a/website/plasma-theme-builder/src/components/mixins.ts b/website/plasma-theme-builder/src/components/mixins.ts
index 438def56c9..3acc6d64e9 100644
--- a/website/plasma-theme-builder/src/components/mixins.ts
+++ b/website/plasma-theme-builder/src/components/mixins.ts
@@ -1,8 +1,9 @@
 import { FlattenSimpleInterpolation, css, keyframes } from 'styled-components';
+
 import { Breakpoint, mediaQuery } from '@salutejs/plasma-b2c';
 
 export const SBSansTextMono = css`
-    font-family: 'SB Sans Text Mono', Helvetica, Arial, sans-serif;
+    font-family: var(--plasma-typo-text-l-font-family), Helvetica, Arial, sans-serif;
 `;
 
 export const iconButtonFade = css`

From ce53798d2be0445df697b4882db0f684fece193a Mon Sep 17 00:00:00 2001
From: Neretin Artem <hawktrike@gmail.com>
Date: Sat, 28 Dec 2024 20:46:05 +0700
Subject: [PATCH 7/7] feat(plasma-theme-builder): Add new page with edit tokens

---
 .../src/components/_new/TokensEditor.tsx      | 350 ++++++++++++++++++
 1 file changed, 350 insertions(+)
 create mode 100644 website/plasma-theme-builder/src/components/_new/TokensEditor.tsx

diff --git a/website/plasma-theme-builder/src/components/_new/TokensEditor.tsx b/website/plasma-theme-builder/src/components/_new/TokensEditor.tsx
new file mode 100644
index 0000000000..24f5e1b669
--- /dev/null
+++ b/website/plasma-theme-builder/src/components/_new/TokensEditor.tsx
@@ -0,0 +1,350 @@
+import React, { useMemo, useState } from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+import { useNavigate } from 'react-router-dom';
+
+import { TextField, TabItem, Tabs, Switch, Button } from '@salutejs/plasma-b2c';
+
+import { getHEXAColor, getRestoredColorFromPalette, Grayscale, ThemeConfig } from '@salutejs/plasma-tokens-utils';
+import { buildDefaultTheme, ColorToken } from '../../_new';
+import { getRGBAColor } from '../../utils';
+import { Header } from '../ColorGenerator/Header';
+
+const NoScroll = createGlobalStyle`
+    html, body {
+        overscroll-behavior: none;
+    }
+`;
+
+const Container = styled.div`
+    position: relative;
+
+    width: 100%;
+    height: 100vh;
+    box-sizing: border-box;
+    background-color: #000;
+`;
+
+const Wrapper = styled.div`
+    position: relative;
+    top: 6rem;
+    left: 3rem;
+    bottom: 3rem;
+    right: 3rem;
+    border-radius: 0.5rem;
+    height: calc(100vh - 9rem);
+    width: calc(100% - 6rem);
+
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: column;
+
+    ::-webkit-scrollbar {
+        display: none;
+    }
+    scrollbar-width: none;
+`;
+
+interface FontFamilyGeneratorProps {
+    onNextPage?: () => void;
+    onPreviousPage?: () => void;
+}
+
+const tokensTypes = [
+    {
+        label: 'Цвета',
+        value: 'color',
+        inner: [
+            {
+                label: 'Темная',
+                value: 'dark',
+            },
+            {
+                label: 'Светлая',
+                value: 'light',
+            },
+        ],
+    },
+    {
+        label: 'Градиенты',
+        value: 'gradient',
+        inner: [
+            {
+                label: 'Темная',
+                value: 'dark',
+            },
+            {
+                label: 'Светлая',
+                value: 'light',
+            },
+        ],
+    },
+    {
+        label: 'Форма',
+        value: 'shape',
+        inner: [
+            {
+                label: 'Скругление',
+                value: 'round',
+            },
+        ],
+    },
+    {
+        label: 'Тени',
+        value: 'Shadow',
+        inner: [
+            {
+                label: 'Вверх',
+                value: 'up',
+            },
+            {
+                label: 'Вниз',
+                value: 'down',
+            },
+        ],
+    },
+    {
+        label: 'Типографика',
+        value: 'typography',
+        disabled: true,
+    },
+    {
+        label: 'Семейство шрифтов',
+        value: 'fontFamily',
+        disabled: true,
+    },
+];
+
+const platformTypes = [
+    {
+        label: 'Web',
+        value: 'web',
+    },
+    {
+        label: 'Android',
+        value: 'android',
+        disabled: true,
+    },
+    {
+        label: 'iOS',
+        value: 'ios',
+        disabled: true,
+    },
+    {
+        label: 'React-Native',
+        value: 'reactNative',
+        disabled: true,
+    },
+];
+
+export const buildDefaultThemeWithUserConfig = () => {
+    const userConfig: ThemeConfig = {
+        name: 'default',
+        accentColor: {
+            dark: '[general.green.500]',
+            light: '[general.green.600]',
+        },
+        grayscale: {
+            dark: Grayscale.gray,
+            light: Grayscale.gray,
+        },
+    };
+
+    return buildDefaultTheme(userConfig);
+};
+
+const ColorTokenPreview = ({
+    token,
+    onClick,
+}: {
+    token: ColorToken;
+    onClick: (event?: React.MouseEvent<HTMLDivElement>) => void;
+}) => {
+    const value = token.getValue('web');
+    const newValue = getRestoredColorFromPalette(value);
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                height: '2rem',
+            }}
+            onClick={onClick}
+        >
+            <div
+                style={{
+                    minWidth: '30rem',
+                }}
+            >
+                {token.getDisplayName()}
+            </div>
+            <div
+                style={{
+                    width: '1rem',
+                    height: '1rem',
+                    borderRadius: '50%',
+                    marginRight: '10rem',
+                    background: newValue,
+                }}
+            />
+            <div
+                style={{
+                    minWidth: '15rem',
+                    marginRight: '10rem',
+                }}
+            >
+                {getRGBAColor(newValue)}
+            </div>
+            <div>{getHEXAColor(newValue)}</div>
+        </div>
+    );
+};
+
+const TokenEditor = ({ token }: { token: ColorToken }) => {
+    const tokenName = token.getDisplayName();
+    const tokenDescription = token.getDescription();
+    const tokenEnabled = token.getEnabled();
+    const tokenValue = token.getValue('web');
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                gap: '1rem',
+                flexDirection: 'column',
+            }}
+        >
+            <TextField size="s" label="Название (в нотации camelCase)" value={tokenName} />
+            <TextField size="s" label="Описание" value={tokenDescription} />
+            <Switch label="Отображать токен" checked={tokenEnabled} />
+            <Tabs view="divider" size="m">
+                {platformTypes.map(({ label, disabled, value }, i) => (
+                    <TabItem disabled={disabled} view="divider" key={`item_inner:${label}`} size="m" selected={i === 0}>
+                        {label}
+                    </TabItem>
+                ))}
+            </Tabs>
+            <TextField size="s" label="Значение" value={tokenValue} />
+            <div>
+                <Button view="clear" text="Отменить" />
+                <Button
+                    view="accent"
+                    text="Сохранить"
+                    onClick={(event) => {
+                        const hackButton = event.currentTarget.parentNode?.parentNode?.parentNode?.parentNode
+                            ?.parentNode?.children[0] as HTMLButtonElement;
+
+                        hackButton?.click();
+                    }}
+                />
+            </div>
+        </div>
+    );
+};
+
+export const TokensEditor = (props: FontFamilyGeneratorProps) => {
+    const [theme, setTheme] = useState(buildDefaultThemeWithUserConfig);
+    const [index, setIndex] = useState(0);
+    const [tokenEditorIndex, setTokenEditorIndex] = useState<string | undefined>(undefined);
+
+    const [colorMode, setColorMode] = useState('dark');
+
+    const navigate = useNavigate();
+
+    const colorTokens = useMemo(() => theme.getTokens('color'), [theme]);
+
+    const groupedColorTokens = useMemo(
+        () => [
+            {
+                data: colorTokens.filter((item) => item.getTags()[0] === colorMode && item.getTags()[2] === 'default'),
+                group: 'default',
+            },
+            {
+                data: colorTokens.filter(
+                    (item) =>
+                        item.getTags()[0] === colorMode &&
+                        (item.getTags()[2] === 'dark' || item.getTags()[2] === 'on-dark'),
+                ),
+                group: 'onDark',
+            },
+            {
+                data: colorTokens.filter(
+                    (item) =>
+                        item.getTags()[0] === colorMode &&
+                        (item.getTags()[2] === 'light' || item.getTags()[2] === 'on-light'),
+                ),
+                group: 'onLight',
+            },
+            {
+                data: colorTokens.filter((item) => item.getTags()[0] === colorMode && item.getTags()[2] === 'inverse'),
+                group: 'inverse',
+            },
+        ],
+        [colorMode, colorTokens],
+    );
+
+    const onClickColorTokenPreview = (index: string) => {
+        setTokenEditorIndex((prevIndex) => (prevIndex === index ? undefined : index));
+    };
+
+    return (
+        <Container>
+            <Header text="Типографика" onClick={props.onPreviousPage} />
+            <Wrapper>
+                <br />
+                <Tabs view="divider" size="m" stretch>
+                    {tokensTypes.map(({ label, value, disabled }, i) => (
+                        <TabItem
+                            disabled={disabled}
+                            view="divider"
+                            key={`item:${label}`}
+                            size="m"
+                            selected={i === index}
+                            onClick={() => setIndex(i)}
+                        >
+                            {label}
+                        </TabItem>
+                    ))}
+                </Tabs>
+
+                <Tabs view="divider" size="m">
+                    {tokensTypes[index].inner?.map(({ label, value }, i) => (
+                        <TabItem
+                            view="divider"
+                            key={`item_inner:${label}`}
+                            size="m"
+                            selected={colorMode === value}
+                            onClick={() => setColorMode(value)}
+                        >
+                            {label}
+                        </TabItem>
+                    ))}
+                </Tabs>
+
+                <div
+                    style={{
+                        flex: 1,
+                        overflowY: 'scroll',
+                    }}
+                >
+                    {groupedColorTokens.map((item, groupIndex) => (
+                        <div>
+                            <div style={{ margin: '2rem 0' }}>{item.group}</div>
+                            {item.data.map((token, index) => (
+                                <div style={{ margin: '0.5rem 0' }}>
+                                    <ColorTokenPreview
+                                        token={token}
+                                        onClick={() => onClickColorTokenPreview(`${groupIndex}_${index}`)}
+                                    />
+                                    {tokenEditorIndex === `${groupIndex}_${index}` && <TokenEditor token={token} />}
+                                </div>
+                            ))}
+                        </div>
+                    ))}
+                </div>
+            </Wrapper>
+            <NoScroll />
+        </Container>
+    );
+};