@ozen-ui/kit 0.0.1

package/__inner__/cjs/components/Textarea/Textarea.css

@@ -0,0 +1,205 @@
+.Textarea {
+  --textfield-color: var(--color-content-primary);
+  --textfield-background-color: var(--color-background-primary);
+  --textfield-border-width: var(--border-width-s);
+  --textfield-border-color: var(--color-border-main);
+  --textfield-scroll-size: 12px;
+  min-block-size: var(--textfield-input-block-size);
+  display: inline-flex;
+  vertical-align: top;
+  flex-direction: column;
+  position: relative;
+  cursor: text;
+}
+
+  .Textarea > * {
+    cursor: text;
+  }
+
+  .Textarea-Label {
+    padding: 0 var(--textfield-gutter-x);
+  }
+
+  .Textarea-Fieldset {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    margin: 0;
+    padding: 0;
+    pointer-events: none;
+    border-radius: var(--border-radius-xs);
+    border: var(--textfield-border-width) solid var(--textfield-border-color);
+    transition: border var(--transition-default);
+  }
+
+  .Textarea-Body,
+  .Textarea-Field {
+    transition: background-color var(--transition-slow);
+  }
+
+  .Textarea-Body {
+    position: relative;
+    inline-size: 100%;
+    display: flex;
+    border: none;
+    outline: none;
+    box-sizing: border-box;
+    background-color: var(--textfield-background-color);
+    transition: background-color var(--transition-slow);
+    color: var(--textfield-color);
+    border-radius: var(--border-radius-xs);
+    padding-block-start: 16px;
+    padding-block-end: 16px;
+    min-block-size: inherit;
+    block-size: inherit;
+  }
+
+  .Textarea-Field {
+    --scroll-bar-size: 12px;
+  }
+
+  .Textarea-Field::-webkit-scrollbar {
+    inline-size: var(--scroll-bar-size);
+  }
+
+  .Textarea-Field::-webkit-scrollbar-thumb {
+    background-color: var(--color-background-secondary);
+    border-radius: calc(var(--scroll-bar-size) / 2);
+    border: calc(var(--scroll-bar-size) / 4) solid transparent;
+    background-clip: padding-box;
+    border-image: initial;
+    min-block-size: 24px;
+  }
+
+  .Textarea-Field::-webkit-scrollbar-thumb:hover,
+    .Textarea-Field::-webkit-scrollbar-thumb:active {
+      border: calc(var(--scroll-bar-size) / 4) solid transparent;
+      background-clip: padding-box;
+    }
+
+  .Textarea-Field::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+
+  .Textarea-Field::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+
+  .Textarea-Field::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  .Textarea-Field {
+    border: none;
+    display: flex;
+    outline: none;
+    font: var(--textfield-input-font);
+    background-color: var(--textfield-background-color);
+    color: var(--textfield-color);
+    padding: 0 var(--textfield-gutter-x);
+    inline-size: inherit;
+    resize: none;
+}
+
+  .Textarea-Field::placeholder {
+      opacity: 1;
+      color: var(--color-content-tertiary);
+    }
+
+  .Textarea-Counter {
+    float: right;
+    margin-inline-start: var(--space-l);
+    color: var(--color-content-secondary);
+  }
+
+  .Textarea-Counter_disabled {
+      color: var(--color-content-disabled);
+    }
+
+  .Textarea_expand_autoSize .Textarea-Body {
+        resize: none;
+      }
+
+  .Textarea_expand_verticalResize .Textarea-Body {
+        resize: vertical;
+        overflow: hidden;
+      }
+
+  .Textarea_hasLabel .Textarea-Field::placeholder {
+        opacity: 0;
+      }
+
+  .Textarea_hasLabel .Textarea-Field:focus::placeholder {
+        opacity: 1;
+      }
+
+  .Textarea_hasLabel .Textarea-Body {
+      padding: var(--textfield-input-padding);
+    }
+
+  .Textarea_fullWidth {
+    inline-size: 100%;
+  }
+
+  .Textarea_size_2xs {
+      --textfield-gutter-x: 12px;
+      --textfield-input-block-size: 32px;
+      --textfield-input-font: var(--typography-text-2xs-font);
+      --textfield-input-padding: 8px 0 8px;
+    }
+
+  .Textarea_size_xs {
+      --textfield-gutter-x: 12px;
+      --textfield-input-block-size: 40px;
+      --textfield-input-font: var(--typography-text-xs-font);
+      --textfield-input-padding: 19px 0 4px;
+    }
+
+  .Textarea_size_s {
+      --textfield-gutter-x: 16px;
+      --textfield-input-block-size: 48px;
+      --textfield-input-font: var(--typography-text-s-font);
+      --textfield-input-padding: 21px 0 6px;
+    }
+
+  .Textarea_size_m {
+      --textfield-gutter-x: 20px;
+      --textfield-input-block-size: 56px;
+      --textfield-input-font: var(--typography-text-m-font);
+      --textfield-input-padding: 24px 0 6px;
+    }
+
+  .Textarea_size_l {
+      --textfield-gutter-x: 24px;
+      --textfield-input-block-size: 64px;
+      --textfield-input-font: var(--typography-text-l-font);
+      --textfield-input-padding: 26px 0 6px;
+    }
+
+  .Textarea:hover {
+    --textfield-border-color: var(--color-border-main-hover);
+  }
+
+  .Textarea_focused,
+  .Textarea_focused:hover {
+    --textfield-border-width: var(--border-width-m);
+    --textfield-background-color: var(--color-background-main);
+    --textfield-border-color: var(--color-border-action);
+  }
+
+  .Textarea_error,
+  .Textarea_error.Textarea:hover,
+  .Textarea_error.Textarea_focused,
+  .Textarea_error.Textarea_focused:hover {
+    --textfield-border-color: var(--color-border-error);
+  }
+
+  .Textarea_disabled {
+    --textfield-border-color: var(--color-border-disabled);
+    --textfield-background-color: var(--color-background-disabled);
+    --textfield-color: var(--color-content-secondary);
+    pointer-events: none;
+    cursor: default;
+  }

