@skbkontur/react-ui 0.0.0-2eafa74fd6 → 0.0.0-301cfd6872

package/components/variables.less

@@ -1,841 +0,0 @@
-// Colors
-@brand_x_light: #cae5f5;
-@brand_light: #3094d0;
-@brand: #1e79be;
-@brand_dark: #1363a0;
-@brand_x_dark: #084f85;
-@white: #fff;
-@gray_xx_light: #f2f2f2;
-@gray_x_light: #e5e5e5;
-@gray_light: #a0a0a0;
-@gray: #808080;
-@gray_dark: #333;
-@black: #000;
-@blue_xx_light: #e4f3ff;
-@blue_light: #5199db;
-@blue: #3072c4;
-@blue_dark: #1e5aa4;
-@blue_x_dark: #044785;
-@green_xx_light: #e2f7dc;
-@green: #3f9726;
-@green_dark: #228007;
-@red_xx_light: #ffd6d6;
-@red: #d70c17;
-@red_dark: #ce0014;
-@yellow_xx_light: #fff0bc;
-@yellow: #f69c00;
-@yellow_dark: #d97e00;
-
-// Common
-@bg-default: #fff;
-@bg-disabled: #f2f2f2;
-@bg-active: '__COMPUTED__';
-
-@error-main: #d70c17;
-@error-secondary: #ffd6d6;
-@error-text: #ce0014;
-
-@warning-main: #f69c00;
-@warning-secondary: #fff0bc;
-@warning-text: #d97e00;
-
-@border-color-focus: '__COMPUTED__';
-@border-color-focus-light: #bad7f1;
-@border-color-gray-dark: rgba(0, 0, 0, 0.28);
-@border-color-gray-light: rgba(0, 0, 0, 0.15);
-@border-color-error: '__COMPUTED__';
-@border-color-warning: '__COMPUTED__';
-
-@outline-color-focus: #fff;
-
-@placeholder-color: #a0a0a0;
-@placeholder-color-light: #cdcdcd;
-
-@blink-color: rgba(0, 136, 255, 0.2);
-
-@control-border-width: 1px;
-@control-line-height-small: 20px;
-@control-line-height-medium: 20px;
-@control-line-height-large: 22px;
-@control-padding-y-small: 6px;
-@control-padding-y-medium: 9px;
-@control-padding-y-large: 10px;
-
-@control-height-small: '__COMPUTED__';
-@control-height-medium: '__COMPUTED__';
-@control-height-large: '__COMPUTED__';
-
-// Text
-@text-color-default: #404040;
-@text-color-invert: #fff;
-@text-color-disabled: #a0a0a0;
-
-@font-size-small: 14px;
-@font-size-medium: 14px;
-@font-size-large: 16px;
-
-// Link
-@link-color: #3072c4;
-@link-active-color: #044785;
-@link-hover-color: '__COMPUTED__';
-@link-disabled-color: '__COMPUTED__';
-@link-hover-text-decoration: underline;
-
-// Dropdown
-@dropdown-menu-hover-bg: '__COMPUTED__';
-@dropdown-menu-selected-bg: #f1f1f1;
-
-// Token
-@token-disabled-bg: rgba(0, 0, 0, 0.15);
-
-// Loader
-@loader-bg: rgba(255, 255, 255, @loader-opacity);
-@loader-opacity: 0.8;
-
-// Button
-@btn-wrap-padding: 1px;
-@btn-height-shift: -2;
-@btn-focus-shadow-width: 2px;
-@btn-border-radius: 2px;
-@btn-small-border-radius: 1px;
-@btn-link-border-radius: '__COMPUTED__';
-@btn-menu-arrow-color: #a6a6a6;
-
-@btn-focus-border: '__COMPUTED__';
-
-@btn-padding-y-small: '__COMPUTED__';
-@btn-padding-x-small: 15px;
-@btn-padding-y-medium: '__COMPUTED__';
-@btn-padding-x-medium: 15px;
-@btn-padding-y-large: '__COMPUTED__';
-@btn-padding-x-large: 20px;
-
-// disabled button
-@btn-disabled-bg: '__COMPUTED__';
-@btn-disabled-shadow-color: '__COMPUTED__';
-@btn-disabled-shadow: '__COMPUTED__';
-@btn-disabled-shadow-arrow: '__COMPUTED__';
-@btn-disabled-text-color: #a0a0a0;
-
-// checked button
-@btn-checked-bg: #737373;
-@btn-checked-text-color: #fff;
-@btn-checked-shadow-color-arrow: rgba(0, 0, 0, 0.3);
-@btn-checked-shadow: '__COMPUTED__';
-@btn-shadow-checked-arrow: 1px -1px 0 0 rgba(0, 0, 0, 0.6), inset 0 4px 2px -3px rgba(0, 0, 0, 0.3);
-@btn-shadow-checked-arrow-left: 1px -1px 0 0 rgba(0, 0, 0, 0.6), inset -4px 0 2px -3px rgba(0, 0, 0, 0.3);
-
-// use default
-@btn-default-bg-start: #fff;
-@btn-default-bg-end: #ebebeb;
-@btn-default-bg-arrow-start: #fff;
-@btn-default-bg-arrow-end: #ebebeb;
-@btn-default-checked-shadow-arrow: '__COMPUTED__';
-@btn-default-text-color: none;
-@btn-default-hover-bg: none;
-@btn-default-hover-border-color: none;
-@btn-default-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15);
-@btn-default-shadow-arrow: 1.2px -1px 0 0 rgba(0, 0, 0, 0.15), 1px 0 0 0 rgba(0, 0, 0, 0.15);
-@btn-default-shadow-arrow-left: 1px -1px 0 0 rgba(0, 0, 0, 0.15), 0 -1px 0 0 rgba(0, 0, 0, 0.15);
-@btn-default-hover-bg-start: #f2f2f2;
-@btn-default-hover-bg-end: #dfdfdf;
-@btn-default-hover-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.2);
-@btn-default-hover-shadow-arrow: 1px -1px 0 0 rgba(0, 0, 0, 0.15), 1px 0 0 0 rgba(0, 0, 0, 0.2);
-@btn-default-hover-shadow-arrow-left: 1px -1px 0 0 rgba(0, 0, 0, 0.15), 0 -1px 0 0 rgba(0, 0, 0, 0.2);
-@btn-default-active-bg: #e1e1e1;
-@btn-default-active-border-color: none;
-@btn-default-border: 0px solid rgba(0, 0, 0, 0.15);
-@btn-default-active-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.2),
-  inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
-@btn-default-active-shadow-arrow: 0 -2px 0 -1px rgba(0, 0, 0, 0.1), 1px -1px 0 0 rgba(0, 0, 0, 0.2),
-  inset 0 4px 5px -4px rgba(0, 0, 0, 0.1);
-@btn-default-active-shadow-arrow-left: 0 -1px 0 0 rgba(0, 0, 0, 0.1), 1px -0.3px 0 0 rgba(0, 0, 0, 0.2),
-  inset -4px 0 5px -4px rgba(0, 0, 0, 0.2);
-
-// use success
-@btn-success-bg: #419d14;
-@btn-success-bg-start: #4ba91d;
-@btn-success-bg-arrow-start: #4ba91d;
-@btn-success-bg-arrow-end: #37910b;
-@btn-success-bg-end: #37910b;
-@btn-success-text-color: #fff;
-@btn-success-hover-bg: none;
-@btn-success-disabled-bg: none;
-@btn-success-border: 0px solid transparent;
-@btn-success-shadow: 0 0 0 1px rgba(25, 103, 6, 0.7), 0 1px 0 0 rgba(21, 80, 7, 0.5);
-@btn-success-shadow-arrow: 1px -1px 0 0 rgba(25, 103, 6, 0.7), 1px 0 0 0 rgba(21, 80, 7, 0.5);
-@btn-success-shadow-arrow-left: 1px -1px 0 0 rgba(25, 103, 6, 0.7), 0 -1px 0 0 rgba(21, 80, 7, 0.5);
-@btn-success-hover-bg-start: #3b8d13;
-@btn-success-hover-bg-end: #317e0b;
-@btn-success-hover-shadow: 0 0 0 1px rgba(7, 73, 1, 0.7), 0 1px 0 0 rgba(16, 70, 4, 0.3);
-@btn-success-hover-shadow-arrow: 1px -1px 0 0 rgba(7, 73, 1, 0.7), 1px 0 0 0 rgba(16, 70, 4, 0.3);
-@btn-success-hover-shadow-arrow-left: 1px -1px 0 0 rgba(7, 73, 1, 0.7), 0 -1px 0 0 rgba(16, 70, 4, 0.3);
-@btn-success-active-bg: #35840e;
-@btn-success-active-shadow: 0 0 0 1px rgba(4, 63, 0, 0.75), 0 -1px 0 0 rgba(9, 32, 4, 0.6),
-  inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
-@btn-success-active-shadow-arrow: 1px -1px 0 0 rgba(4, 63, 0, 0.75), 0 -2px 0 -1px rgba(9, 32, 4, 0.6),
-  inset 0 4px 5px -4px rgba(0, 0, 0, 0.1);
-@btn-success-active-shadow-arrow-left: 1px -1px 0 0 rgba(4, 63, 0, 0.75), 0 0 0 -1px rgba(9, 32, 4, 0.6),
-  inset -4px 0 5px -4px rgba(0, 0, 0, 0.2);
-
-// use primary
-@btn-primary-bg: #1e8dd4;
-@btn-primary-bg-start: #2899ea;
-@btn-primary-bg-arrow-start: #2899ea;
-@btn-primary-bg-end: #167ac1;
-@btn-primary-bg-arrow-end: #167ac1;
-@btn-primary-text-color: #fff;
-@btn-primary-hover-bg: none;
-@btn-primary-disabled-bg: none;
-@btn-primary-border: 0px solid transparent;
-@btn-primary-shadow: 0 0 0 1px rgba(14, 81, 129, 0.7), 0 1px 0 0 rgba(7, 37, 80, 0.5);
-@btn-primary-shadow-arrow: 1px -1px 0 0 rgba(14, 81, 129, 0.7), 1px 0 0 0 rgba(7, 37, 80, 0.5);
-@btn-primary-shadow-arrow-left: 1px -1px 0 0 rgba(14, 81, 129, 0.7), 0 -1px 0 0 rgba(7, 37, 80, 0.5);
-@btn-primary-hover-bg-start: #0087d5;
-@btn-primary-hover-bg-end: #167ac1;
-@btn-primary-hover-shadow: 0 0 0 1px rgba(5, 60, 99, 0.7), 0 1px 0 0 rgba(7, 37, 80, 0.3);
-@btn-primary-hover-shadow-arrow: 1px -1px 0 0 rgba(5, 60, 99, 0.7), 1px 0 0 0 rgba(7, 37, 80, 0.3);
-@btn-primary-hover-shadow-arrow-left: 1px -1px 0 0 rgba(5, 60, 99, 0.7), 0 -1px 0 0 rgba(7, 37, 80, 0.3);
-@btn-primary-active-bg: #0079c3;
-@btn-primary-active-shadow: 0 0 0 1px rgba(10, 63, 99, 0.75), 0 -1px 0 0 rgba(8, 45, 96, 0.5),
-  inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-@btn-primary-active-shadow-arrow: 1px -1px 0 0 rgba(10, 63, 99, 0.75), 0 -2px 0 -1px rgba(8, 45, 96, 0.5),
-  inset 0 4px 5px -4px rgba(0, 0, 0, 0.2);
-@btn-primary-active-shadow-arrow-left: 1px -1px 0 0 rgba(10, 63, 99, 0.75), 0 0 0 -1px rgba(8, 45, 96, 0.5),
-  inset -4px 0 5px -4px rgba(0, 0, 0, 0.2);
-
-// use danger
-@btn-danger-bg: #e14c30;
-@btn-danger-bg-start: #ec5438;
-@btn-danger-bg-arrow-start: #ec5438;
-@btn-danger-bg-end: #d44327;
-@btn-danger-bg-arrow-end: #d44327;
-@btn-danger-text-color: #fff;
-@btn-danger-hover-bg: none;
-@btn-danger-disabled-bg: none;
-@btn-danger-border: 0px solid transparent;
-@btn-danger-shadow: 0 0 0 1px rgba(173, 15, 0, 0.7), 0 1px 0 0 rgba(0, 0, 0, 0.4);
-@btn-danger-shadow-arrow: 1px -1px 0 0 rgba(173, 15, 0, 0.7), 1px 0 0 0 rgba(0, 0, 0, 0.4);
-@btn-danger-shadow-arrow-left: 1px -1px 0 0 rgba(173, 15, 0, 0.7), 0 -1px 0 0 rgba(0, 0, 0, 0.4);
-@btn-danger-hover-bg-start: #d44227;
-@btn-danger-hover-bg-end: #c73013;
-@btn-danger-hover-shadow: 0 0 0 1px rgba(145, 0, 0, 0.7), 0 1px 0 0 rgba(90, 3, 3, 0.4);
-@btn-danger-hover-shadow-arrow: 1px -1px 0 0 rgba(145, 0, 0, 0.7), 1px 0 0 0 rgba(90, 3, 3, 0.4);
-@btn-danger-hover-shadow-arrow-left: 1px -1px 0 0 rgba(145, 0, 0, 0.7), 0 -1px 0 0 rgba(90, 3, 3, 0.4);
-@btn-danger-active-bg: #cd381b;
-@btn-danger-active-shadow: 0 0 0 1px rgba(108, 7, 7, 0.75), 0 -1px 0 0 rgba(90, 3, 3, 0.4),
-  inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
-@btn-danger-active-shadow-arrow: 1px -1px 0 0 rgba(108, 7, 7, 0.75), 0 -2px 0 -1px rgba(90, 3, 3, 0.4),
-  inset 0 4px 5px -4px rgba(0, 0, 0, 0.1);
-@btn-danger-active-shadow-arrow-left: 1px -1px 0 0 rgba(108, 7, 7, 0.75), 0 0 0 -1px rgba(90, 3, 3, 0.4),
-  inset -4px 0 5px -4px rgba(0, 0, 0, 0.1);
-
-// use pay
-@btn-pay-bg: #ffc943;
-@btn-pay-bg-start: #ffd54b;
-@btn-pay-bg-arrow-start: #ffd54b;
-@btn-pay-bg-end: #ffbb39;
-@btn-pay-bg-arrow-end: #ffbb39;
-@btn-pay-text-color: none;
-@btn-pay-hover-bg: none;
-@btn-pay-disabled-bg: none;
-@btn-pay-border: 0px solid transparent;
-@btn-pay-shadow: 0 0 0 1px rgba(238, 169, 34, 0.7), 0 1px 0 0 rgba(77, 16, 0, 0.56);
-@btn-pay-shadow-arrow: 1px -1px 0 0 rgba(238, 169, 34, 0.7), 1px -0.3px 0 0 rgba(77, 16, 0, 0.56);
-@btn-pay-shadow-arrow-left: 1px -1px 0 0 rgba(238, 169, 34, 0.7), 0.2px -1px 0 -0.3px rgba(77, 16, 0, 0.56);
-@btn-pay-hover-bg-start: #ffbd3a;
-@btn-pay-hover-bg-end: #f8a91d;
-@btn-pay-hover-shadow: 0 0 0 1px rgba(227, 142, 8, 0.7), 0 1px 0 0 rgba(93, 20, 3, 0.4);
-@btn-pay-hover-shadow-arrow: 1px -1px 0 0 rgba(227, 142, 8, 0.7), 1px -0.3px 0 0 rgba(93, 20, 3, 0.4);
-@btn-pay-hover-shadow-arrow-left: 1px -1px 0 0 rgba(227, 142, 8, 0.7), 0 -1px 0 0 rgba(93, 20, 3, 0.4);
-@btn-pay-active-bg: #fbb028;
-@btn-pay-active-shadow: 0 0 0 1px rgba(210, 144, 0, 0.7), 0 -1px 0 0 rgba(0, 0, 0, 0.44),
-  inset 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-@btn-pay-active-shadow-arrow: 1px -1px 0 0 rgba(210, 144, 0, 0.7), 0 -2px 0 -1px rgba(0, 0, 0, 0.44),
-  inset 0 4px 5px -4px rgba(0, 0, 0, 0.05);
-@btn-pay-active-shadow-arrow-left: 1px -1px 0 0 rgba(210, 144, 0, 0.7), 2px -0.3px 0 -1px rgba(0, 0, 0, 0.44),
-  inset -4px 0 5px -4px rgba(0, 0, 0, 0.05);
-
-//Button size small
-
-@btn-small-arrow-length: 18px;
-@btn-small-arrow-top: 7px;
-@btn-small-arrow-right: -8.8px;
-@btn-small-arrow-left: -8px;
-@btn-small-arrow-border-radius: 2px 2px 2px 16px;
-@btn-small-arrow-bg: linear-gradient(-54deg, transparent 48%, #ccc 0, #ccc 72%, transparent 0);
-@btn-small-arrow-left-loading-delay: 0.23s;
-
-//Button size medium
-@btn-medium-arrow-left: -9.8px;
-@btn-medium-arrow-right: -10px;
-@btn-medium-arrow-left-loading-left: -208px;
-@btn-medium-arrow-transform: rotate(53deg) skewX(24deg) skewY(8deg);
-@btn-medium-arrow-bg: linear-gradient(-58deg, transparent 47.5%, #ccc 0, #ccc 70.5%, transparent 0);
-@btn-deprecated-size-medium-padding-shift-ie: 1;
-@btn-deprecated-size-medium-font-size: 16px;
-@btn-deprecated-size-medium-padding-shift: 1;
-@btn-medium-arrow-left-loading-delay: 0.2s;
-
-//Button size large
-@btn-large-arrow-left: -10px;
-@btn-large-arrow-transform: rotate(53deg) skewX(25deg) skewY(10deg);
-@btn-large-arrow-bg: linear-gradient(-56deg, transparent 48.2%, #ccc 0, #ccc 63.4%, transparent 0);
-@btn-large-arrow-left-loading-delay: 0s;
-
-// Select
-@slt-placeholder-color: #a0a0a0;
-
-// Tabs
-@tab-color-focus: '__COMPUTED__';
-@tab-color-error: '__COMPUTED__';
-@tab-color-warning: '__COMPUTED__';
-@tab-color-success: '__COMPUTED__';
-@tab-color-primary: '__COMPUTED__';
-@tab-color-hover: '__COMPUTED__';
-@tab-color-hover-error: '__COMPUTED__';
-@tab-color-hover-warning: '__COMPUTED__';
-@tab-color-hover-success: '__COMPUTED__';
-@tab-color-hover-primary: '__COMPUTED__';
-
-// Tooltip
-@tooltip-close-btn-color: rgba(0, 0, 0, 0.374); //#A0A0A0
-@tooltip-close-btn-hover-color: rgba(0, 0, 0, 0.5); //#808080
-
-// Modal
-@modal-back-bg: #333;
-@modal-back-opacity: 0.6;
-@modal-close-button-color: #808080;
-@modal-close-button-disabled-color: #8b8b8b;
-@modal-close-button-hover-color: #333;
-@modal-fixed-header-bg: #fff;
-@modal-fixed-header-shadow: 0 1px 10px rgba(0, 0, 0, 1);
-@modal-fixed-footer-shadow: 0 -1px 10px rgba(0, 0, 0, 1);
-@modal-footer-bg: #e9e9e9;
-@modal-adaptive-threshold: 425px;
-
-// SidePage
-@side_page-footer-panel-bg: #e9e9e9;
-@side_page-close-button-color: rgba(0, 0, 0, 0.374);
-@side_page-close-button-hover-color: rgba(0, 0, 0, 0.5);
-@side_page-container-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-
-// DateInput
-@date_input-icon-color: #333;
-@date_input-mask-color: #b8b8b8;
-@date_input-component-selected-bg-color: #cae0f4;
-
-// Calendar
-@calendar-cell-bg: white;
-@calendar-cell-hover-bg-color: '__COMPUTED__';
-@calendar-cell-hover-color: white;
-@calendar-cell-active-hover-color: white;
-@calendar-cell-weekend-color: #f00;
-@calendar-cell-today-border: 1px solid #8b8b8b;
-@calendar-cell-selected-bg-color: #e9e9e9;
-@calendar-cell-selected-font-color: inherit;
-@calendar-month-header-sticked-bg-color: white;
-@calendar-month-title-border-bottom-color: #dfdede;
-
-// DateSelect
-@date-select-menu-bg: '__COMPUTED__';
-@date-select-menu-item-bg-active: '__COMPUTED__';
-@date-select-menu-item-bg-selected: #ececec;
-@date-select-menu-item-bg-disabled: '__COMPUTED__';
-@date-select-menu-item-font-active: '__COMPUTED__';
-@date-select-menu-item-font-selected: '__COMPUTED__';
-@date-select-menu-item-font-disabled: '__COMPUTED__';
-
-// DatePicker
-@date_picker-open-btn-color: #333;
-
-// Picker
-@picker-bg: #fff;
-@picker-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.2);
-@picker-today-wrapper-bg-color: white;
-@picker-today-wrapper-border-top: 1px solid #dfdede;
-@picker-today-wrapper-hover-bg-color: #f5f5f5;
-
-// Paging
-@paging-dots-color: gray;
-@paging-forward-link-color: '__COMPUTED__';
-@paging-forward-link-disabled-color: '__COMPUTED__';
-@paging-page-link-active-bg: rgba(0, 0, 0, 0.09);
-@paging-page-link-active-color: black;
-@paging-page-link-hover-bg: rgba(0, 0, 0, 0.05);
-@paging-page-link-hint-color: #bbb;
-
-// MenuSeparator
-@menu_separator-border-color: #e6e6e6;
-
-// Toast
-@toast-bg: rgba(51, 51, 51, 0.8);
-@toast-color: white;
-@toast-link-color: #80caff;
-@toast-close-color: #a0a0a0;
-@toast-close-hover-color: white;
-
-// Topbar
-@tb-bg: #fff;
-@tb-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 8px 0 rgba(0, 0, 0, 0.1);
-@td-divider-bg: #dfdfdf;
-
-// Logo
-@logo-color: #000;
-@logo-hover-color: #000;
-
-// Dropdown`s menu
-@menu-item-padding-for-icon: 36px;
-@menu-border: 1px solid #d5d5d5;
-@menu-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-
-// Toggle
-@toggle-bg: linear-gradient(-180deg, #fff, #ebebeb);
-@toggle-bg-checked: #3072c4;
-@toggle-bg-focus: linear-gradient(-180deg, #f1f1f1, #dedede);
-@toggle-bg-warning: '__COMPUTED__';
-@toggle-bg-error: '__COMPUTED__';
-@toggle-bg-active: '__COMPUTED__';
-@toggle-focus-shadow-color: '__COMPUTED__';
-@toggle-border-color: #d0d0d0;
-@toggle-bg-disabled: '__COMPUTED__';
-@toggle-bg-hover: '__COMPUTED__';
-
-// Popup
-@popup-border-radius: 2px;
-@popup-border: none;
-@popup-border-color: transparent;
-@popup-drop-shadow: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
-@popup-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.2);
-@popup-text-color: 'inherit';
-
-// Input
-@input-text-color: none;
-@input-icon-color: '__COMPUTED__';
-@input-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05);
-@input-bg: white;
-@input-disabled-border-color: '__COMPUTED__';
-@input-color: '__COMPUTED__';
-@input-disabled-color: '__COMPUTED__';
-@input-border-width: '__COMPUTED__';
-@input-border-top-color: '__COMPUTED__';
-
-// Checkbox
-@chb-bg: '__COMPUTED__';
-@chb-bg-start: #fdfdfd;
-@chb-bg-end: #ededed;
-@chb-bg-hover: '__COMPUTED__';
-@chb-bg-active: '__COMPUTED__';
-@chb-indeterminate-bg: #404040;
-@chb-indeterminate-border-radius: 1px;
-@chb-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
-@chb-shadow-active: 0 1px 0 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
-@chb-shadow-disabled: 0 0 0 1px rgba(0, 0, 0, 0.15);
-@chb-border: none;
-@chb-border-radius: 1px;
-@chb-shadow-width: 2px;
-@chb-checked-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
-@chb-shadow-hover: '__COMPUTED__';
-@chb-checked-color: '__COMPUTED__';
-@chb-checked-hover-shadow: '__COMPUTED__';
-
-// Textarea
-@textarea-bg: '__COMPUTED__';
-@textarea-color: '__COMPUTED__';
-@textarea-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05);
-@textarea-border-top-color: '__COMPUTED__';
-@textarea-disabled-color: '__COMPUTED__';
-@textarea-disabled-border-color: '__COMPUTED__';
-
-// Radio
-@radio-size: 16px;
-@radio-vertical-align: -2px;
-@radio-bg-image: linear-gradient(-180deg, #fff 0, #ebebeb 100%);
-@radio-hover-bg: linear-gradient(-180deg, #f2f2f2 0, #dfdfdf 100%);
-@radio-active-bg: linear-gradient(-180deg, #e1e1e1 0, #e1e1e1 100%);
-@radio-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15);
-@radio-border: 0 none;
-@radio-hover-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.2);
-@radio-active-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
-@radio-focus-shadow: none;
-@radio-checked-bg-color: transparent;
-@radio-checked-bullet-color: #404040;
-@radio-disabled-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
-@radio-label-display: inline-table;
-
-// Specificity
-@specificity-level: 0;
-
-@import (optional) '~react-ui-theme';
-
-@value brandXLight: @brand_x_light;
-@value brandLight: @brand_light;
-@value brand: @brand;
-@value brandDark: @brand_dark;
-@value brandXDark: @brand_x_dark;
-@value white: @white;
-@value grayXxLight: @gray_xx_light;
-@value grayXLight: @gray_x_light;
-@value grayLight: @gray_light;
-@value gray: @gray;
-@value grayDark: @gray_dark;
-@value black: @black;
-@value blueXxLight: @blue_xx_light;
-@value blueLight: @blue_light;
-@value blue: @blue;
-@value blueDark: @blue_dark;
-@value blueXDark: @blue_x_dark;
-@value greenXxLight: @green_xx_light;
-@value green: @green;
-@value greenDark: @green_dark;
-@value redXxLight: @red_xx_light;
-@value red: @red;
-@value redDark: @red_dark;
-@value yellowXxLight: @yellow_xx_light;
-@value yellow: @yellow;
-@value yellowDark: @yellow_dark;
-@value bgDefault: @bg-default;
-@value bgDisabled: @bg-disabled;
-@value errorMain: @error-main;
-@value errorSecondary: @error-secondary;
-@value errorText: @error-text;
-@value warningMain: @warning-main;
-@value warningSecondary: @warning-secondary;
-@value warningText: @warning-text;
-@value borderColorFocusLight: @border-color-focus-light;
-@value borderColorGrayDark: @border-color-gray-dark;
-@value borderColorGrayLight: @border-color-gray-light;
-@value placeholderColor: @placeholder-color;
-@value outlineColorFocus: @outline-color-focus;
-@value placeholderColorLight: @placeholder-color-light;
-@value blinkColor: @blink-color;
-@value controlBorderWidth: @control-border-width;
-@value controlLineHeightSmall: @control-line-height-small;
-@value controlLineHeightMedium: @control-line-height-medium;
-@value controlLineHeightLarge: @control-line-height-large;
-@value controlPaddingYSmall: @control-padding-y-small;
-@value controlPaddingYMedium: @control-padding-y-medium;
-@value controlPaddingYLarge: @control-padding-y-large;
-@value textColorDefault: @text-color-default;
-@value textColorInvert: @text-color-invert;
-@value textColorDisabled: @text-color-disabled;
-@value fontSizeSmall: @font-size-small;
-@value fontSizeMedium: @font-size-medium;
-@value fontSizeLarge: @font-size-large;
-@value linkColor: @link-color;
-@value linkActiveColor: @link-active-color;
-@value linkHoverTextDecoration: @link-hover-text-decoration;
-@value dropdownMenuSelectedBg: @dropdown-menu-selected-bg;
-@value tokenDisabledBg: @token-disabled-bg;
-@value loaderBg: @loader-bg;
-@value loaderOpacity: @loader-opacity;
-@value btnWrapPadding: @btn-wrap-padding;
-@value btnHeightShift: @btn-height-shift;
-@value btnLinkBorderRadius: @btn-link-border-radius;
-@value btnFocusShadowWidth: @btn-focus-shadow-width;
-@value btnFocusBorder: @btn-focus-border;
-@value btnDisabledBg: @btn-disabled-bg;
-@value btnDisabledShadowColor: @btn-disabled-shadow-color;
-@value btnDisabledShadow: @btn-disabled-shadow;
-@value btnDisabledShadowArrow: @btn-disabled-shadow-arrow;
-@value btnDisabledTextColor: @btn-disabled-text-color;
-@value btnCheckedBg: @btn-checked-bg;
-@value btnCheckedTextColor: @btn-checked-text-color;
-@value btnCheckedShadow: @btn-checked-shadow;
-@value btnCheckedShadowColorArrow: @btn-checked-shadow-color-arrow;
-@value btnCheckedShadowArrow: @btn-shadow-checked-arrow;
-@value btnCheckedShadowArrowLeft: @btn-shadow-checked-arrow-left;
-@value btnBorderRadius: @btn-border-radius;
-@value btnSmallBorderRadius: @btn-small-border-radius;
-@value btnPaddingYSmall: @btn-padding-y-small;
-@value btnPaddingXSmall: @btn-padding-x-small;
-@value btnPaddingYMedium: @btn-padding-y-medium;
-@value btnPaddingXMedium: @btn-padding-x-medium;
-@value btnPaddingYLarge: @btn-padding-y-large;
-@value btnPaddingXLarge: @btn-padding-x-large;
-@value btnDefaultBgStart: @btn-default-bg-start;
-@value btnDefaultBgEnd: @btn-default-bg-end;
-@value btnSmallArrowLength: @btn-small-arrow-length;
-@value btnSmallArrowRight: @btn-small-arrow-right;
-@value btnSmallArrowLeft: @btn-small-arrow-left;
-@value btnSmallArrowBorderRadius: @btn-small-arrow-border-radius;
-@value btnMediumArrowLeft: @btn-medium-arrow-left;
-@value btnMediumArrowLeftLoadingLeft: @btn-medium-arrow-left-loading-left;
-@value btnMediumArrowTransform: @btn-medium-arrow-transform;
-@value btnDeprecatedSizeMediumFontSize: @btn-deprecated-size-medium-font-size;
-@value btnDeprecatedSizeMediumPaddingShift: @btn-deprecated-size-medium-padding-shift;
-@value btnLargeArrowLeft: @btn-large-arrow-left;
-@value btnLargeArrowTransform: @btn-large-arrow-transform;
-@value btnLargeArrowBg: @btn-large-arrow-bg;
-@value btnDefaultBgArrowStart: @btn-default-bg-arrow-start;
-@value btnDefaultBgArrowEnd: @btn-default-bg-arrow-end;
-@value btnDefaultCheckedShadowArrow: @btn-default-checked-shadow-arrow;
-@value btnDefaultTextColor: @btn-default-text-color;
-@value btnDefaultHoverBg: @btn-default-hover-bg;
-@value btnDefaultHoverBorderColor: @btn-default-hover-border-color;
-@value btnDefaultActiveBorderColor: @btn-default-active-border-color;
-@value btnDefaultBorder: @btn-default-border;
-@value btnDefaultShadow: @btn-default-shadow;
-@value btnDefaultShadowArrow: @btn-default-shadow-arrow;
-@value btnDefaultShadowArrowLeft: @btn-default-shadow-arrow-left;
-@value btnDefaultHoverBgStart: @btn-default-hover-bg-start;
-@value btnDefaultHoverBgEnd: @btn-default-hover-bg-end;
-@value btnDefaultHoverShadow: @btn-default-hover-shadow;
-@value btnDefaultHoverShadowArrow: @btn-default-hover-shadow-arrow;
-@value btnDefaultHoverShadowArrowLeft: @btn-default-hover-shadow-arrow-left;
-@value btnDefaultActiveBg: @btn-default-active-bg;
-@value btnDefaultActiveShadow: @btn-default-active-shadow;
-@value btnDefaultActiveShadowArrow: @btn-default-active-shadow-arrow;
-@value btnDefaultActiveShadowArrowLeft: @btn-default-active-shadow-arrow-left;
-@value btnSuccessBg: @btn-success-bg;
-@value btnSuccessHoverBg: @btn-success-hover-bg;
-@value btnSuccessDisabledBg: @btn-success-disabled-bg;
-@value btnSuccessBorder: @btn-success-border;
-@value btnSuccessBgStart: @btn-success-bg-start;
-@value btnSuccessBgEnd: @btn-success-bg-end;
-@value btnSuccessBgArrowStart: @btn-success-bg-arrow-start;
-@value btnSuccessBgArrowEnd: @btn-success-bg-arrow-end;
-@value btnSuccessTextColor: @btn-success-text-color;
-@value btnSuccessShadow: @btn-success-shadow;
-@value btnSuccessShadowArrow: @btn-success-shadow-arrow;
-@value btnSuccessShadowArrowLeft: @btn-success-shadow-arrow-left;
-@value btnSuccessHoverBgStart: @btn-success-hover-bg-start;
-@value btnSuccessHoverBgEnd: @btn-success-hover-bg-end;
-@value btnSuccessHoverShadow: @btn-success-hover-shadow;
-@value btnSuccessHoverShadowArrow: @btn-success-hover-shadow-arrow;
-@value btnSuccessHoverShadowArrowLeft: @btn-success-hover-shadow-arrow-left;
-@value btnSuccessActiveBg: @btn-success-active-bg;
-@value btnSuccessActiveShadow: @btn-success-active-shadow;
-@value btnSuccessActiveShadowArrow: @btn-success-active-shadow-arrow;
-@value btnSuccessActiveShadowArrowLeft: @btn-success-active-shadow-arrow-left;
-@value btnPrimaryBg: @btn-primary-bg;
-@value btnPrimaryHoverBg: @btn-primary-hover-bg;
-@value btnPrimaryDisabledBg: @btn-primary-disabled-bg;
-@value btnPrimaryBorder: @btn-primary-border;
-@value btnPrimaryBgStart: @btn-primary-bg-start;
-@value btnPrimaryBgEnd: @btn-primary-bg-end;
-@value btnPrimaryBgArrowStart: @btn-primary-bg-arrow-start;
-@value btnPrimaryBgArrowEnd: @btn-primary-bg-arrow-end;
-@value btnPrimaryTextColor: @btn-primary-text-color;
-@value btnPrimaryShadow: @btn-primary-shadow;
-@value btnPrimaryShadowArrow: @btn-primary-shadow-arrow;
-@value btnPrimaryShadowArrowLeft: @btn-primary-shadow-arrow-left;
-@value btnPrimaryHoverBgStart: @btn-primary-hover-bg-start;
-@value btnPrimaryHoverBgEnd: @btn-primary-hover-bg-end;
-@value btnPrimaryHoverShadow: @btn-primary-hover-shadow;
-@value btnPrimaryHoverShadowArrow: @btn-primary-hover-shadow-arrow;
-@value btnPrimaryHoverShadowArrowLeft: @btn-primary-hover-shadow-arrow-left;
-@value btnPrimaryActiveBg: @btn-primary-active-bg;
-@value btnPrimaryActiveShadow: @btn-primary-active-shadow;
-@value btnPrimaryActiveShadowArrow: @btn-primary-active-shadow-arrow;
-@value btnPrimaryActiveShadowArrowLeft: @btn-primary-active-shadow-arrow-left;
-@value btnDangerBg: @btn-danger-bg;
-@value btnDangerHoverBg: @btn-danger-hover-bg;
-@value btnDangerDisabledBg: @btn-danger-disabled-bg;
-@value btnDangerBorder: @btn-danger-border;
-@value btnDangerBgStart: @btn-danger-bg-start;
-@value btnDangerBgEnd: @btn-danger-bg-end;
-@value btnDangerBgArrowStart: @btn-danger-bg-arrow-start;
-@value btnDangerBgArrowEnd: @btn-danger-bg-arrow-end;
-@value btnDangerTextColor: @btn-danger-text-color;
-@value btnDangerShadow: @btn-danger-shadow;
-@value btnDangerShadowArrow: @btn-danger-shadow-arrow;
-@value btnDangerShadowArrowLeft: @btn-danger-shadow-arrow-left;
-@value btnDangerHoverBgStart: @btn-danger-hover-bg-start;
-@value btnDangerHoverBgEnd: @btn-danger-hover-bg-end;
-@value btnDangerHoverShadow: @btn-danger-hover-shadow;
-@value btnDangerHoverShadowArrow: @btn-danger-hover-shadow-arrow;
-@value btnDangerHoverShadowArrowLeft: @btn-danger-hover-shadow-arrow-left;
-@value btnDangerActiveBg: @btn-danger-active-bg;
-@value btnDangerActiveShadow: @btn-danger-active-shadow;
-@value btnDangerActiveShadowArrow: @btn-danger-active-shadow-arrow;
-@value btnDangerActiveShadowArrowLeft: @btn-danger-active-shadow-arrow-left;
-@value btnPayBg: @btn-pay-bg;
-@value btnPayHoverBg: @btn-pay-hover-bg;
-@value btnPayDisabledBg: @btn-pay-disabled-bg;
-@value btnPayBorder: @btn-pay-border;
-@value btnPayBgStart: @btn-pay-bg-start;
-@value btnPayBgEnd: @btn-pay-bg-end;
-@value btnPayBgArrowStart: @btn-pay-bg-arrow-start;
-@value btnPayBgArrowEnd: @btn-pay-bg-arrow-end;
-@value btnPayTextColor: @btn-pay-text-color;
-@value btnPayShadow: @btn-pay-shadow;
-@value btnPayShadowArrow: @btn-pay-shadow-arrow;
-@value btnPayShadowArrowLeft: @btn-pay-shadow-arrow-left;
-@value btnPayHoverBgStart: @btn-pay-hover-bg-start;
-@value btnPayHoverBgEnd: @btn-pay-hover-bg-end;
-@value btnPayHoverShadow: @btn-pay-hover-shadow;
-@value btnPayHoverShadowArrow: @btn-pay-hover-shadow-arrow;
-@value btnPayHoverShadowArrowLeft: @btn-pay-hover-shadow-arrow-left;
-@value btnPayActiveBg: @btn-pay-active-bg;
-@value btnPayActiveShadow: @btn-pay-active-shadow;
-@value btnPayActiveShadowArrow: @btn-pay-active-shadow-arrow;
-@value btnPayActiveShadowArrowLeft: @btn-pay-active-shadow-arrow-left;
-@value btnDeprecatedSizeMediumPaddingShiftIe: @btn-deprecated-size-medium-padding-shift-ie;
-@value btnSmallArrowLength: @btn-small-arrow-length;
-@value btnSmallArrowTop: @btn-small-arrow-top;
-@value btnSmallArrowRight: @btn-small-arrow-right;
-@value btnSmallArrowLeft: @btn-small-arrow-left;
-@value btnSmallArrowLeftLoadingDelay: @btn-small-arrow-left-loading-delay;
-@value btnSmallArrowBorderRadius: @btn-small-arrow-border-radius;
-@value btnSmallArrowBg: @btn-small-arrow-bg;
-@value btnMediumArrowLeft: @btn-medium-arrow-left;
-@value btnMediumArrowRight: @btn-medium-arrow-right;
-@value btnMediumArrowLeftLoadingLeft: @btn-medium-arrow-left-loading-left;
-@value btnMediumArrowTransform: @btn-medium-arrow-transform;
-@value btnMediumArrowBg: @btn-medium-arrow-bg;
-@value btnMediumArrowLeftLoadingDelay: @btn-medium-arrow-left-loading-delay;
-@value btnDeprecatedSizeMediumFontSize: @btn-deprecated-size-medium-font-size;
-@value btnDeprecatedSizeMediumPaddingShift: @btn-deprecated-size-medium-padding-shift;
-@value btnDeprecatedSizeMediumPaddingShiftIe: @btn-deprecated-size-medium-padding-shift-ie;
-@value btnLargeArrowLeft: @btn-large-arrow-left;
-@value btnLargeArrowTransform: @btn-large-arrow-transform;
-@value btnLargeArrowBg: @btn-large-arrow-bg;
-@value btnLargeArrowLeftLoadingDelay: @btn-large-arrow-left-loading-delay;
-@value sltPlaceholderColor: @slt-placeholder-color;
-@value tooltipCloseBtnColor: @tooltip-close-btn-color;
-@value tooltipCloseBtnHoverColor: @tooltip-close-btn-hover-color;
-@value modalBackBg: @modal-back-bg;
-@value modalBackOpacity: @modal-back-opacity;
-@value modalCloseButtonColor: @modal-close-button-color;
-@value modalCloseButtonDisabledColor: @modal-close-button-disabled-color;
-@value modalCloseButtonHoverColor: @modal-close-button-hover-color;
-@value modalFixedHeaderBg: @modal-fixed-header-bg;
-@value modalFixedHeaderShadow: @modal-fixed-header-shadow;
-@value modalFixedFooterShadow: @modal-fixed-footer-shadow;
-@value modalFooterBg: @modal-footer-bg;
-@value modalAdaptiveThreshold: @modal-adaptive-threshold;
-@value sidePageFooterPanelBg: @side_page-footer-panel-bg;
-@value sidePageCloseButtonColor: @side_page-close-button-color;
-@value sidePageCloseButtonHoverColor: @side_page-close-button-hover-color;
-@value sidePageContainerShadow: @side_page-container-shadow;
-@value dateInputIconColor: @date_input-icon-color;
-@value dateInputMaskColor: @date_input-mask-color;
-@value dateInputComponentSelectedBgColor: @date_input-component-selected-bg-color;
-@value calendarCellBg: @calendar-cell-bg;
-@value calendarCellHoverBgColor: @calendar-cell-hover-bg-color;
-@value calendarCellHoverColor: @calendar-cell-hover-color;
-@value calendarCellActiveHoverColor: @calendar-cell-active-hover-color;
-@value calendarCellWeekendColor: @calendar-cell-weekend-color;
-@value calendarCellTodayBorder: @calendar-cell-today-border;
-@value calendarCellSelectedBgColor: @calendar-cell-selected-bg-color;
-@value calendarCellSelectedFontColor: @calendar-cell-selected-font-color;
-@value calendarMonthHeaderStickedBgColor: @calendar-month-header-sticked-bg-color;
-@value calendarMonthTitleBorderBottomColor: @calendar-month-title-border-bottom-color;
-@value dateSelectMenuBg: @date-select-menu-bg;
-@value dateSelectMenuItemBgActive: @date-select-menu-item-bg-active;
-@value dateSelectMenuItemBgSelected: @date-select-menu-item-bg-selected;
-@value dateSelectMenuItemBgDisabled: @date-select-menu-item-bg-disabled;
-@value dateSelectMenuItemFontActive: @date-select-menu-item-font-active;
-@value dateSelectMenuItemFontSelected: @date-select-menu-item-font-selected;
-@value dateSelectMenuItemFontDisabled: @date-select-menu-item-font-disabled;
-@value datePickerOpenBtnColor: @date_picker-open-btn-color;
-@value pickerBg: @picker-bg;
-@value pickerShadow: @picker-shadow;
-@value pickerTodayWrapperBgColor: @picker-today-wrapper-bg-color;
-@value pickerTodayWrapperBorderTop: @picker-today-wrapper-border-top;
-@value pickerTodayWrapperHoverBgColor: @picker-today-wrapper-hover-bg-color;
-@value pagingDotsColor: @paging-dots-color;
-@value pagingPageLinkActiveBg: @paging-page-link-active-bg;
-@value pagingPageLinkActiveColor: @paging-page-link-active-color;
-@value pagingPageLinkHoverBg: @paging-page-link-hover-bg;
-@value pagingPageLinkHintColor: @paging-page-link-hint-color;
-@value menuSeparatorBorderColor: @menu_separator-border-color;
-@value toastBg: @toast-bg;
-@value toastColor: @toast-color;
-@value toastLinkColor: @toast-link-color;
-@value toastCloseColor: @toast-close-color;
-@value toastCloseHoverColor: @toast-close-hover-color;
-@value tbBg: @tb-bg;
-@value tbShadow: @tb-shadow;
-@value tdDividerBg: @td-divider-bg;
-@value logoColor: @logo-color;
-@value logoHoverColor: @logo-hover-color;
-@value menuItemPaddingForIcon: @menu-item-padding-for-icon;
-@value menuBorder: @menu-border;
-@value menuShadow: @menu-shadow;
-@value toggleBg: @toggle-bg;
-@value toggleBgDisabled: @toggle-bg-disabled;
-@value toggleBgHover: @toggle-bg-hover;
-@value toggleBgChecked: @toggle-bg-checked;
-@value toggleBgActive: @toggle-bg-active;
-@value toggleBorderColor: @toggle-border-color;
-@value btnMenuArrowColor: @btn-menu-arrow-color;
-@value popupBorder: @popup-border;
-@value popupBorderRadius: @popup-border-radius;
-@value popupBorderColor: @popup-border-color;
-@value popupDropShadow: @popup-drop-shadow;
-@value popupBoxShadow: @popup-box-shadow;
-@value popupTextColor: @popup-text-color;
-@value inputTextColor: @input-text-color;
-@value inputShadow: @input-shadow;
-@value inputBg: @input-bg;
-@value inputBorderTopColor: @input-border-top-color;
-@value inputDisabledBg: @input-disabled-color;
-@value inputDisabledBorderColor: @input-disabled-border-color;
-@value inputIconColor: @input-icon-color;
-@value inputColor: @input-color;
-@value chbBg: @chb-bg;
-@value chbBgStart: @chb-bg-start;
-@value chbBgEnd: @chb-bg-end;
-@value chbHoverBg: @chb-bg-hover;
-@value chbActiveBg: @chb-bg-active;
-@value chbIndeterminateBg: @chb-indeterminate-bg;
-@value chbIndeterminateBorderRadius: @chb-indeterminate-border-radius;
-@value chbShadow: @chb-shadow;
-@value chbShadowDisabled: @chb-shadow-disabled;
-@value chbShadowActive: @chb-shadow-active;
-@value chbBorder: @chb-border;
-@value chbShadowHover: @chb-shadow-hover;
-@value chbCheckedColor: @chb-checked-color;
-@value chbCheckedHoverShadow: @chb-checked-hover-shadow;
-@value chbBorderRadius: @chb-border-radius;
-@value chbShadowWidth: @chb-shadow-width;
-@value chbCheckedShadow: @chb-checked-shadow;
-@value specificityLevel: @specificity-level;
-@value bgActive: @bg-active;
-@value borderColorFocus: @border-color-focus;
-@value borderColorError: @border-color-error;
-@value borderColorWarning: @border-color-warning;
-@value controlHeightSmall: @control-height-small;
-@value controlHeightMedium: @control-height-medium;
-@value controlHeightLarge: @control-height-large;
-@value linkHoverColor: @link-hover-color;
-@value linkDisabledColor: @link-disabled-color;
-@value dropdownMenuHoverBg: @dropdown-menu-hover-bg;
-@value tabColorFocus: @tab-color-focus;
-@value tabColorError: @tab-color-error;
-@value tabColorWarning: @tab-color-warning;
-@value tabColorSuccess: @tab-color-success;
-@value tabColorPrimary: @tab-color-primary;
-@value tabColorHover: @tab-color-hover;
-@value tabColorHoverError: @tab-color-hover-error;
-@value tabColorHoverWarning: @tab-color-hover-warning;
-@value tabColorHoverSuccess: @tab-color-hover-success;
-@value tabColorHoverPrimary: @tab-color-hover-primary;
-@value pagingForwardLinkColor: @paging-forward-link-color;
-@value pagingForwardLinkDisabledColor: @paging-forward-link-disabled-color;
-@value toggleBgHover: @toggle-bg-focus;
-@value toggleBgWarning: @toggle-bg-warning;
-@value toggleBgError: @toggle-bg-error;
-@value toggleFocusShadowColor: @toggle-focus-shadow-color;
-@value textareaBg: @textarea-bg;
-@value textareaColor: @textarea-color;
-@value textareaShadow: @textarea-shadow;
-@value textareaBorderTopColor: @textarea-border-top-color;
-@value textareaDisabledBg: @textarea-disabled-color;
-@value textareaDisabledBorderColor: @textarea-disabled-border-color;
-@value radioSize: @radio-size;
-@value radioVerticalAlign: @radio-vertical-align;
-@value radioBgImage: @radio-bg-image;
-@value radioHoverBg: @radio-hover-bg;
-@value radioActiveBg: @radio-active-bg;
-@value radioBoxShadow: @radio-box-shadow;
-@value radioBorder: @radio-border;
-@value radioHoverShadow: @radio-hover-shadow;
-@value radioActiveShadow: @radio-active-shadow;
-@value radioFocusShadow: @radio-focus-shadow;
-@value radioCheckedBgColor: @radio-checked-bg-color;
-@value radioCheckedBulletColor: @radio-checked-bullet-color;
-@value radioDisabledShadow: @radio-disabled-shadow;
-@value radioLabelDisplay: @radio-label-display;