@modul/mbui 0.0.11 → 0.0.12-beta-pv-53036-f7dccc0b

package/dist/Info/Info.js

@@ -6,7 +6,7 @@ const React = (0, tslib_1.__importStar)(require("react"));
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../@/lib/utils");
 // import { cn } from "@/lib/utils" порешать с алиасами
-const infoVariants = (0, class_variance_authority_1.cva)('px-[16px] py-[12px] rounded-1 text-[14px]', {
+const infoVariants = (0, class_variance_authority_1.cva)('px-[16px] py-[12px] rounded-sm text-[14px]', {
     variants: {
         variant: {
             light: 'bg-[--cl-graphite-7]',

package/dist/Info/Info.js.map

@@ -1 +1 @@
-{"version":3,"file":"Info.js","sourceRoot":"","sources":["../../src/Info/Info.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,uEAAiE;AAEjE,0CAAmC;AACnC,uDAAuD;AAEvD,MAAM,YAAY,GAAG,IAAA,8BAAG,EAAC,2CAA2C,EAAE;IACrE,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,KAAK,EAAE,sBAAsB;YAC7B,OAAO,EAAE,kBAAkB;YAC3B,OAAO,EAAE,kBAAkB;YAC3B,QAAQ,EAAE,wBAAwB;SAClC;KACD;IACD,eAAe,EAAE;QAChB,OAAO,EAAE,OAAO;KAChB;CACD,CAAC,CAAA;AAMF,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAyB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzG,OAAO,CACN,6BACC,SAAS,EAAE,IAAA,UAAE,EAAC,YAAY,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KAC/C,KAAK,IAER,QAAQ,CACJ,CACN,CAAA;AACF,CAAC,CAAC,CAAA;AAIO,oBAAI;AAFb,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA"}
+{"version":3,"file":"Info.js","sourceRoot":"","sources":["../../src/Info/Info.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,uEAAiE;AAEjE,0CAAmC;AACnC,uDAAuD;AAEvD,MAAM,YAAY,GAAG,IAAA,8BAAG,EAAC,4CAA4C,EAAE;IACtE,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,KAAK,EAAE,sBAAsB;YAC7B,OAAO,EAAE,kBAAkB;YAC3B,OAAO,EAAE,kBAAkB;YAC3B,QAAQ,EAAE,wBAAwB;SAClC;KACD;IACD,eAAe,EAAE;QAChB,OAAO,EAAE,OAAO;KAChB;CACD,CAAC,CAAA;AAMF,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAyB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzG,OAAO,CACN,6BACC,SAAS,EAAE,IAAA,UAAE,EAAC,YAAY,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KAC/C,KAAK,IAER,QAAQ,CACJ,CACN,CAAA;AACF,CAAC,CAAC,CAAA;AAIO,oBAAI;AAFb,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA"}

package/dist/Input/Input.js

@@ -10,7 +10,7 @@ const InputLabel = React.forwardRef(({ className, children, ...props }) => {
 exports.InputLabel = InputLabel;
 InputLabel.displayName = 'InputLabel';
 const InputField = React.forwardRef(({ className, type, ...props }, ref) => {
-    return (React.createElement("input", { type: type, className: (0, utils_1.cn)('border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-1 focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed', className), ref: ref, ...props }));
+    return (React.createElement("input", { type: type, className: (0, utils_1.cn)('border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-sm focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed', className), ref: ref, ...props }));
 });
 exports.InputField = InputField;
 InputField.displayName = 'InputField';

package/dist/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,0CAAmC;AAEnC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrC,OAAO,CACN,+BACC,SAAS,EAAE,IAAA,UAAE,EAAC,0GAA0G,EAAE,SAAS,CAAC,KAChI,KAAK,IAER,QAAQ,CACF,CACR,CAAA;AACF,CAAC,CACD,CAAA;AAoBoB,gCAAU;AAlB/B,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAgE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzI,OAAO,CACN,+BACC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,UAAE,EACZ,qUAAqU,EACrU,SAAS,CACT,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAA;AACF,CAAC,CAAC,CAAA;AAIO,gCAAU;AAFnB,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,0CAAmC;AAEnC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrC,OAAO,CACN,+BACC,SAAS,EAAE,IAAA,UAAE,EAAC,0GAA0G,EAAE,SAAS,CAAC,KAChI,KAAK,IAER,QAAQ,CACF,CACR,CAAA;AACF,CAAC,CACD,CAAA;AAoBoB,gCAAU;AAlB/B,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAgE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzI,OAAO,CACN,+BACC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,UAAE,EACZ,sUAAsU,EACtU,SAAS,CACT,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAA;AACF,CAAC,CAAC,CAAA;AAIO,gCAAU;AAFnB,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.11",
+  "version": "0.0.12-beta-pv-53036-f7dccc0b",
   "packageManager": "yarn@3.5.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -39,6 +39,7 @@
     "lodash": "4.17.5",
     "react-datepicker": "4.16.0",
     "react-imask": "7.1.3",
+    "react-select": "5.8.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",

package/src/@/config/index.ts

@@ -43,6 +43,7 @@ export default {
 			},
 			backgroundColor: {
 				page: 'var(--page-bg)',
+				light: 'var(--bg-light)',
 				...button.backgroundColor,
 				...label.backgroundColor
 			},
@@ -57,7 +58,8 @@ export default {
 				...button.borderColor
 			},
 			borderRadius: {
-				'1': 'var(--border-radius-1)',
+				'sm': 'var(--border-radius-sm)',
+				'md': 'var(--border-radius-md)',
 			},
 			keyframes: {
 				'accordion-down': {

package/src/Info/Info.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../@/lib/utils'
 // import { cn } from "@/lib/utils" порешать с алиасами
 
-const infoVariants = cva('px-[16px] py-[12px] rounded-1 text-[14px]', {
+const infoVariants = cva('px-[16px] py-[12px] rounded-sm text-[14px]', {
 	variants: {
 		variant: {
 			light: 'bg-[--cl-graphite-7]',

package/src/Input/Input.tsx

@@ -21,7 +21,7 @@ const InputField = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<
 		<input
 			type={type}
 			className={cn(
-				'border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-1 focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed',
+				'border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-sm focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed',
 				className
 			)}
 			ref={ref}

package/src/Select/SelectAccountCard.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react'
+
+import { DropdownSmallOld, CheckSmall } from '../Icon'
+
+import Select, {
+	components,
+	ControlProps,
+	OptionProps,
+	DropdownIndicatorProps,
+	StylesConfig,
+	SingleValueProps,
+	MenuProps,
+	ValueContainerProps,
+} from 'react-select'
+
+import { cn } from '../@/lib/utils'
+
+const selectTriggerClasses: string =
+	'flex items-center bg-gradient-to-r from-[--cl-blue-3] to-primary shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)] px-[16px] py-[8px] border-none rounded-md min-h-[80px] text-left text-white'
+
+const colourStyles: StylesConfig = {
+	control: () => ({}),
+	option: () => ({}),
+	input: () => ({}),
+	dropdownIndicator: () => ({}),
+	indicatorsContainer: () => ({}),
+	menu: () => ({}),
+	menuList: () => ({}),
+	singleValue: () => ({}),
+	valueContainer: () => ({}),
+}
+
+const Control = ({ children, ...props }: ControlProps) => {
+	const style = { cursor: 'pointer' }
+	return (
+		<components.Control
+			className={selectTriggerClasses}
+			{...props}
+		>
+			{children}
+		</components.Control>
+	)
+}
+
+const optionClasses =
+	'flex items-center first:rounded-t-md last:rounded-b-md px-[12px] py-[16px] w-full cursor-default select-none outline-none'
+
+const Option = ({ children, ...props }: OptionProps) => {
+	console.log({ ...props })
+	const {
+		isSelected,
+		isFocused,
+		isDisabled,
+		data : { label, account, balance, cur },
+	} = props
+	const style = { cursor: 'pointer' }
+	return (
+		<components.Option
+			className={cn(
+				optionClasses,
+				{ 'bg-light': isFocused },
+				{ 'opacity-50 pointer-events-none': isDisabled }
+			)}
+			{...props}
+		>
+			<span className="flex basis-0 grow">
+				<span>
+					<span>{label}</span><br/>
+					<span className='text-[14px] text-light'>{account}</span>
+				</span>
+				<span  className='ml-auto shrink-0'>
+					{balance}&nbsp;{cur}
+				</span>
+			</span>
+
+			<span className='ml-[16px] w-[24px] h-[24px] shrink-0'>
+				{isSelected && (
+					<CheckSmall
+						width="24"
+						height="24"
+						className="text-primary"
+					/>
+				)}
+			</span>
+
+		</components.Option>
+	)
+}
+
+const DropdownIndicator = ({ children, ...props }: DropdownIndicatorProps) => {
+	return (
+		<components.DropdownIndicator
+			className="shrink-0"
+			{...props}
+		>
+			<DropdownSmallOld
+				className="text-white"
+				width="16"
+				height="16"
+			/>
+		</components.DropdownIndicator>
+	)
+}
+
+const ValueContainer = ({ children, ...props }: ValueContainerProps) => {
+	return (
+		<components.ValueContainer
+			className="flex-1 grid"
+			{...props}
+		>
+			{children}
+		</components.ValueContainer>
+	)
+}
+
+const SingleValue = ({ children, ...props }: SingleValueProps) => {
+	// @ts-ignore
+	const { label, account, balance, cur } = props.data
+	return (
+		<components.SingleValue className='col-start-1 col-end-3 row-start-1 row-end-2' {...props}>
+			<span className="block max-w-full text-[16px] truncate leading-[1.5]">
+				{label} <span className="opacity-75 text-[14px] leading-[1.42]">{account}</span>
+			</span>
+			<span className="block mt-[8px] font-medium text-[24px] leading-[1.333]">
+				{balance} {cur}
+			</span>
+		</components.SingleValue>
+	)
+}
+
+const Menu = ({ children, ...props }: MenuProps) => {
+	return (
+		<components.Menu
+			className="bg-page drop-shadow-1 mt-[8px] rounded-md"
+			{...props}
+		>
+			{children}
+		</components.Menu>
+	)
+}
+
+const SelectAccountCard = React.forwardRef<Select, { className: string | undefined }>(({ className, ...props }, ref) => (
+	<Select
+		className={cn(className)}
+		classNamePrefix="super"
+		isDisabled={false}
+		isSearchable={false}
+		components={{
+			Control,
+			Option,
+			SingleValue,
+			DropdownIndicator,
+			IndicatorSeparator: () => null,
+			Menu,
+			ValueContainer,
+		}}
+		styles={colourStyles}
+		unstyled={true}
+		{...props}
+	/>
+))
+
+export { SelectAccountCard }

package/src/Select/index.ts

@@ -0,0 +1 @@
+export { SelectAccountCard } from './SelectAccountCard'

package/src/assets/css/global.css

@@ -3,153 +3,166 @@
 @tailwind utilities;
 
 @layer base {
-
-    @font-face {
-        font-weight: 100 900;
-        font-family: "Roboto";
-        font-style: normal;
-        font-stretch: 75% 100%;
-        src: url("../fonts/Roboto.woff2") format("woff2");
-        font-display: swap;
-    }
+	@font-face {
+		font-weight: 100 900;
+		font-family: 'Roboto';
+		font-style: normal;
+		font-stretch: 75% 100%;
+		src: url('../fonts/Roboto.woff2') format('woff2');
+		font-display: swap;
+	}
+
+	@font-face {
+		font-weight: 100 900;
+		font-family: 'Roboto';
+		font-style: italic;
+		font-stretch: 75% 100%;
+		src: url('../fonts/Roboto-Italic.woff2') format('woff2');
+		font-display: swap;
+	}
+
+	body {
+		min-height: 100vh;
+		/* mobile viewport bug fix */
+        @supports (-webkit-touch-callout: none) {
+		    min-height: -webkit-fill-available;
+        }
+	}
     
-    @font-face {
-        font-weight: 100 900;
-        font-family: "Roboto";
-        font-style: italic;
-        font-stretch: 75% 100%;
-        src: url("../fonts/Roboto-Italic.woff2") format("woff2");
-        font-display: swap;
-    }
-
-    :root {
-        font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-
-        --cl-white: #ffffff;
-        --cl-dark: #000000;
-
-        /* Синий */
-        --cl-blue-1: #253c77;
-        --cl-blue-2: #4971d0;
-        --cl-blue-3: #6b91eb;
-        --cl-blue-4: #81a5f9;
-        --cl-blue-5: #a7c0fb;
-        --cl-blue-6: #d2ddfa;
-        --cl-blue-7: #f2f6ff;
-
-        /* Серый */
-        --cl-graphite-1: #222733;
-        --cl-graphite-2: #464c59;
-        --cl-graphite-3: #777c87;
-        --cl-graphite-4: #9b9fa8;
-        --cl-graphite-5: #cbcdd1;
-        --cl-graphite-6: #e6e7e9;
-        --cl-graphite-7: #f5f5f6;
-
-        /* Зеленый */
-        --cl-green-1: #5e8c00;
-        --cl-green-2: #6ca300;
-        --cl-green-3: #88bd1f;
-        --cl-green-4: #a4d73e;
-        --cl-green-5: #c0eb69;
-        --cl-green-6: #d4f296;
-        --cl-green-7: #eefad4;
-
-        /* Желтый */
-        --cl-yellow-1: #b79310;
-        --cl-yellow-2: #d2aa0f;
-        --cl-yellow-3: #e8c113;
-        --cl-yellow-4: #efd04e;
-        --cl-yellow-5: #f5de88;
-        --cl-yellow-6: #fae6aa;
-        --cl-yellow-7: #fcf2ce;
-
-        /* Красный */
-        --cl-red-1: #a61d1d;
-        --cl-red-2: #bd2c2c;
-        --cl-red-3: #d43d3d;
-        --cl-red-4: #e36868;
-        --cl-red-5: #f19494;
-        --cl-red-6: #f9c1bd;
-        --cl-red-7: #ffe9e9;
-
-        --text-base: var(--cl-graphite-1);
-        --primary: var(--cl-blue-2);
-        --primary-light: var(--cl-blue-7);
-        --success: var(--cl-green-3);
-        --success-light: var(--cl-green-7);
-        --light: var(--cl-graphite-3);
-        --dark: var(--cl-graphite-2);
-        --disabled: var(--cl-graphite-4);
-        --warning: var(--cl-yellow-2);
-        --warning-light: var(--cl-yellow-7);
-        --critical: var(--cl-red-4);
-        --critical-light: var(--cl-red-7);
-        /* --text-quaternary:; */
-
-        --page-bg: var(--cl-white);
-
-        /* ЦВЕТ КНОПОК */
-        /* =========================================== */
-        --btn-primary: var(--cl-white);
-        --btn-primary-bg: var(--cl-blue-2);
-        --btn-primary-hover-bg: var(--cl-blue-3);
-        --btn-primary-focus-bg: var(--cl-blue-1);
-        --btn-primary-active-bg: var(--cl-blue-1);
-        
-        --btn-success: var(--cl-white);
-        --btn-success-bg: var(--cl-green-3);
-        --btn-success-hover-bg: var(--cl-green-4);
-        --btn-success-focus-bg: var(--cl-green-1);
-        --btn-success-active-bg: var(--cl-green-1);
-
-        --btn-secondary: var(--cl-graphite-2);
-        --btn-secondary-bg: #EDEEEF;
-        --btn-secondary-hover-bg: #E4E5E7;
-        --btn-secondary-focus-bg: #E4E5E7;
-        --btn-secondary-active-bg: #DCDCDE;
-
-        --btn-ghost: var(--cl-graphite-2);
-        --btn-ghost-bg: var(--cl-white);
-        --btn-ghost-hover-bg: #F6F6F7;
-        --btn-ghost-focus-bg: #F6F6F7;
-        --btn-ghost-active-bg: #EDEEEF;
-        --btn-primary-outline: var(--cl-blue-2);
-        --btn-primary-outline-bg: var(--cl-white);
-        --btn-primary-outline-hover-bg: var(--cl-blue-3);
-        --btn-primary-outline-focus-bg: var(--cl-blue-3);
-        --btn-primary-outline-active-bg: var(--cl-blue-1);
-
-        --btn-txt-primary: var(--cl-blue-2);
-        --btn-txt-primary-hover: var(--cl-blue-3);
-        --btn-txt-primary-focus: var(--cl-blue-3);
-        --btn-txt-primary-active: var(--cl-blue-1);
-        /* =========================================== */
-        /* ЦВЕТ КНОПОК */
-        
-        
-        /* ЦВЕТ ПОЛЯ ВВОДА */
-        /* =========================================== */
-        
-        /* =========================================== */
-        /* ЦВЕТ ПОЛЯ ВВОДА */
-        
-        
-        /* BORDER */
-        /* =========================================== */
-        --border-color: var(--cl-graphite-5);
-        --border-radius-1: 8px;
-        /* =========================================== */
-        /* BORDER */
-        
-        /* SHADOWS */
-        /* =========================================== */
-        --shadow-1: 0px 4px 16px rgba(36, 48, 54, 0.08);
-        --shadow-2: 0 2px 10px rgba(36, 48, 54, 0.12);
-        /* =========================================== */
-        /* SHADOWS */
-    }
-
-
-    .dark {}
-}
+	html {
+        @supports (-webkit-touch-callout: none) {
+            min-height: -webkit-fill-available;
+        }
+	}
+	:root {
+		font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans',
+			sans-serif;
+
+		--cl-white: #ffffff;
+		--cl-dark: #000000;
+
+		/* Синий */
+		--cl-blue-1: #253c77;
+		--cl-blue-2: #4971d0;
+		--cl-blue-3: #6b91eb;
+		--cl-blue-4: #81a5f9;
+		--cl-blue-5: #a7c0fb;
+		--cl-blue-6: #d2ddfa;
+		--cl-blue-7: #f2f6ff;
+
+		/* Серый */
+		--cl-graphite-1: #222733;
+		--cl-graphite-2: #464c59;
+		--cl-graphite-3: #777c87;
+		--cl-graphite-4: #9b9fa8;
+		--cl-graphite-5: #cbcdd1;
+		--cl-graphite-6: #e6e7e9;
+		--cl-graphite-7: #f5f5f6;
+
+		/* Зеленый */
+		--cl-green-1: #5e8c00;
+		--cl-green-2: #6ca300;
+		--cl-green-3: #88bd1f;
+		--cl-green-4: #a4d73e;
+		--cl-green-5: #c0eb69;
+		--cl-green-6: #d4f296;
+		--cl-green-7: #eefad4;
+
+		/* Желтый */
+		--cl-yellow-1: #b79310;
+		--cl-yellow-2: #d2aa0f;
+		--cl-yellow-3: #e8c113;
+		--cl-yellow-4: #efd04e;
+		--cl-yellow-5: #f5de88;
+		--cl-yellow-6: #fae6aa;
+		--cl-yellow-7: #fcf2ce;
+
+		/* Красный */
+		--cl-red-1: #a61d1d;
+		--cl-red-2: #bd2c2c;
+		--cl-red-3: #d43d3d;
+		--cl-red-4: #e36868;
+		--cl-red-5: #f19494;
+		--cl-red-6: #f9c1bd;
+		--cl-red-7: #ffe9e9;
+
+		--base: var(--cl-graphite-1);
+		--primary: var(--cl-blue-2);
+		--primary-light: var(--cl-blue-7);
+		--success: var(--cl-green-3);
+		--success-light: var(--cl-green-7);
+		--light: var(--cl-graphite-3);
+		--dark: var(--cl-graphite-2);
+		--disabled: var(--cl-graphite-4);
+		--bg-light: var(--cl-graphite-7);
+		--warning: var(--cl-yellow-2);
+		--warning-light: var(--cl-yellow-7);
+		--critical: var(--cl-red-4);
+		--critical-light: var(--cl-red-7);
+		/* --text-quaternary:; */
+
+		--page-bg: var(--cl-white);
+
+		/* ЦВЕТ КНОПОК */
+		/* =========================================== */
+		--btn-primary: var(--cl-white);
+		--btn-primary-bg: var(--cl-blue-2);
+		--btn-primary-hover-bg: var(--cl-blue-3);
+		--btn-primary-focus-bg: var(--cl-blue-1);
+		--btn-primary-active-bg: var(--cl-blue-1);
+
+		--btn-success: var(--cl-white);
+		--btn-success-bg: var(--cl-green-3);
+		--btn-success-hover-bg: var(--cl-green-4);
+		--btn-success-focus-bg: var(--cl-green-1);
+		--btn-success-active-bg: var(--cl-green-1);
+
+		--btn-secondary: var(--cl-graphite-2);
+		--btn-secondary-bg: #edeeef;
+		--btn-secondary-hover-bg: #e4e5e7;
+		--btn-secondary-focus-bg: #e4e5e7;
+		--btn-secondary-active-bg: #dcdcde;
+
+		--btn-ghost: var(--cl-graphite-2);
+		--btn-ghost-bg: var(--cl-white);
+		--btn-ghost-hover-bg: #f6f6f7;
+		--btn-ghost-focus-bg: #f6f6f7;
+		--btn-ghost-active-bg: #edeeef;
+		--btn-primary-outline: var(--cl-blue-2);
+		--btn-primary-outline-bg: var(--cl-white);
+		--btn-primary-outline-hover-bg: var(--cl-blue-3);
+		--btn-primary-outline-focus-bg: var(--cl-blue-3);
+		--btn-primary-outline-active-bg: var(--cl-blue-1);
+
+		--btn-txt-primary: var(--cl-blue-2);
+		--btn-txt-primary-hover: var(--cl-blue-3);
+		--btn-txt-primary-focus: var(--cl-blue-3);
+		--btn-txt-primary-active: var(--cl-blue-1);
+		/* =========================================== */
+		/* ЦВЕТ КНОПОК */
+
+		/* ЦВЕТ ПОЛЯ ВВОДА */
+		/* =========================================== */
+
+		/* =========================================== */
+		/* ЦВЕТ ПОЛЯ ВВОДА */
+
+		/* BORDER */
+		/* =========================================== */
+		--border-color: var(--cl-graphite-5);
+		--border-radius-sm: 4px;
+		--border-radius-md: 8px;
+		/* =========================================== */
+		/* BORDER */
+
+		/* SHADOWS */
+		/* =========================================== */
+		--shadow-1: 0px 4px 16px rgba(36, 48, 54, 0.08);
+		--shadow-2: 0 2px 10px rgba(36, 48, 54, 0.12);
+		/* =========================================== */
+		/* SHADOWS */
+	}
+
+	.dark {
+	}
+}