package/__inner__/cjs/components/Textarea/Textarea.d.ts

@@ -0,0 +1,63 @@
+import './Textarea.css';
+import React from 'react';
+import type { HTMLAttributes, TextareaHTMLAttributes, Ref } from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import { type FieldLabelProps } from '../FieldLabel';
+export declare const cnTextarea: import("@bem-react/classname").ClassNameFormatter;
+export type TextareaSizeVariant = FormElementSizeVariant;
+export declare const textareaExpandVariant: readonly ["autoSize", "verticalResize"];
+export type TextareaExpandVariant = (typeof textareaExpandVariant)[number];
+type TextareaElement = TextareaHTMLAttributes<HTMLTextAreaElement>;
+export type TextareaProps = {
+    /** Атрибут id для элемента input */
+    id?: string;
+    /** Атрибут name для элемента input */
+    name?: string;
+    /** Лейбл */
+    label?: string;
+    /** Размер компонента */
+    size?: TextareaSizeVariant;
+    /** Подсказка. Отображается, когда вариант не выбран */
+    placeholder?: string;
+    /** Если {true} устанавливает автофокус */
+    autoFocus?: boolean;
+    /** Если {true} переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Если {true} растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Дополнительное описание к полю */
+    hint?: string | null | undefined;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    /** Если {true} делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. */
+    maxLength?: number;
+    /** Количество колонок */
+    cols?: number;
+    /** Количество строк */
+    rows?: number;
+    /** Расширяемость поля */
+    expand?: TextareaExpandVariant;
+    /** Выбранное значение */
+    value?: string;
+    /** Значение по умолчанию (неконтролируемый компонент) */
+    defaultValue?: string;
+    /** Обработчик события на изменение значения поля */
+    onChange?: TextareaElement['onChange'];
+    /** Ссылка на элемент textarea */
+    textareaRef?: Ref<HTMLTextAreaElement>;
+    /** Свойства элемента textarea */
+    textareaProps?: TextareaElement & {
+        'data-testid'?: string;
+    };
+    /** Ссылка на FieldLabel */
+    labelRef?: FieldLabelProps['ref'];
+    /** Свойства FieldLabel */
+    labelProps?: FieldLabelProps;
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: Ref<HTMLDivElement>;
+    'data-testid'?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/__inner__/cjs/components/Textarea/Textarea.js

@@ -0,0 +1,78 @@
+"use strict";
+exports.__esModule = true;
+exports.Textarea = exports.textareaExpandVariant = exports.cnTextarea = void 0;
+var tslib_1 = require("tslib");
+require("./Textarea.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useMultiRef_1 = require("../../hooks/useMultiRef");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var FieldHint_1 = require("../FieldHint");
+var FieldLabel_1 = require("../FieldLabel");
+exports.cnTextarea = (0, classname_1.cn)('Textarea');
+exports.textareaExpandVariant = ['autoSize', 'verticalResize'];
+exports.Textarea = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'Textarea'
+    });
+    var _a = props.size, size = _a === void 0 ? 'm' : _a, autoFocus = props.autoFocus, maxLength = props.maxLength, expand = props.expand, placeholder = props.placeholder, id = props.id, name = props.name, error = props.error, fullWidth = props.fullWidth, cols = props.cols, rows = props.rows, className = props.className, label = props.label, hint = props.hint, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, required = props.required, textareaRef = props.textareaRef, disabled = props.disabled, textareaProps = props.textareaProps, labelRef = props.labelRef, labelProps = props.labelProps, other = tslib_1.__rest(props, ["size", "autoFocus", "maxLength", "expand", "placeholder", "id", "name", "error", "fullWidth", "cols", "rows", "className", "label", "hint", "value", "defaultValue", "onChange", "required", "textareaRef", "disabled", "textareaProps", "labelRef", "labelProps"]);
+    var fieldRef = (0, react_1.useRef)(null);
+    var isControlled = typeof valueProp !== 'undefined';
+    var _b = tslib_1.__read((0, react_1.useState)(), 2), focused = _b[0], setFocused = _b[1];
+    var _c = tslib_1.__read((0, react_1.useState)(defaultValue), 2), valueState = _c[0], setValueState = _c[1];
+    var filled = isControlled ? !!valueProp : !!valueState;
+    // autoSize
+    (0, react_1.useEffect)(function () {
+        if (fieldRef.current && expand === 'autoSize') {
+            fieldRef.current.style.blockSize = '0px';
+            var scrollHeight = fieldRef.current.scrollHeight;
+            fieldRef.current.style.blockSize = "".concat(scrollHeight, "px");
+        }
+    }, [valueProp, valueState]);
+    // maxLength
+    var counter = (0, react_1.useMemo)(function () {
+        var _a;
+        var value = valueProp || valueState;
+        return maxLength ? "".concat((_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0, " / ").concat(maxLength) : undefined;
+    }, [maxLength, valueProp, valueState]);
+    var handleFocus = (0, react_1.useCallback)(function (e) {
+        var _a;
+        setFocused(true);
+        (_a = textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(textareaProps, e);
+    }, [textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onFocus]);
+    var handleBlur = (0, react_1.useCallback)(function (e) {
+        var _a;
+        setFocused(false);
+        (_a = textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textareaProps, e);
+    }, [textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onBlur]);
+    var handleChange = (0, react_1.useCallback)(function (e) {
+        if (disabled)
+            return;
+        var value = e.target.value;
+        if (!isControlled || maxLength || expand === 'autoSize') {
+            setValueState(value);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }, [onChange, isControlled, disabled, maxLength, expand]);
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, other, { className: (0, exports.cnTextarea)({
+            size: size,
+            required: required,
+            fullWidth: fullWidth,
+            error: error,
+            disabled: disabled,
+            hasLabel: !!label,
+            expand: expand,
+            focused: focused
+        }, [className]), ref: ref }),
+        react_1["default"].createElement("label", { className: (0, exports.cnTextarea)('Body') },
+            label && (react_1["default"].createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: (0, exports.cnTextarea)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
+            react_1["default"].createElement("textarea", tslib_1.__assign({ id: id, name: name, cols: cols, rows: rows, disabled: disabled, value: valueProp, required: required, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder, autoFocus: autoFocus }, textareaProps, { className: (0, exports.cnTextarea)('Field', { filled: filled }, [
+                    textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.className,
+                ]), onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, ref: (0, useMultiRef_1.useMultiRef)([textareaRef, fieldRef]) })),
+            react_1["default"].createElement("fieldset", { className: (0, exports.cnTextarea)('Fieldset') })),
+        (hint || maxLength) && (react_1["default"].createElement(FieldHint_1.FieldHint, { size: size, error: error, disabled: disabled },
+            hint,
+            maxLength && (react_1["default"].createElement("span", { className: (0, exports.cnTextarea)('Counter', { disabled: disabled }) }, counter))))));
+});
+exports.Textarea.displayName = 'Textarea';

