@uzum-tech/ui 0.1.2 → 1.0.0

package/es/_internal/selection/styles/light.d.ts

@@ -1,14 +1,40 @@
 import type { ThemeCommonVars } from '../../../_styles/common';
-declare const self: (vars: ThemeCommonVars) => {
+export declare const self: (vars: ThemeCommonVars) => {
+    paddingTiny: string;
+    paddingSmall: string;
+    paddingMedium: string;
+    paddingLarge: string;
+    paddingHuge: string;
+    clearSizeTiny: string;
+    clearSizeSmall: string;
+    clearSizeMedium: string;
+    clearSizeLarge: string;
+    clearSizeHuge: string;
+    arrowSizeTiny: string;
+    arrowSizeSmall: string;
+    arrowSizeMedium: string;
+    arrowSizeLarge: string;
+    arrowSizeHuge: string;
     fontSizeTiny: string;
     fontSizeSmall: string;
     fontSizeMedium: string;
     fontSizeLarge: string;
+    fontSizeHuge: string;
+    lineHeightTiny: string;
+    lineHeightSmall: string;
+    lineHeightMedium: string;
+    lineHeightLarge: string;
+    lineHeightHuge: string;
     heightTiny: string;
     heightSmall: string;
     heightMedium: string;
     heightLarge: string;
-    borderRadius: string;
+    heightHuge: string;
+    borderRadiusTiny: string;
+    borderRadiusSmall: string;
+    borderRadiusMedium: string;
+    borderRadiusLarge: string;
+    borderRadiusHuge: string;
     textColor: string;
     textColorDisabled: string;
     placeholderColor: string;
@@ -50,22 +76,74 @@ declare const self: (vars: ThemeCommonVars) => {
     clearColor: string;
     clearColorHover: string;
     clearColorPressed: string;
-    paddingSingle: string;
-    paddingMultiple: string;
-    clearSize: string;
-    arrowSize: string;
+    caretColorSecondary: string;
+    filterCounterTextColor: string;
+    filterCounterSeparatorColor: string;
+    filterCounterTextColorDisabled: string;
+    filterCounterSeparatorColorDisabled: string;
+    arrowColorSecondary: string;
+    clearColorSecondary: string;
+    colorSecondary: string;
+    textColorSecondary: string;
+    borderSecondary: string;
+    arrowColorDisabledSecondary: string;
+    clearColorDisabledSecondary: string;
+    colorDisabledSecondary: string;
+    textColorDisabledSecondary: string;
+    borderDisabledSecondary: string;
+    arrowColorHoverSecondary: string;
+    clearColorHoverSecondary: string;
+    colorHoverSecondary: string;
+    textColorHoverSecondary: string;
+    borderHoverSecondary: string;
+    arrowColorFocusSecondary: string;
+    clearColorFocusSecondary: string;
+    colorFocusSecondary: string;
+    textColorFocusSecondary: string;
+    borderFocusSecondary: string;
+    arrowColorActiveSecondary: string;
+    clearColorActiveSecondary: string;
+    colorActiveSecondary: string;
+    textColorActiveSecondary: string;
+    borderActiveSecondary: string;
 };
 export type InternalSelectionThemeVars = ReturnType<typeof self>;
 declare const internalSelectionLight: import("../../../_mixins").Theme<"InternalSelection", {
+    paddingTiny: string;
+    paddingSmall: string;
+    paddingMedium: string;
+    paddingLarge: string;
+    paddingHuge: string;
+    clearSizeTiny: string;
+    clearSizeSmall: string;
+    clearSizeMedium: string;
+    clearSizeLarge: string;
+    clearSizeHuge: string;
+    arrowSizeTiny: string;
+    arrowSizeSmall: string;
+    arrowSizeMedium: string;
+    arrowSizeLarge: string;
+    arrowSizeHuge: string;
     fontSizeTiny: string;
     fontSizeSmall: string;
     fontSizeMedium: string;
     fontSizeLarge: string;
+    fontSizeHuge: string;
+    lineHeightTiny: string;
+    lineHeightSmall: string;
+    lineHeightMedium: string;
+    lineHeightLarge: string;
+    lineHeightHuge: string;
     heightTiny: string;
     heightSmall: string;
     heightMedium: string;
     heightLarge: string;
-    borderRadius: string;
+    heightHuge: string;
+    borderRadiusTiny: string;
+    borderRadiusSmall: string;
+    borderRadiusMedium: string;
+    borderRadiusLarge: string;
+    borderRadiusHuge: string;
     textColor: string;
     textColorDisabled: string;
     placeholderColor: string;
@@ -107,24 +185,50 @@ declare const internalSelectionLight: import("../../../_mixins").Theme<"Internal
     clearColor: string;
     clearColorHover: string;
     clearColorPressed: string;
-    paddingSingle: string;
-    paddingMultiple: string;
-    clearSize: string;
-    arrowSize: string;
+    caretColorSecondary: string;
+    filterCounterTextColor: string;
+    filterCounterSeparatorColor: string;
+    filterCounterTextColorDisabled: string;
+    filterCounterSeparatorColorDisabled: string;
+    arrowColorSecondary: string;
+    clearColorSecondary: string;
+    colorSecondary: string;
+    textColorSecondary: string;
+    borderSecondary: string;
+    arrowColorDisabledSecondary: string;
+    clearColorDisabledSecondary: string;
+    colorDisabledSecondary: string;
+    textColorDisabledSecondary: string;
+    borderDisabledSecondary: string;
+    arrowColorHoverSecondary: string;
+    clearColorHoverSecondary: string;
+    colorHoverSecondary: string;
+    textColorHoverSecondary: string;
+    borderHoverSecondary: string;
+    arrowColorFocusSecondary: string;
+    clearColorFocusSecondary: string;
+    colorFocusSecondary: string;
+    textColorFocusSecondary: string;
+    borderFocusSecondary: string;
+    arrowColorActiveSecondary: string;
+    clearColorActiveSecondary: string;
+    colorActiveSecondary: string;
+    textColorActiveSecondary: string;
+    borderActiveSecondary: string;
 }, {
     Popover: import("../../../_mixins").Theme<"Popover", {
-        fontSize: string;
-        borderRadius: string;
-        color: string;
-        dividerColor: string;
-        textColor: string;
-        boxShadow: string;
         space: string;
         spaceArrow: string;
         arrowOffset: string;
         arrowOffsetVertical: string;
         arrowHeight: string;
         padding: string;
+        fontSize: string;
+        borderRadius: string;
+        color: string;
+        dividerColor: string;
+        textColor: string;
+        boxShadow: string;
     }, any>;
 }>;
 export default internalSelectionLight;

package/es/_internal/selection/styles/light.js

@@ -1,30 +1,130 @@
 import { changeColor } from 'seemly';
 import { commonLight } from '../../../_styles/common';
 import { popoverLight } from '../../../popover/styles';
-import commonVariables from './_common';
 import { createTheme } from '../../../_mixins';
-const self = (vars) => {
-    const { borderRadius, textColor2, inputColor, primaryColor, warningColor, warningColorHover, errorColor, errorColorHover, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled, fontSizeTiny, fontSizeSmall, fontSizeLarge, buttonColor2Hover, tertiaryColor, tertiaryColorSuppl, iconColor } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { fontSizeTiny,
-        fontSizeSmall, fontSizeMedium: '16px', fontSizeLarge, heightTiny: '32px', heightSmall: '40px', heightMedium: '48px', heightLarge: '56px', borderRadius, 
+export const self = (vars) => {
+    const { borderRadius, iconMedium, fontBodyMedium, fontBodyLarge, heightTiny, heightSmall, heightMedium, heightLarge, heightHuge, borderRadiusLarge, textPrimary, textSecondary, elementsSecondary, elementsTertiary, elementsQuaternary, elementsPrimary, elementsQuinary, staticOrange, staticRed, textQuaternary, iconSmall, elementsSenary, lineHeightBodyMedium, lineHeightBodyLarge, fontTitleMedium, lineHeightTitleMedium } = vars;
+    return {
+        paddingTiny: '0px 12px 0px 12px',
+        paddingSmall: '0px 16px 0px 16px',
+        paddingMedium: '0px 16px 0px 16px',
+        paddingLarge: '0px 16px 0px 16px',
+        paddingHuge: '0px 20px 0px 24px',
+        clearSizeTiny: iconSmall,
+        clearSizeSmall: iconSmall,
+        clearSizeMedium: iconMedium,
+        clearSizeLarge: iconMedium,
+        clearSizeHuge: iconMedium,
+        arrowSizeTiny: iconSmall,
+        arrowSizeSmall: iconSmall,
+        arrowSizeMedium: iconMedium,
+        arrowSizeLarge: iconMedium,
+        arrowSizeHuge: iconMedium,
+        fontSizeTiny: fontBodyMedium,
+        fontSizeSmall: fontBodyMedium,
+        fontSizeMedium: fontBodyMedium,
+        fontSizeLarge: fontBodyLarge,
+        fontSizeHuge: fontTitleMedium,
+        lineHeightTiny: lineHeightBodyMedium,
+        lineHeightSmall: lineHeightBodyMedium,
+        lineHeightMedium: lineHeightBodyMedium,
+        lineHeightLarge: lineHeightBodyLarge,
+        lineHeightHuge: lineHeightTitleMedium,
+        heightTiny,
+        heightSmall,
+        heightMedium,
+        heightLarge,
+        heightHuge,
+        borderRadiusTiny: borderRadius,
+        borderRadiusSmall: borderRadius,
+        borderRadiusMedium: borderRadius,
+        borderRadiusLarge,
+        borderRadiusHuge: borderRadiusLarge,
         // default
-        textColor: textColor2, textColorDisabled: '#808080', placeholderColor,
-        placeholderColorDisabled, color: inputColor, colorDisabled: '#F3F4F6', colorActive: inputColor, border: `2px solid ${buttonColor2Hover}`, borderHover: `2px solid ${tertiaryColor}`, borderActive: `2px solid ${tertiaryColor}`, borderFocus: `2px solid ${tertiaryColor}`, borderDisabled: `1px solid ${tertiaryColorSuppl}`, boxShadowHover: 'none', boxShadowActive: `0 0 0 0 ${changeColor(primaryColor, {
-            alpha: 0.2
-        })}`, boxShadowFocus: `0 0 0 0 ${changeColor(primaryColor, { alpha: 0.2 })}`, caretColor: tertiaryColor, arrowColor: iconColor, arrowColorHover: tertiaryColor, arrowColorDisabled: '#808080', loadingColor: tertiaryColor, 
+        textColor: textPrimary,
+        textColorDisabled: textSecondary,
+        placeholderColor: textSecondary,
+        placeholderColorDisabled: textSecondary,
+        color: elementsSecondary,
+        colorDisabled: elementsTertiary,
+        colorActive: elementsSecondary,
+        border: `2px solid ${elementsQuaternary}`,
+        borderHover: `2px solid ${elementsPrimary}`,
+        borderActive: `2px solid ${elementsPrimary}`,
+        borderFocus: `2px solid ${elementsPrimary}`,
+        borderDisabled: `2px solid ${elementsQuaternary}`,
+        boxShadowHover: 'none',
+        boxShadowActive: `0 0 0 4px ${changeColor(elementsPrimary, {
+            alpha: 0.1
+        })}`,
+        boxShadowFocus: `0 0 0 4px ${changeColor(elementsPrimary, { alpha: 0.1 })}`,
+        caretColor: elementsPrimary,
+        arrowColor: elementsPrimary,
+        arrowColorHover: elementsPrimary,
+        arrowColorDisabled: elementsQuinary,
+        loadingColor: elementsPrimary,
         // warning
-        borderWarning: `2px solid ${warningColor}`, borderHoverWarning: `2px solid ${warningColorHover}`, borderActiveWarning: `2px solid ${warningColor}`, borderFocusWarning: `2px solid ${warningColorHover}`, boxShadowHoverWarning: 'none', boxShadowActiveWarning: `0 0 0 0 ${changeColor(warningColor, {
-            alpha: 0.2
-        })}`, boxShadowFocusWarning: `0 0 0 0 ${changeColor(warningColor, {
-            alpha: 0.2
-        })}`, colorActiveWarning: inputColor, caretColorWarning: warningColor, 
+        borderWarning: `2px solid ${staticOrange}`,
+        borderHoverWarning: `2px solid ${staticOrange}`,
+        borderActiveWarning: `2px solid ${staticOrange}`,
+        borderFocusWarning: `2px solid ${staticOrange}`,
+        boxShadowHoverWarning: 'none',
+        boxShadowActiveWarning: `0 0 0 4px ${changeColor(staticOrange, {
+            alpha: 0.1
+        })}`,
+        boxShadowFocusWarning: `0 0 0 4px ${changeColor(staticOrange, {
+            alpha: 0.1
+        })}`,
+        colorActiveWarning: elementsSecondary,
+        caretColorWarning: elementsPrimary,
         // error
-        borderError: `2px solid ${errorColor}`, borderHoverError: `2px solid ${errorColorHover}`, borderActiveError: `2px solid ${errorColor}`, borderFocusError: `2px solid ${errorColorHover}`, boxShadowHoverError: 'none', boxShadowActiveError: `0 0 0 0 ${changeColor(errorColor, {
-            alpha: 0.2
-        })}`, boxShadowFocusError: `0 0 0 0 ${changeColor(errorColor, {
-            alpha: 0.2
-        })}`, colorActiveError: inputColor, caretColorError: errorColor, clearColor: tertiaryColor, clearColorHover,
-        clearColorPressed });
+        borderError: `2px solid ${staticRed}`,
+        borderHoverError: `2px solid ${staticRed}`,
+        borderActiveError: `2px solid ${staticRed}`,
+        borderFocusError: `2px solid ${staticRed}`,
+        boxShadowHoverError: 'none',
+        boxShadowActiveError: `0 0 0 4px ${changeColor(staticRed, {
+            alpha: 0.1
+        })}`,
+        boxShadowFocusError: `0 0 0 4px ${changeColor(staticRed, {
+            alpha: 0.1
+        })}`,
+        colorActiveError: elementsSecondary,
+        caretColorError: elementsPrimary,
+        clearColor: elementsPrimary,
+        clearColorHover: elementsPrimary,
+        clearColorPressed: elementsPrimary,
+        caretColorSecondary: elementsPrimary,
+        filterCounterTextColor: textSecondary,
+        filterCounterSeparatorColor: elementsSenary,
+        filterCounterTextColorDisabled: textSecondary,
+        filterCounterSeparatorColorDisabled: elementsQuaternary,
+        arrowColorSecondary: elementsSecondary,
+        clearColorSecondary: elementsSecondary,
+        colorSecondary: elementsPrimary,
+        textColorSecondary: textQuaternary,
+        borderSecondary: 'none',
+        arrowColorDisabledSecondary: elementsQuinary,
+        clearColorDisabledSecondary: elementsQuinary,
+        colorDisabledSecondary: elementsTertiary,
+        textColorDisabledSecondary: textSecondary,
+        borderDisabledSecondary: `2px solid ${elementsQuaternary}`,
+        arrowColorHoverSecondary: elementsSecondary,
+        clearColorHoverSecondary: elementsSecondary,
+        colorHoverSecondary: elementsPrimary,
+        textColorHoverSecondary: textQuaternary,
+        borderHoverSecondary: 'none',
+        arrowColorFocusSecondary: elementsSecondary,
+        clearColorFocusSecondary: elementsSecondary,
+        colorFocusSecondary: elementsPrimary,
+        textColorFocusSecondary: textQuaternary,
+        borderFocusSecondary: 'none',
+        arrowColorActiveSecondary: elementsSecondary,
+        clearColorActiveSecondary: elementsSecondary,
+        colorActiveSecondary: elementsPrimary,
+        textColorActiveSecondary: textQuaternary,
+        borderActiveSecondary: 'none'
+    };
 };
 const internalSelectionLight = createTheme({
     name: 'InternalSelection',

package/es/_internal/skeleton/src/styles/index.cssr.js

@@ -11,7 +11,7 @@ export default c([cB('skeleton', `
  --u-color-start .3s var(--u-bezier),
  --u-color-end .3s var(--u-bezier),
  background-color .3s var(--u-bezier);
- animation: 2s skeleton-loading infinite cubic-bezier(0.36, 0, 0.64, 1);
+ animation: 6s skeleton-loading infinite cubic-bezier(0.36, 0, 0.64, 1);
  background-color: var(--u-color-start);
  `), c('@keyframes skeleton-loading', `
  0% {

package/es/_internal/skeleton/styles/dark.js

@@ -1,16 +1,7 @@
 import { commonDark } from '../../../_styles/common';
+import { self } from './light';
 export const skeletonDark = {
     name: 'Skeleton',
     common: commonDark,
-    self(vars) {
-        const { heightSmall, heightMedium, heightLarge, borderRadius } = vars;
-        return {
-            color: 'rgba(255, 255, 255, 0.12)',
-            colorEnd: 'rgba(255, 255, 255, 0.18)',
-            borderRadius,
-            heightSmall,
-            heightMedium,
-            heightLarge
-        };
-    }
+    self
 };

package/es/_internal/skeleton/styles/light.d.ts

@@ -1,6 +1,6 @@
 import type { ThemeCommonVars } from '../../../_styles/common';
 import { type Theme } from '../../../_mixins';
-declare const self: (vars: ThemeCommonVars) => {
+export declare const self: (vars: ThemeCommonVars) => {
     color: string;
     colorEnd: string;
     borderRadius: string;
@@ -11,4 +11,3 @@ declare const self: (vars: ThemeCommonVars) => {
 export type SkeletonThemeVars = ReturnType<typeof self>;
 export declare const skeletonLight: Theme<'Skeleton', SkeletonThemeVars>;
 export type SkeletonTheme = typeof skeletonLight;
-export {};

package/es/_internal/skeleton/styles/light.js

@@ -1,9 +1,9 @@
 import { commonLight } from '../../../_styles/common';
-const self = (vars) => {
-    const { heightSmall, heightMedium, heightLarge, borderRadius } = vars;
+export const self = (vars) => {
+    const { heightSmall, heightMedium, heightLarge, borderRadius, elementsQuaternary, elementsTertiary } = vars;
     return {
-        color: '#eee',
-        colorEnd: '#ddd',
+        color: elementsQuaternary,
+        colorEnd: elementsTertiary,
         borderRadius,
         heightSmall,
         heightMedium,

package/es/_styles/common/_common.d.ts

@@ -1,28 +1,53 @@
 declare const _default: {
     fontFamily: string;
     fontFamilyMono: string;
-    fontWeight: string;
-    fontWeightStrong: string;
     cubicBezierEaseInOut: string;
     cubicBezierEaseOut: string;
     cubicBezierEaseIn: string;
-    borderWidth: number;
-    borderTagWidth: number;
+    borderRadiusLarge: string;
     borderRadius: string;
+    borderRadiusMedium: string;
     borderRadiusSmall: string;
-    fontSize: string;
-    fontSizeMini: string;
-    fontSizeTiny: string;
-    fontSizeSmall: string;
-    fontSizeMedium: string;
-    fontSizeLarge: string;
-    fontSizeHuge: string;
-    lineHeight: string;
+    borderRadiusTiny: string;
     heightMini: string;
     heightTiny: string;
     heightSmall: string;
     heightMedium: string;
     heightLarge: string;
     heightHuge: string;
+    fontDisplayLarge: string;
+    fontDisplaySmall: string;
+    fontHeadingLarge: string;
+    fontHeadingMedium: string;
+    fontHeadingSmall: string;
+    fontTitleLarge: string;
+    fontTitleMedium: string;
+    fontTitleSmall: string;
+    fontBodyLarge: string;
+    fontBodyMedium: string;
+    fontBodySmall: string;
+    lineHeightDisplayLarge: string;
+    lineHeightDisplaySmall: string;
+    lineHeightHeadingLarge: string;
+    lineHeightHeadingMedium: string;
+    lineHeightHeadingSmall: string;
+    lineHeightTitleLarge: string;
+    lineHeightTitleMedium: string;
+    lineHeightTitleSmall: string;
+    lineHeightBodyLarge: string;
+    lineHeightBodyMedium: string;
+    lineHeightBodySmall: string;
+    fontWeight: string;
+    fontWeightStrong: string;
+    fontWeightBold: string;
+    iconSmall: string;
+    iconMedium: string;
+    iconLarge: string;
+    iconHuge: string;
+    closeSmall: string;
+    closeMedium: string;
+    closeLarge: string;
+    closeHuge: string;
+    closeBorderRadius: string;
 };
 export default _default;

package/es/_styles/common/_common.js

@@ -1,27 +1,52 @@
 export default {
     fontFamily: 'v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     fontFamilyMono: 'v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace',
-    fontWeight: '400',
-    fontWeightStrong: '500',
     cubicBezierEaseInOut: 'cubic-bezier(.4, 0, .2, 1)',
     cubicBezierEaseOut: 'cubic-bezier(0, 0, .2, 1)',
     cubicBezierEaseIn: 'cubic-bezier(.4, 0, 1, 1)',
-    borderWidth: 1,
-    borderTagWidth: 2,
+    borderRadiusLarge: '16px',
     borderRadius: '12px',
-    borderRadiusSmall: '10px',
-    fontSize: '14px',
-    fontSizeMini: '14px',
-    fontSizeTiny: '14px',
-    fontSizeSmall: '14px',
-    fontSizeMedium: '14px',
-    fontSizeLarge: '16px',
-    fontSizeHuge: '16px',
-    lineHeight: '143%',
-    heightMini: '32px',
-    heightTiny: '24px',
-    heightSmall: '32px',
-    heightMedium: '40px',
-    heightLarge: '48px',
-    heightHuge: '48px'
+    borderRadiusMedium: '10px',
+    borderRadiusSmall: '8px',
+    borderRadiusTiny: '6px',
+    heightMini: '24px',
+    heightTiny: '32px',
+    heightSmall: '40px',
+    heightMedium: '48px',
+    heightLarge: '56px',
+    heightHuge: '90px',
+    fontDisplayLarge: '42px',
+    fontDisplaySmall: '36px',
+    fontHeadingLarge: '32px',
+    fontHeadingMedium: '28px',
+    fontHeadingSmall: '24px',
+    fontTitleLarge: '22px',
+    fontTitleMedium: '20px',
+    fontTitleSmall: '18px',
+    fontBodyLarge: '16px',
+    fontBodyMedium: '14px',
+    fontBodySmall: '12px',
+    lineHeightDisplayLarge: '48px',
+    lineHeightDisplaySmall: '36px',
+    lineHeightHeadingLarge: '40px',
+    lineHeightHeadingMedium: '36px',
+    lineHeightHeadingSmall: '30px',
+    lineHeightTitleLarge: '32px',
+    lineHeightTitleMedium: '30px',
+    lineHeightTitleSmall: '28px',
+    lineHeightBodyLarge: '24px',
+    lineHeightBodyMedium: '20px',
+    lineHeightBodySmall: '16px',
+    fontWeight: '500',
+    fontWeightStrong: '600',
+    fontWeightBold: '700',
+    iconSmall: '16px',
+    iconMedium: '24px',
+    iconLarge: '40px',
+    iconHuge: '80px',
+    closeSmall: '24px',
+    closeMedium: '32px',
+    closeLarge: '56px',
+    closeHuge: '96px',
+    closeBorderRadius: '100%'
 };

package/es/_styles/common/dark.js

@@ -1,100 +1,4 @@
-import { rgba, composite, scaleColor } from 'seemly';
 import commonVariables from './_common';
-const base = {
-    neutralBase: '#000',
-    neutralInvertBase: '#fff',
-    neutralTextBase: '#fff',
-    neutralPopover: 'rgb(72, 72, 78)',
-    neutralCard: 'rgb(24, 24, 28)',
-    neutralModal: 'rgb(44, 44, 50)',
-    neutralBody: 'rgb(16, 16, 20)',
-    alpha1: '0.9',
-    alpha2: '0.82',
-    alpha3: '0.52',
-    alpha4: '0.38',
-    alpha5: '0.28',
-    alphaClose: '0.52',
-    alphaDisabled: '0.38',
-    alphaDisabledInput: '0.06',
-    alphaPending: '0.09',
-    alphaTablePending: '0.06',
-    alphaTableStriped: '0.05',
-    alphaPressed: '0.05',
-    alphaAvatar: '0.18',
-    alphaRail: '0.2',
-    alphaProgressRail: '0.12',
-    alphaBorder: '0.24',
-    alphaDivider: '0.09',
-    alphaInput: '0.1',
-    alphaAction: '0.06',
-    alphaTab: '0.04',
-    alphaScrollbar: '0.2',
-    alphaScrollbarHover: '0.3',
-    alphaCode: '0.12',
-    alphaTag: '0.2',
-    // primary
-    primaryHover: '#7fe7c4',
-    primaryDefault: '#63e2b7',
-    primaryActive: '#5acea7',
-    primarySuppl: 'rgb(42, 148, 125)',
-    // info
-    infoHover: '#8acbec',
-    infoDefault: '#70c0e8',
-    infoActive: '#66afd3',
-    infoSuppl: 'rgb(56, 137, 197)',
-    // error
-    errorHover: '#e98b8b',
-    errorDefault: '#e88080',
-    errorActive: '#e57272',
-    errorSuppl: 'rgb(208, 58, 82)',
-    // warning
-    warningHover: '#f5d599',
-    warningDefault: '#f2c97d',
-    warningActive: '#e6c260',
-    warningSuppl: 'rgb(240, 138, 0)',
-    // success
-    successHover: '#7fe7c4',
-    successDefault: '#63e2b7',
-    successActive: '#5acea7',
-    successSuppl: 'rgb(42, 148, 125)',
-    // tertiary
-    tertiaryHover: '#4E4D4D',
-    tertiaryDefault: '#101010',
-    tertiaryActive: '#4E4D4D',
-    tertiarySuppl: '#C5C7CA'
-};
-const baseBackgroundRgb = rgba(base.neutralBase);
-const baseInvertBackgroundRgb = rgba(base.neutralInvertBase);
-const overlayPrefix = 'rgba(' + baseInvertBackgroundRgb.slice(0, 3).join(', ') + ', ';
-function overlay(alpha) {
-    return overlayPrefix + String(alpha) + ')';
-}
-function neutral(alpha) {
-    const overlayRgba = Array.from(baseInvertBackgroundRgb);
-    overlayRgba[3] = Number(alpha);
-    return composite(baseBackgroundRgb, overlayRgba);
-}
-const derived = Object.assign(Object.assign({ name: 'common' }, commonVariables), { baseColor: base.neutralBase, 
-    // primary color
-    primaryColor: base.primaryDefault, primaryColorHover: base.primaryHover, primaryColorPressed: base.primaryActive, primaryColorSuppl: base.primarySuppl, 
-    // info color
-    infoColor: base.infoDefault, infoColorHover: base.infoHover, infoColorPressed: base.infoActive, infoColorSuppl: base.infoSuppl, 
-    // success color
-    successColor: base.successDefault, successColorHover: base.successHover, successColorPressed: base.successActive, successColorSuppl: base.successSuppl, 
-    // warning color
-    warningColor: base.warningDefault, warningColorHover: base.warningHover, warningColorPressed: base.warningActive, warningColorSuppl: base.warningSuppl, 
-    // error color
-    errorColor: base.errorDefault, errorColorHover: base.errorHover, errorColorPressed: base.errorActive, errorColorSuppl: base.errorSuppl, 
-    // tertiary color
-    tertiaryColor: base.tertiaryDefault, tertiaryColorHover: base.tertiaryHover, tertiaryColorActive: base.tertiaryActive, tertiaryColorSuppl: base.tertiarySuppl, tertiaryElements: '#F3F4F6', 
-    // text color
-    textColorBase: base.neutralTextBase, textColor1: overlay(base.alpha1), textColor2: overlay(base.alpha2), textColor3: overlay(base.alpha3), textTertiary: '#999', 
-    // textColor4: overlay(base.alpha4), // disabled, placeholder, icon
-    // textColor5: overlay(base.alpha5),
-    // Box Shadow colors
-    boxShadowHover: 'rgba(197, 199, 202, 0.25)', boxShadowFocus: 'rgba(197, 199, 202, 0.36)', boxShadowHoverChecked: 'rgba(187, 162, 253, 0.25)', boxShadowFocusChecked: 'rgba(187, 162, 253, 0.36)', textColorDisabled: overlay(base.alpha4), placeholderColor: overlay(base.alpha4), placeholderColorDisabled: overlay(base.alpha5), iconColor: overlay(base.alpha4), iconColorDisabled: overlay(base.alpha5), iconColorHover: overlay(Number(base.alpha4) * 1.25), iconColorPressed: overlay(Number(base.alpha4) * 0.8), opacity1: base.alpha1, opacity2: base.alpha2, opacity3: base.alpha3, opacity4: base.alpha4, opacity5: base.alpha5, dividerColor: overlay(base.alphaDivider), borderColor: overlay(base.alphaBorder), borderTagColor: '#C5C7CA', 
-    // close
-    closeIconColorHover: overlay(Number(base.alphaClose)), closeIconColor: overlay(Number(base.alphaClose)), closeIconColorPressed: overlay(Number(base.alphaClose)), closeColorHover: 'rgba(255, 255, 255, .12)', closeColorPressed: 'rgba(255, 255, 255, .08)', 
-    // clear
-    clearColor: overlay(base.alpha4), clearColorHover: scaleColor(overlay(base.alpha4), { alpha: 1.25 }), clearColorPressed: scaleColor(overlay(base.alpha4), { alpha: 0.8 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: overlay(base.alphaProgressRail), railColor: overlay(base.alphaRail), popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: neutral(base.alphaTag), avatarColor: overlay(base.alphaAvatar), avatarTextColor: base.neutralTextBase, avatarIconColor: base.neutralTextBase, invertedColor: base.neutralBase, tooltipColor: base.neutralPopover, inputColor: overlay(base.alphaInput), codeColor: overlay(base.alphaCode), tabColor: overlay(base.alphaTab), actionColor: overlay(base.alphaAction), tableHeaderColor: overlay(base.alphaAction), hoverColor: overlay(base.alphaPending), tableColorHover: overlay(base.alphaTablePending), tableColorStriped: overlay(base.alphaTableStriped), pressedColor: overlay(base.alphaPressed), opacityDisabled: base.alphaDisabled, inputColorDisabled: overlay(base.alphaDisabledInput), buttonColor2: 'rgba(255, 255, 255, .08)', buttonColor2Hover: 'rgba(255, 255, 255, .12)', buttonColor2Pressed: 'rgba(255, 255, 255, .08)', boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .24), 0 3px 6px 0 rgba(0, 0, 0, .18), 0 5px 12px 4px rgba(0, 0, 0, .12)', boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .24), 0 6px 12px 0 rgba(0, 0, 0, .16), 0 9px 18px 8px rgba(0, 0, 0, .10)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' });
+const derived = Object.assign(Object.assign({ name: 'common' }, commonVariables), { scrollbarColor: 'rgba(255, 255, 255, 0.25)', scrollbarColorHover: 'rgba(255, 255, 255, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brandPrimary50: '#2B204E', brandPrimary100: '#412A89', brandPrimary200: '#6A40ED', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#8967F1', brandPrimary550: '#6607DF', brandPrimary600: '#5D46A6', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#101010', surfaceSecondary: '#1D1D1D', containerPrimary: '#1D1D1D', containerSecondary: '#313135', textPrimary: '#F3F4F6', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#101010', textBrand: '#F3F4F6', elementsPrimary: '#F3F4F6', elementsSecondary: '#101010', elementsTertiary: '#222222', elementsQuaternary: '#424247', elementsQuinary: '#707479', elementsDarkQuinary: '#919396', elementsSenary: '#DFDFDF', elementsOnContainer: '#101010', transparencyPrimary: 'rgba(255, 255, 255, 0.1)', transparencySecondary: 'rgba(255, 255, 255, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.75)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticErrorAccent: '#CB0000', shadowDepth2: '0 0 0 1px #424247' // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
+ });
 export default derived;