react-elegant-ui/esm/theme/presets/default/color.css

Elegant UI components, made by BEM best practices for react

.Theme_color_default {
    --color-base: #000; /* base content color on which depend color of text, icons, etc */
    --color-essential: #fff; /* background color */
    --color-project: #0366d6; /* project color for accents such as a action view */
    --color-phantom: #000; /* toning color on which depend borders, translucent typography, etc */
    --color-path: #04b; /* base color for link */
    --color-success: #00985f;
    --color-alert: #f33; /* error color affecting to background and typography */
    --color-warning: #f90;
    --color-fill-color-inverse: #000;
    --color-fill-color-overlay: rgba(0, 0, 0, 0.3);
    --color-fill-color-action: rgb(44, 141, 252);
    --color-fill-color-selection: rgb(124, 187, 253);
    --color-fill-color-hover: rgba(0, 0, 0, 0.15);
    --color-fill-color-border: rgba(0, 0, 0, 0.05);
    --color-fill-color-outline: #D518DA;
    --color-fill-color-stripe: rgba(0, 0, 0, 0.04);
    --color-fill-color-ghost: rgba(0, 0, 0, 0.08);
    --color-fill-color-default: #fff;
    --color-fill-color-tone: rgba(0, 0, 0, 0.9);
    --color-fill-color-soft: rgba(255, 255, 255, 0.97);
    --color-fill-color-success: #00985f;
    --color-fill-color-alert: #f33;
    --color-fill-color-warning: #f90;
    --color-fill-color-link: rgba(21, 126, 239, 0.4);
    --color-typo-primary: #000; /* color of the main text of default controls */
    --color-typo-inverse: #fff; /* contrast to primary color */
    --color-typo-secondary: rgba(0, 0, 0, 0.6); /* color of the secondary text */
    --color-typo-ghost: rgba(0, 0, 0, 0.3); /* color of the additional text */
    --color-typo-disabled: rgba(0, 0, 0, 0.3); /* color of the main text of disabled control */
    --color-typo-success: #00985f;
    --color-typo-warning: #f90;
    --color-typo-alert: rgb(224, 0, 0);
    --color-link-base: #04b;
    --color-link-external: #04b;
    --color-link-minor: rgb(102, 102, 153);
    --color-link-hover: #c00;
    --color-control-border-color-focus: rgb(179, 179, 179);
    --color-control-border-color-prism: #D518DA; /* border color for special focus such as keyboard focus */
    --color-control-border-color-shadow: rgba(153, 153, 153, 0.1);
    --color-control-border-color-alert-base: rgb(224, 0, 0);
    --color-control-border-color-alert-hover: rgb(255, 20, 20);
    --color-control-border-color-alert-focus: rgb(255, 82, 82);
    --color-control-typo-primary: #000;
    --color-control-typo-secondary: rgba(0, 0, 0, 0.6);
    --color-control-typo-ghost: rgba(0, 0, 0, 0.3);
    --color-control-typo-passive: #000;
    --color-control-typo-faint: rgb(255, 255, 255);
    --color-control-typo-disabled: rgb(128, 128, 128);
    --color-control-typo-link: #04b;
    --color-control-typo-alert: rgb(224, 0, 0);
    --color-control-type-default-fill-color-base: rgb(230, 230, 230);
    --color-control-type-default-fill-color-hover: rgb(217, 217, 217);
    --color-control-type-default-fill-color-disabled: rgb(242, 242, 242);
    --color-control-type-default-border-color-base: rgb(179, 179, 179);
    --color-control-type-default-border-color-hover: rgb(217, 217, 217);
    --color-control-type-default-border-color-disabled: rgb(232, 232, 232);
    --color-control-type-default-typo-base: #000;
    --color-control-type-default-typo-disabled: rgb(128, 128, 128);
    --color-control-type-action-fill-color-base: #0366d6;
    --color-control-type-action-fill-color-hover: rgb(9, 122, 251);
    --color-control-type-action-fill-color-disabled: rgb(180, 214, 254);
    --color-control-type-action-border-color-prism: #D518DA;
    --color-control-type-action-typo-base: #fff;
    --color-control-type-action-typo-hover: #fff;
    --color-control-type-action-typo-disabled: #fff;
    --color-control-type-input-fill-color-base: #fff;
    --color-control-type-input-fill-color-disabled: rgb(242, 242, 242);
    --color-control-type-input-border-color-base: rgb(217, 217, 217);
    --color-control-type-input-border-color-hover: rgb(204, 204, 204);
    --color-control-type-input-border-color-focus: rgb(179, 179, 179);
    --color-control-type-input-border-color-disabled: rgb(242, 242, 242);
    --color-control-type-input-typo-base: #000;
    --color-control-type-input-typo-disabled: rgb(128, 128, 128);
    --color-control-type-pseudo-fill-color-base: rgb(255, 255, 255);
    --color-control-type-pseudo-fill-color-hover: rgb(247, 247, 247);
    --color-control-type-pseudo-border-color-base: rgb(204, 204, 204);
    --color-control-type-passive-fill-color-base: #fff;
    --color-control-type-blank-fill-color-base: #fff;
    --color-control-type-blank-fill-color-hover: #fff;
    --color-control-type-blank-fill-color-disabled: rgb(242, 242, 242);
    --color-control-type-blank-border-color-base: rgb(217, 217, 217);
    --color-control-type-blank-border-color-hover: rgb(204, 204, 204);
    --color-control-type-blank-border-color-disabled: rgb(242, 242, 242);
    --color-control-type-faint-fill-color-base: #fff;
    --color-control-type-faint-fill-color-disabled: rgb(199, 199, 199);
    --color-control-type-link-fill-color-base: #04b;
    --color-control-type-link-fill-color-hover: rgba(0, 68, 187, 0.3);
    --color-control-type-link-border-color-base: rgba(0, 68, 187, 0.6);
    --color-control-type-link-border-color-hover: rgba(0, 68, 187, 0.6);
    --button-view-default-outline-color: #D518DA;
    --button-view-default-fill-color-base: rgb(230, 230, 230);
    --button-view-default-fill-color-disabled: rgb(242, 242, 242);
    --button-view-default-fill-color-hovered: rgb(217, 217, 217);
    --button-view-default-typo-color-base: #000;
    --button-view-default-typo-color-disabled: rgb(128, 128, 128);
    --button-view-action-outline-color: #D518DA;
    --button-view-action-fill-color-base: #0366d6;
    --button-view-action-fill-color-disabled: rgb(180, 214, 254);
    --button-view-action-fill-color-hovered: rgb(9, 122, 251);
    --button-view-action-typo-color-base: #fff;
    --button-view-action-typo-color-disabled: #fff;
    --button-view-action-typo-color-hovered: #fff;
    --button-view-clear-outline-color: #D518DA;
    --button-view-clear-fill-color-disabled: rgb(242, 242, 242);
    --button-view-clear-typo-color-base: #000;
    --button-view-clear-typo-color-disabled: rgb(128, 128, 128);
    --button-view-pseudo-outline-color: #D518DA;
    --button-view-pseudo-border-color-base: rgb(204, 204, 204);
    --button-view-pseudo-fill-color-base: rgb(255, 255, 255);
    --button-view-pseudo-fill-color-disabled: rgb(242, 242, 242);
    --button-view-pseudo-fill-color-hovered: rgb(247, 247, 247);
    --button-view-pseudo-typo-color-base: #000;
    --button-view-pseudo-typo-color-disabled: rgb(128, 128, 128);
    --button-view-link-outline-color: #D518DA;
    --button-view-link-typo-color-base: #04b;
    --button-view-link-typo-color-disabled: rgb(128, 128, 128);
    --checkbox-outline-color: #D518DA;
    --checkbox-box-fill-color-base: rgb(230, 230, 230);
    --checkbox-box-fill-color-hover: rgb(217, 217, 217);
    --checkbox-box-fill-color-disabled: rgb(242, 242, 242);
    --checkbox-box-checked-fill-color-base: #0366d6;
    --checkbox-box-checked-fill-color-hover: rgb(9, 122, 251);
    --checkbox-box-checked-fill-color-disabled: rgb(180, 214, 254);
    --checkbox-box-checked-outline-color: #D518DA;
    --checkbox-icon-fill-color-base: #fff;
    --checkbox-icon-fill-color-disabled: #fff;
    --checkbox-label-typo-base: #000;
    --checkbox-label-typo-disabled: rgb(128, 128, 128);
    --menu-view-default-fill-color-base: rgb(230, 230, 230);
    --menu-view-default-fill-color-disabled: rgb(242, 242, 242);
    --menu-view-default-group-border-color-base: rgb(179, 179, 179);
    --menu-view-default-title-typo-color-base: rgba(0, 0, 0, 0.6);
    --menu-view-default-item-typo-color-base: #000;
    --menu-view-default-item-typo-color-hover: #000;
    --menu-view-default-item-typo-color-disabled: rgb(128, 128, 128);
    --menu-view-default-item-fill-color-hover: rgb(217, 217, 217);
    --menu-view-action-fill-color-base: rgb(230, 230, 230);
    --menu-view-action-fill-color-disabled: rgb(242, 242, 242);
    --menu-view-action-group-border-color-base: rgb(179, 179, 179);
    --menu-view-action-title-typo-color-base: rgba(0, 0, 0, 0.6);
    --menu-view-action-item-typo-color-base: #000;
    --menu-view-action-item-typo-color-hover: #fff;
    --menu-view-action-item-typo-color-disabled: rgb(128, 128, 128);
    --menu-view-action-item-fill-color-hover: rgb(9, 122, 251);
    --modal-view-default-fill-color: #fff;
    --modal-view-default-overlay-fill-color: rgba(0, 0, 0, 0.3);
    --popup-view-default-typo-color: #000;
    --popup-view-default-fill-color: #fff;
    --popup-view-default-border-color-shadow: rgba(153, 153, 153, 0.1);
    --select-fill-color-base: rgb(230, 230, 230);
    --spinner-view-primitive-border-color-active: #0366d6;
    --spinner-view-primitive-border-color-common: transparent;
    --tabsmenu-view-default-outline-color: #D518DA;
    --tabsmenu-view-default-border-color-base: rgb(204, 204, 204);
    --tabsmenu-view-default-border-color-active: rgb(9, 122, 251);
    --tabsmenu-view-default-fill-color-base: rgb(255, 255, 255);
    --tabsmenu-view-default-fill-color-hover: rgb(247, 247, 247);
    --tabsmenu-view-default-fill-color-disabled: rgb(242, 242, 242);
    --tabsmenu-view-default-typo-color-base: #000;
    --tabsmenu-view-default-typo-color-disabled: rgb(128, 128, 128);
    --tabsmenu-view-primitive-outline-color: #D518DA;
    --tabsmenu-view-primitive-border-color-base: #000;
    --tabsmenu-view-primitive-typo-color-base: #000;
    --tabsmenu-view-primitive-typo-color-disabled: rgb(128, 128, 128);
    --textarea-view-default-fill-color-base: #fff;
    --textarea-view-default-fill-color-disabled: rgb(242, 242, 242);
    --textarea-view-default-border-color-base: rgb(217, 217, 217);
    --textarea-view-default-border-color-hover: rgb(204, 204, 204);
    --textarea-view-default-border-color-disabled: rgb(242, 242, 242);
    --textarea-view-default-border-color-focus: rgb(179, 179, 179);
    --textarea-view-default-border-color-error-base: rgb(224, 0, 0);
    --textarea-view-default-border-color-error-hover: rgb(255, 20, 20);
    --textarea-view-default-border-color-error-focus: rgb(255, 82, 82);
    --textarea-view-default-typo-color-base: #000;
    --textarea-view-default-typo-color-disabled: rgb(128, 128, 128);
    --textarea-view-default-typo-color-error: rgb(224, 0, 0);
    --textinput-view-default-fill-color-base: #fff;
    --textinput-view-default-fill-color-disabled: rgb(242, 242, 242);
    --textinput-view-default-border-color-base: rgb(217, 217, 217);
    --textinput-view-default-border-color-hover: rgb(204, 204, 204);
    --textinput-view-default-border-color-disabled: rgb(242, 242, 242);
    --textinput-view-default-border-color-focus: rgb(179, 179, 179);
    --textinput-view-default-border-color-error-base: rgb(224, 0, 0);
    --textinput-view-default-border-color-error-hover: rgb(255, 20, 20);
    --textinput-view-default-border-color-error-focus: rgb(255, 82, 82);
    --textinput-view-default-typo-color-base: #000;
    --textinput-view-default-typo-color-disabled: rgb(128, 128, 128);
    --textinput-view-default-typo-color-error: rgb(224, 0, 0);
}