package/__inner__/cjs/components/Textarea/index.d.ts

@@ -0,0 +1 @@
+export * from './Textarea';

package/__inner__/cjs/components/Textarea/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Textarea"), exports);

package/__inner__/cjs/components/ThemeProvider/ThemeProvider.css

@@ -0,0 +1,41 @@
+/* stylelint-disable */
+.Theme {
+  --shadow-outline-focused: var(--color-border-focused) 0 0 0
+    var(--border-width-m);
+  -webkit-font-smoothing: antialiased;
+  color: var(--color-content-primary);
+
+  font: var(--typography-text-m-font);
+
+  letter-spacing: var(--typography-text-m-letter_spacing, 0);
+
+  text-transform: var(--typography-text-m-text_transform, none);
+}
+.Theme * {
+    --scroll-bar-size: 16px;
+  }
+.Theme *::-webkit-scrollbar {
+    inline-size: var(--scroll-bar-size);
+  }
+.Theme *::-webkit-scrollbar-thumb {
+    background-color: var(--color-background-secondary);
+    border-radius: calc(var(--scroll-bar-size) / 2);
+    border: calc(var(--scroll-bar-size) / 4) solid transparent;
+    background-clip: padding-box;
+    border-image: initial;
+    min-block-size: 24px;
+  }
+.Theme *::-webkit-scrollbar-thumb:hover,
+    .Theme *::-webkit-scrollbar-thumb:active {
+      border: calc(var(--scroll-bar-size) / 4) solid transparent;
+      background-clip: padding-box;
+    }
+.Theme *::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+.Theme *::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+.Theme *::-webkit-scrollbar-corner {
+    background: transparent;
+  }

