@uzum-tech/ui 0.1.2 → 1.0.0

package/es/input/src/InputGroupLabel.d.ts

@@ -1,9 +1,9 @@
 import { type PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-import type { Size } from './interface';
+import type { InputSize } from './interface';
 export declare const inputGroupLabelProps: {
     readonly size: {
-        readonly type: PropType<Size>;
+        readonly type: PropType<InputSize>;
         readonly default: "medium";
     };
     readonly bordered: {
@@ -11,21 +11,28 @@ export declare const inputGroupLabelProps: {
         readonly default: undefined;
     };
     readonly theme: PropType<import("../../_mixins").Theme<"Input", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSize: string;
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -65,28 +72,31 @@ export declare const inputGroupLabelProps: {
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
+        selectionColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
+        paddingHuge: string;
         clearSize: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -126,28 +136,31 @@ export declare const inputGroupLabelProps: {
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
+        selectionColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
+        paddingHuge: string;
         clearSize: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -187,17 +200,13 @@ export declare const inputGroupLabelProps: {
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
-        paddingTiny: string;
-        paddingSmall: string;
-        paddingMedium: string;
-        paddingLarge: string;
-        clearSize: string;
+        selectionColor: string;
     }, any>>>;
 };
 export type InputGroupLabelProps = ExtractPublicPropTypes<typeof inputGroupLabelProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly size: {
-        readonly type: PropType<Size>;
+        readonly type: PropType<InputSize>;
         readonly default: "medium";
     };
     readonly bordered: {
@@ -205,21 +214,28 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly theme: PropType<import("../../_mixins").Theme<"Input", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSize: string;
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -259,28 +275,31 @@ declare const _default: import("vue").DefineComponent<{
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
+        selectionColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
+        paddingHuge: string;
         clearSize: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -320,28 +339,31 @@ declare const _default: import("vue").DefineComponent<{
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
+        selectionColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
+        paddingHuge: string;
         clearSize: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -381,11 +403,7 @@ declare const _default: import("vue").DefineComponent<{
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
-        paddingTiny: string;
-        paddingSmall: string;
-        paddingMedium: string;
-        paddingLarge: string;
-        clearSize: string;
+        selectionColor: string;
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
@@ -405,7 +423,7 @@ declare const _default: import("vue").DefineComponent<{
     onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly size: {
-        readonly type: PropType<Size>;
+        readonly type: PropType<InputSize>;
         readonly default: "medium";
     };
     readonly bordered: {
@@ -413,21 +431,28 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly theme: PropType<import("../../_mixins").Theme<"Input", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSize: string;
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -467,28 +492,31 @@ declare const _default: import("vue").DefineComponent<{
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
+        selectionColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
+        paddingHuge: string;
         clearSize: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -528,28 +556,31 @@ declare const _default: import("vue").DefineComponent<{
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
+        selectionColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
+        paddingHuge: string;
         clearSize: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -589,14 +620,10 @@ declare const _default: import("vue").DefineComponent<{
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
-        paddingTiny: string;
-        paddingSmall: string;
-        paddingMedium: string;
-        paddingLarge: string;
-        clearSize: string;
+        selectionColor: string;
     }, any>>>;
 }>>, {
-    readonly size: Size;
+    readonly size: InputSize;
     readonly bordered: boolean | undefined;
 }, {}>;
 export default _default;

package/es/input/src/interface.d.ts

@@ -1,5 +1,5 @@
 import type { Ref, UnwrapRef } from 'vue';
-export type Size = 'tiny' | 'small' | 'medium' | 'large';
+export type InputSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge';
 export type OnUpdateValue = (value: string & [string, string]) => void;
 export type OnUpdateValueImpl = (value: string | [string, string]) => void;
 export interface InputWrappedRef {

package/es/input/src/styles/input.cssr.js

@@ -1,5 +1,4 @@
 import { cB, c, cE, cM, cNotM } from '../../../_utils/cssr';
-import commonVariables from '../../../_styles/common/_common';
 // vars:
 // --u-bezier
 // --u-color
@@ -235,7 +234,7 @@ cM('pair', [cE('input-el, placeholder', 'text-align: center;'), cE('separator',
  `), cE('state-border', `
  border-color: #0000;
  z-index: 1;
- `), cE('prefix', 'margin-right: 4px;'), cE('suffix', `
+ `), cE('prefix', 'margin-right: 12px;'), cE('suffix', `
  margin-left: 4px;
  `), cE('suffix, prefix', `
  transition: color .3s var(--u-bezier);
@@ -290,10 +289,10 @@ cM('pair', [cE('input-el, placeholder', 'text-align: center;'), cE('separator',
  box-shadow: var(--u-box-shadow-focus-${status});
  border: var(--u-border-focus-${status});
  `)])])])), cE('loading', null, [cM('skeleton', {
-  width: `calc(100% + ${commonVariables.borderWidth * 2}px)`,
-  height: `calc(100% + ${commonVariables.borderWidth * 2}px)`,
-  left: `-${commonVariables.borderWidth}px`,
-  top: `-${commonVariables.borderWidth}px`,
+  width: 'calc(100% + 2px)',
+  height: 'calc(100% + 2px)',
+  left: '-1px',
+  top: '-1px',
   position: 'absolute',
   zIndex: 2,
   borderRadius: 'var(--u-border-radius)',

package/es/input/styles/dark.js

@@ -1,26 +1,8 @@
-import commonVariables from './_common';
-import { changeColor } from 'seemly';
 import { commonDark } from '../../_styles/common';
+import { self } from './light';
 const inputDark = {
     name: 'Input',
     common: commonDark,
-    self(vars) {
-        const { textColor2, textColor3, textColorDisabled, primaryColor, primaryColorHover, inputColor, inputColorDisabled, warningColor, warningColorHover, errorColor, errorColorHover, borderRadius, lineHeight, fontSizeTiny, fontSizeSmall, fontSizeLarge, clearColor, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled, iconColor, iconColorDisabled } = vars;
-        return Object.assign(Object.assign({}, commonVariables), { countTextColorDisabled: textColorDisabled, countTextColor: textColor3, heightTiny: '32px', heightSmall: '40px', heightMedium: '48px', heightLarge: '56px', fontSizeTiny,
-            fontSizeSmall, fontSizeMedium: '16px', fontSizeLarge, lineHeight: '24px', lineHeightTextarea: lineHeight, borderRadius, iconSize: '24px', groupLabelColor: inputColor, textColor: textColor2, textColorDisabled: '#808080', textDecorationColor: textColor2, groupLabelTextColor: textColor2, caretColor: primaryColor, placeholderColor,
-            placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorFocus: changeColor(primaryColor, { alpha: 0.1 }), groupLabelBorder: '1px solid #0000', border: '2px solid #0000', borderHover: `2px solid ${primaryColorHover}`, borderDisabled: '1px solid #0000', borderFocus: `2px solid ${primaryColorHover}`, boxShadowFocus: `0 0 0 0px ${changeColor(primaryColor, { alpha: 0.3 })}`, loadingColor: primaryColor, 
-            // warning
-            loadingColorWarning: warningColor, borderWarning: `2px solid ${warningColor}`, borderHoverWarning: `2px solid ${warningColorHover}`, colorFocusWarning: changeColor(warningColor, { alpha: 0.1 }), borderFocusWarning: `2px solid ${warningColorHover}`, boxShadowFocusWarning: `0 0 0 0px ${changeColor(warningColor, {
-                alpha: 0.3
-            })}`, caretColorWarning: warningColor, 
-            // error
-            loadingColorError: errorColor, borderError: `2px solid ${errorColor}`, borderHoverError: `2px solid ${errorColorHover}`, colorFocusError: changeColor(errorColor, { alpha: 0.1 }), borderFocusError: `2px solid ${errorColorHover}`, boxShadowFocusError: `0 0 0 0px ${changeColor(errorColor, {
-                alpha: 0.3
-            })}`, caretColorError: errorColor, clearColor,
-            clearColorHover,
-            clearColorPressed,
-            iconColor,
-            iconColorDisabled, iconColorHover: primaryColor, iconColorPressed: primaryColor, suffixTextColor: textColor2 });
-    }
+    self
 };
 export default inputDark;

package/es/input/styles/light.d.ts

@@ -1,21 +1,28 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
-declare const self: (vars: ThemeCommonVars) => {
+export declare const self: (vars: ThemeCommonVars) => {
+    paddingTiny: string;
+    paddingSmall: string;
+    paddingMedium: string;
+    paddingLarge: string;
+    paddingHuge: string;
+    clearSize: string;
     countTextColorDisabled: string;
     countTextColor: string;
     heightTiny: string;
     heightSmall: string;
     heightMedium: string;
     heightLarge: string;
+    heightHuge: string;
     fontSizeTiny: string;
     fontSizeSmall: string;
     fontSizeMedium: string;
     fontSizeLarge: string;
+    fontSizeHuge: string;
     lineHeight: string;
     lineHeightTextarea: string;
     borderRadius: string;
     iconSize: string;
-    groupLabelColor: string;
     groupLabelTextColor: string;
     textColor: string;
     textColorDisabled: string;
@@ -55,11 +62,7 @@ declare const self: (vars: ThemeCommonVars) => {
     iconColorHover: string;
     iconColorPressed: string;
     suffixTextColor: string;
-    paddingTiny: string;
-    paddingSmall: string;
-    paddingMedium: string;
-    paddingLarge: string;
-    clearSize: string;
+    selectionColor: string;
 };
 export type InputThemeVars = ReturnType<typeof self>;
 declare const inputLight: Theme<'Input', InputThemeVars>;

package/es/input/styles/light.js

@@ -1,22 +1,77 @@
-import commonVariables from './_common';
 import { changeColor } from 'seemly';
 import { commonLight } from '../../_styles/common';
-const self = (vars) => {
-    const { textColor2, textColor3, textColorDisabled, primaryColor, inputColor, borderColor, warningColor, warningColorHover, errorColor, errorColorHover, borderRadius, lineHeight, fontSizeTiny, fontSizeSmall, fontSizeLarge, actionColor, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled, iconColor, iconColorDisabled, tertiaryColor, tertiaryColorSuppl, buttonColor2Hover } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { countTextColorDisabled: textColorDisabled, countTextColor: textColor3, heightTiny: '32px', heightSmall: '40px', heightMedium: '48px', heightLarge: '56px', fontSizeTiny,
-        fontSizeSmall, fontSizeMedium: '16px', fontSizeLarge, lineHeight: '24px', lineHeightTextarea: lineHeight, borderRadius, iconSize: '24px', groupLabelColor: actionColor, groupLabelTextColor: textColor2, textColor: textColor2, textColorDisabled: '#808080', textDecorationColor: textColor2, caretColor: tertiaryColor, placeholderColor,
-        placeholderColorDisabled, color: inputColor, colorDisabled: '#F3F4F6', colorFocus: inputColor, groupLabelBorder: `1px solid ${borderColor}`, border: `2px solid ${buttonColor2Hover}`, borderHover: `2px solid ${tertiaryColor}`, borderDisabled: `1px solid ${tertiaryColorSuppl}`, borderFocus: `2px solid ${tertiaryColor}`, boxShadowFocus: `0 0 0 0px ${changeColor(primaryColor, { alpha: 0.2 })}`, loadingColor: tertiaryColor, 
+export const self = (vars) => {
+    const { iconMedium, textSecondary, elementsTertiary, textPrimary, fontBodyMedium, fontBodyLarge, lineHeightBodyLarge, borderRadius, containerPrimary, elementsQuaternary, elementsPrimary, staticOrange, staticRed, elementsQuinary, brandPrimary500, heightTiny, heightSmall, heightMedium, heightLarge, heightHuge, fontTitleMedium } = vars;
+    return {
+        paddingTiny: '0 12px',
+        paddingSmall: '0 12px',
+        paddingMedium: '0 16px',
+        paddingLarge: '0 16px',
+        paddingHuge: '0 24px',
+        clearSize: iconMedium,
+        countTextColorDisabled: textSecondary,
+        countTextColor: textPrimary,
+        heightTiny,
+        heightSmall,
+        heightMedium,
+        heightLarge,
+        heightHuge,
+        fontSizeTiny: fontBodyMedium,
+        fontSizeSmall: fontBodyMedium,
+        fontSizeMedium: fontBodyMedium,
+        fontSizeLarge: fontBodyLarge,
+        fontSizeHuge: fontTitleMedium,
+        lineHeight: lineHeightBodyLarge,
+        lineHeightTextarea: lineHeightBodyLarge,
+        borderRadius,
+        iconSize: iconMedium,
+        groupLabelTextColor: textPrimary,
+        textColor: textPrimary,
+        textColorDisabled: textSecondary,
+        textDecorationColor: textPrimary,
+        caretColor: textPrimary,
+        placeholderColor: textSecondary,
+        placeholderColorDisabled: textSecondary,
+        color: containerPrimary,
+        colorDisabled: elementsTertiary,
+        colorFocus: containerPrimary,
+        groupLabelBorder: `2px solid ${elementsQuaternary}`,
+        border: `2px solid ${elementsQuaternary}`,
+        borderHover: `2px solid ${elementsPrimary}`,
+        borderDisabled: `2px solid ${elementsQuaternary}`,
+        borderFocus: `2px solid ${elementsPrimary}`,
+        boxShadowFocus: `0 0 0 4px ${changeColor(elementsPrimary, { alpha: 0.1 })}`,
+        loadingColor: elementsPrimary,
         // warning
-        loadingColorWarning: warningColor, borderWarning: `2px solid ${warningColor}`, borderHoverWarning: `2px solid ${warningColorHover}`, colorFocusWarning: inputColor, borderFocusWarning: `2px solid ${warningColorHover}`, boxShadowFocusWarning: `0 0 0 0px ${changeColor(warningColor, {
-            alpha: 0.2
-        })}`, caretColorWarning: warningColor, 
+        loadingColorWarning: staticOrange,
+        borderWarning: `2px solid ${staticOrange}`,
+        borderHoverWarning: `2px solid ${staticOrange}`,
+        colorFocusWarning: containerPrimary,
+        borderFocusWarning: `2px solid ${staticOrange}`,
+        boxShadowFocusWarning: `0 0 0 4px ${changeColor(staticOrange, {
+            alpha: 0.1
+        })}`,
+        caretColorWarning: elementsPrimary,
         // error
-        loadingColorError: errorColor, borderError: `2px solid ${errorColor}`, borderHoverError: `2px solid ${errorColorHover}`, colorFocusError: inputColor, borderFocusError: `2px solid ${errorColorHover}`, boxShadowFocusError: `0 0 0 0px ${changeColor(errorColor, {
-            alpha: 0.2
-        })}`, caretColorError: errorColor, clearColor: tertiaryColor, clearColorHover,
-        clearColorPressed,
-        iconColor,
-        iconColorDisabled, iconColorHover: tertiaryColor, iconColorPressed: tertiaryColor, suffixTextColor: textColor2 });
+        loadingColorError: staticRed,
+        borderError: `2px solid ${staticRed}`,
+        borderHoverError: `2px solid ${staticRed}`,
+        colorFocusError: containerPrimary,
+        borderFocusError: `2px solid ${staticRed}`,
+        boxShadowFocusError: `0 0 0 4px ${changeColor(staticRed, {
+            alpha: 0.1
+        })}`,
+        caretColorError: elementsPrimary,
+        clearColor: elementsPrimary,
+        clearColorHover: elementsPrimary,
+        clearColorPressed: elementsPrimary,
+        iconColor: elementsPrimary,
+        iconColorDisabled: elementsQuinary,
+        iconColorHover: elementsPrimary,
+        iconColorPressed: elementsPrimary,
+        suffixTextColor: textPrimary,
+        selectionColor: brandPrimary500
+    };
 };
 const inputLight = {
     name: 'Input',