package/__inner__/cjs/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,14 @@
+import './ThemeProvider.css';
+import React, { ElementType } from 'react';
+import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { Theme } from './types';
+export declare const THEME_DEFAULT_TAG = "div";
+export type ThemeProviderBaseProps = {
+    /** Содержимое компонента */
+    children: React.ReactNode;
+    /** Тема */
+    theme?: Theme;
+};
+export declare const cnThemeProvider: import("@bem-react/classname").ClassNameFormatter;
+export type ThemeProviderProps<As extends ElementType = typeof THEME_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ThemeProviderBaseProps, As>;
+export declare const ThemeProvider: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ThemeProviderBaseProps, "div">;

package/__inner__/cjs/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,17 @@
+"use strict";
+exports.__esModule = true;
+exports.ThemeProvider = exports.cnThemeProvider = exports.THEME_DEFAULT_TAG = void 0;
+var tslib_1 = require("tslib");
+require("./ThemeProvider.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var ThemeProviderContext_1 = require("./ThemeProviderContext");
+exports.THEME_DEFAULT_TAG = 'div';
+exports.cnThemeProvider = (0, classname_1.cn)('Theme');
+exports.ThemeProvider = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (_a, ref) {
+    var children = _a.children, theme = _a.theme, className = _a.className, _b = _a.as, Tag = _b === void 0 ? exports.THEME_DEFAULT_TAG : _b, other = tslib_1.__rest(_a, ["children", "theme", "className", "as"]);
+    return (react_1["default"].createElement(ThemeProviderContext_1.ThemeProviderContext.Provider, { value: theme },
+        react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnThemeProvider)(theme === null || theme === void 0 ? void 0 : theme.tokens, [className]) }, other, { ref: ref }), children)));
+});
+exports.ThemeProvider.displayName = 'ThemeProvider';

package/__inner__/cjs/components/ThemeProvider/ThemeProviderContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { Theme } from './types';
+export declare const ThemeProviderContext: import("react").Context<Theme | undefined>;
+export declare function useTheme(): Theme | undefined;

package/__inner__/cjs/components/ThemeProvider/ThemeProviderContext.js

@@ -0,0 +1,9 @@
+"use strict";
+exports.__esModule = true;
+exports.useTheme = exports.ThemeProviderContext = void 0;
+var react_1 = require("react");
+exports.ThemeProviderContext = (0, react_1.createContext)(undefined);
+function useTheme() {
+    return (0, react_1.useContext)(exports.ThemeProviderContext);
+}
+exports.useTheme = useTheme;

package/__inner__/cjs/components/ThemeProvider/_borderRadius/Theme_borderRadius_ozenDefault.css

@@ -0,0 +1,8 @@
+.Theme_borderRadius_ozenDefault {
+  --border-radius-l: 12px;
+  --border-radius-xl: 16px;
+  --border-radius-m: 8px;
+  --border-radius-s: 6px;
+  --border-radius-xs: 4px;
+  --border-radius-2xs: 2px;
+}

package/__inner__/cjs/components/ThemeProvider/_borderWidth/Theme_borderWidth_ozenDefault.css

@@ -0,0 +1,4 @@
+.Theme_borderWidth_ozenDefault {
+  --border-width-s: 1px;
+  --border-width-m: 2px;
+}

package/__inner__/cjs/components/ThemeProvider/_breakpoint/Theme_breakpoint_ozenDefault.css

@@ -0,0 +1,6 @@
+.Theme_breakpoint_ozenDefault {
+  --breakpoint-xs: 0;
+  --breakpoint-s: 640px;
+  --breakpoint-m: 1024px;
+  --breakpoint-l: 1280px;
+}

package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDark.css

@@ -0,0 +1,125 @@
+.Theme_color_ozenDark {
+  --color-content-secondary: #949494;
+  --color-content-primary: #F5F5F5;
+  --color-content-tertiary: #707070;
+  --color-content-disabled: #363636;
+  --color-content-ghost-disabled: rgb(255 255 255 / 47%);
+  --color-content-action: #43B741;
+  --color-content-action-hover: #379535;
+  --color-content-action-pressed: #2A7329;
+  --color-content-action-dark: #A5DDA5;
+  --color-content-action-on: #FFF;
+  --color-content-error: #F62114;
+  --color-content-error-hover: #CD1B10;
+  --color-content-error-pressed: #A4150D;
+  --color-content-error-dark: #FB9B96;
+  --color-content-warning: #F0520E;
+  --color-content-warning-hover: #C2420B;
+  --color-content-warning-pressed: #943209;
+  --color-content-warning-dark: #F8B598;
+  --color-content-success: #43B741;
+  --color-content-success-hover: #379535;
+  --color-content-success-pressed: #2A7329;
+  --color-content-success-dark: #A5DDA5;
+  --color-content-info: #8E4DE1;
+  --color-content-info-hover: #7424DA;
+  --color-content-info-pressed: #5E1DB1;
+  --color-content-info-dark: #C29FEF;
+  --color-content-primary-inverse: #080808;
+  --color-background-main: #212121;
+  --color-background-main-inverse: #F5F5F5;
+  --color-background-main-hover: #2C2C2C;
+  --color-background-main-pressed: #383838;
+  --color-background-primary: #121212;
+  --color-background-primary-hover: #222;
+  --color-background-primary-pressed: #353535;
+  --color-background-secondary: #2C2C2C;
+  --color-background-secondary-hover: #383838;
+  --color-background-secondary-pressed: #363636;
+  --color-background-tertiary: #383838;
+  --color-background-tertiary-hover: #363636;
+  --color-background-tertiary-pressed: #4E4E4E;
+  --color-background-disabled: #353535;
+  --color-background-action: #43B741;
+  --color-background-action-hover: #379535;
+  --color-background-action-pressed: #2A7329;
+  --color-background-action-active-disabled: #184117;
+  --color-background-action-light: #113011;
+  --color-background-action-light-hover: #1E521D;
+  --color-background-action-light-pressed: #184117;
+  --color-background-error: #F62114;
+  --color-background-error-hover: #CD1B10;
+  --color-background-error-pressed: #A4150D;
+  --color-background-error-light: #510A06;
+  --color-background-error-light-hover: #7A1009;
+  --color-background-error-light-pressed: #660D07;
+  --color-background-warning: #F0520E;
+  --color-background-warning-hover: #C2420B;
+  --color-background-warning-pressed: #943209;
+  --color-background-warning-light: #371304;
+  --color-background-warning-light-hover: #652306;
+  --color-background-warning-light-pressed: #4E1B05;
+  --color-background-success: #43B741;
+  --color-background-success-hover: #379535;
+  --color-background-success-pressed: #2A7329;
+  --color-background-success-light: #113011;
+  --color-background-success-light-hover: #1E521D;
+  --color-background-success-light-pressed: #184117;
+  --color-background-info: #7424DA;
+  --color-background-info-hover: #5E1DB1;
+  --color-background-info-pressed: #481688;
+  --color-background-info-light: #1D0935;
+  --color-background-info-light-hover: #33105E;
+  --color-background-info-light-pressed: #280C4A;
+  --color-background-overlay: rgb(0 0 0 / 55%);
+  --color-background-ghost: rgb(255 255 255 / 12%);
+  --color-background-ghost-hover: rgb(255 255 255 / 24%);
+  --color-background-ghost-pressed: rgb(255 255 255 / 32%);
+  --color-background-ghost-disabled: rgb(255 255 255 / 47%);
+  --color-border-main: #363636;
+  --color-border-main-hover: #707070;
+  --color-border-main-pressed: #949494;
+  --color-border-secondary: #383838;
+  --color-border-secondary-hover: #363636;
+  --color-border-secondary-pressed: #4E4E4E;
+  --color-border-disabled: #2C2C2C;
+  --color-border-ghost-disabled: rgb(255 255 255 / 47%);
+  --color-border-focused: #184117;
+  --color-border-action: #43B741;
+  --color-border-action-hover: #379535;
+  --color-border-action-pressed: #2A7329;
+  --color-border-error: #F62114;
+  --color-border-warning: #F0520E;
+  --color-border-success: #43B741;
+  --color-border-info: #8E4DE1;
+  --color-border-main-on: #FFF;
+  --color-additional-a1: #0B6ABE;
+  --color-additional-a2: #1899E9;
+  --color-additional-a3: #B3F1FF;
+  --color-additional-b1: #B5215F;
+  --color-additional-b2: #E62D73;
+  --color-additional-b3: #FFB5CD;
+  --color-additional-c1: #E64920;
+  --color-additional-c2: #F46C1B;
+  --color-additional-c3: #FFE2A8;
+  --color-additional-d1: #FF8E00;
+  --color-additional-d2: #FFC100;
+  --color-additional-d3: #FFF9A2;
+  --color-additional-e1: #771DB4;
+  --color-additional-e2: #A02BE5;
+  --color-additional-e3: #E9B7FE;
+  --color-additional-f1: #107C60;
+  --color-additional-f2: #17AE87;
+  --color-additional-f3: #ABEADA;
+  --color-additional-g1: #B88F27;
+  --color-additional-g2: #E0B548;
+  --color-additional-g3: #F4D37D;
+  --color-additional-h1: #747E89;
+  --color-additional-h2: #BDC4CB;
+  --color-additional-h3: #E1E4E7;
+  --color-gradient-gr1: linear-gradient(180deg, #6ED88F 0%, #4796B6 100%);
+  --color-gradient-gr2: linear-gradient(180deg, #FC6883 0%, #6781DD 100%);
+  --color-gradient-gr3: linear-gradient(180deg, #CACFD6 0%, #7B858D 100%);
+  --color-gradient-gr4: linear-gradient(180deg, #E0BD62 0%, #9F8757 100%);
+  --color-gradient-gr5: linear-gradient(180deg, #767CFF 0%, #8C50E9 100%);
+}