react-elegant-ui/theme/presets/wine/color.css

Elegant UI components, made by BEM best practices for react

.Theme_color_wine {
    --color-base: #fff; /* base content color on which depend color of text, icons, etc */
    --color-essential: #370000; /* background color */
    --color-project: #855f03; /* project color for accents such as a action view */
    --color-phantom: #000; /* toning color on which depend borders, translucent typography, etc */
    --color-path: #327cff; /* base color for link */
    --color-success: #00985f;
    --color-alert: #f00; /* error color affecting to background and typography */
    --color-warning: #f90;
    --color-fill-color-inverse: #fff;
    --color-fill-color-overlay: rgba(255, 255, 255, 0.3);
    --color-fill-color-action: rgb(210, 148, 4);
    --color-fill-color-selection: rgb(251, 186, 45);
    --color-fill-color-hover: rgba(255, 255, 255, 0.15);
    --color-fill-color-border: rgba(0, 0, 0, 0.05);
    --color-fill-color-outline: #fff;
    --color-fill-color-stripe: rgba(0, 0, 0, 0.04);
    --color-fill-color-ghost: rgba(0, 0, 0, 0.08);
    --color-fill-color-default: #370000;
    --color-fill-color-tone: rgba(0, 0, 0, 0.9);
    --color-fill-color-soft: rgba(55, 0, 0, 0.97);
    --color-fill-color-success: #00985f;
    --color-fill-color-alert: #f00;
    --color-fill-color-warning: #f90;
    --color-fill-color-link: rgba(131, 187, 246, 0.4);
    --color-typo-primary: #fff; /* color of the main text of default controls */
    --color-typo-inverse: #370000; /* contrast to primary color */
    --color-typo-secondary: rgba(255, 255, 255, 0.6); /* color of the secondary text */
    --color-typo-ghost: rgba(255, 255, 255, 0.3); /* color of the additional text */
    --color-typo-disabled: rgba(255, 255, 255, 0.3); /* color of the main text of disabled control */
    --color-typo-success: #00985f;
    --color-typo-warning: #f90;
    --color-typo-alert: rgb(173, 0, 0);
    --color-link-base: #327cff;
    --color-link-external: #327cff;
    --color-link-minor: rgb(172, 172, 200);
    --color-link-hover: #c00;
    --color-control-border-color-focus: rgb(179, 179, 179);
    --color-control-border-color-prism: #fff; /* border color for special focus such as keyboard focus */
    --color-control-border-color-shadow: rgba(153, 153, 153, 0.2);
    --color-control-border-color-alert-base: rgb(173, 0, 0);
    --color-control-border-color-alert-hover: rgb(204, 0, 0);
    --color-control-border-color-alert-focus: #f00;
    --color-control-typo-primary: #fff;
    --color-control-typo-secondary: rgba(255, 255, 255, 0.6);
    --color-control-typo-ghost: rgba(255, 255, 255, 0.3);
    --color-control-typo-passive: #fff;
    --color-control-typo-faint: rgb(255, 255, 255);
    --color-control-typo-disabled: rgb(153, 153, 153);
    --color-control-typo-link: #327cff;
    --color-control-typo-alert: #f00;
    --color-control-type-default-fill-color-base: rgb(64, 64, 64);
    --color-control-type-default-fill-color-hover: rgb(77, 77, 77);
    --color-control-type-default-fill-color-disabled: rgb(38, 38, 38);
    --color-control-type-default-border-color-base: rgb(102, 102, 102);
    --color-control-type-default-border-color-hover: rgb(115, 115, 115);
    --color-control-type-default-border-color-disabled: rgb(77, 0, 0);
    --color-control-type-default-typo-base: #fff;
    --color-control-type-default-typo-disabled: rgb(153, 153, 153);
    --color-control-type-action-fill-color-base: #855f03;
    --color-control-type-action-fill-color-hover: rgb(175, 124, 4);
    --color-control-type-action-fill-color-disabled: rgb(38, 38, 38);
    --color-control-type-action-border-color-prism: #fff;
    --color-control-type-action-typo-base: #fff;
    --color-control-type-action-typo-hover: #fff;
    --color-control-type-action-typo-disabled: rgb(153, 153, 153);
    --color-control-type-input-fill-color-base: rgba(0, 0, 0, 0.15);
    --color-control-type-input-fill-color-disabled: rgb(38, 38, 38);
    --color-control-type-input-border-color-base: rgb(102, 102, 102);
    --color-control-type-input-border-color-hover: rgb(128, 128, 128);
    --color-control-type-input-border-color-focus: rgb(179, 179, 179);
    --color-control-type-input-border-color-disabled: rgb(38, 38, 38);
    --color-control-type-input-typo-base: #fff;
    --color-control-type-input-typo-disabled: rgb(153, 153, 153);
    --color-control-type-pseudo-fill-color-base: #370000;
    --color-control-type-pseudo-fill-color-hover: rgb(71, 0, 0);
    --color-control-type-pseudo-border-color-base: rgb(102, 102, 102);
    --color-control-type-passive-fill-color-base: #370000;
    --color-control-type-blank-fill-color-base: #370000;
    --color-control-type-blank-fill-color-hover: #370000;
    --color-control-type-blank-fill-color-disabled: rgb(77, 0, 0);
    --color-control-type-blank-border-color-base: rgb(102, 102, 102);
    --color-control-type-blank-border-color-hover: rgb(128, 128, 128);
    --color-control-type-blank-border-color-disabled: rgb(77, 0, 0);
    --color-control-type-faint-fill-color-base: #370000;
    --color-control-type-faint-fill-color-disabled: rgb(255, 143, 143);
    --color-control-type-link-fill-color-base: #327cff;
    --color-control-type-link-fill-color-hover: rgba(50, 124, 255, 0.3);
    --color-control-type-link-border-color-base: rgba(50, 124, 255, 0.6);
    --color-control-type-link-border-color-hover: rgba(50, 124, 255, 0.6);
    --button-view-default-outline-color: #fff;
    --button-view-default-fill-color-base: rgb(64, 64, 64);
    --button-view-default-fill-color-disabled: rgb(38, 38, 38);
    --button-view-default-fill-color-hovered: rgb(77, 77, 77);
    --button-view-default-typo-color-base: #fff;
    --button-view-default-typo-color-disabled: rgb(153, 153, 153);
    --button-view-action-outline-color: #fff;
    --button-view-action-fill-color-base: #855f03;
    --button-view-action-fill-color-disabled: rgb(38, 38, 38);
    --button-view-action-fill-color-hovered: rgb(175, 124, 4);
    --button-view-action-typo-color-base: #fff;
    --button-view-action-typo-color-disabled: rgb(153, 153, 153);
    --button-view-action-typo-color-hovered: #fff;
    --button-view-clear-outline-color: #fff;
    --button-view-clear-fill-color-disabled: rgb(38, 38, 38);
    --button-view-clear-typo-color-base: #fff;
    --button-view-clear-typo-color-disabled: rgb(153, 153, 153);
    --button-view-pseudo-outline-color: #fff;
    --button-view-pseudo-border-color-base: rgb(102, 102, 102);
    --button-view-pseudo-fill-color-base: #370000;
    --button-view-pseudo-fill-color-disabled: rgb(38, 38, 38);
    --button-view-pseudo-fill-color-hovered: rgb(71, 0, 0);
    --button-view-pseudo-typo-color-base: #fff;
    --button-view-pseudo-typo-color-disabled: rgb(153, 153, 153);
    --button-view-link-outline-color: #fff;
    --button-view-link-typo-color-base: #327cff;
    --button-view-link-typo-color-disabled: rgb(153, 153, 153);
    --checkbox-outline-color: #fff;
    --checkbox-box-fill-color-base: rgb(64, 64, 64);
    --checkbox-box-fill-color-hover: rgb(77, 77, 77);
    --checkbox-box-fill-color-disabled: rgb(38, 38, 38);
    --checkbox-box-checked-fill-color-base: #855f03;
    --checkbox-box-checked-fill-color-hover: rgb(175, 124, 4);
    --checkbox-box-checked-fill-color-disabled: rgb(38, 38, 38);
    --checkbox-box-checked-outline-color: #fff;
    --checkbox-icon-fill-color-base: #fff;
    --checkbox-icon-fill-color-disabled: rgb(153, 153, 153);
    --checkbox-label-typo-base: #fff;
    --checkbox-label-typo-disabled: rgb(153, 153, 153);
    --menu-view-default-fill-color-base: rgb(64, 64, 64);
    --menu-view-default-fill-color-disabled: rgb(38, 38, 38);
    --menu-view-default-group-border-color-base: rgb(102, 102, 102);
    --menu-view-default-title-typo-color-base: rgba(255, 255, 255, 0.6);
    --menu-view-default-item-typo-color-base: #fff;
    --menu-view-default-item-typo-color-hover: #fff;
    --menu-view-default-item-typo-color-disabled: rgb(153, 153, 153);
    --menu-view-default-item-fill-color-hover: rgb(77, 77, 77);
    --menu-view-action-fill-color-base: rgb(64, 64, 64);
    --menu-view-action-fill-color-disabled: rgb(38, 38, 38);
    --menu-view-action-group-border-color-base: rgb(102, 102, 102);
    --menu-view-action-title-typo-color-base: rgba(255, 255, 255, 0.6);
    --menu-view-action-item-typo-color-base: #fff;
    --menu-view-action-item-typo-color-hover: #fff;
    --menu-view-action-item-typo-color-disabled: rgb(153, 153, 153);
    --menu-view-action-item-fill-color-hover: rgb(175, 124, 4);
    --modal-view-default-fill-color: #370000;
    --modal-view-default-overlay-fill-color: rgba(255, 255, 255, 0.3);
    --popup-view-default-typo-color: #fff;
    --popup-view-default-fill-color: #370000;
    --popup-view-default-border-color-shadow: rgba(153, 153, 153, 0.2);
    --select-fill-color-base: rgb(64, 64, 64);
    --spinner-view-primitive-border-color-active: #855f03;
    --spinner-view-primitive-border-color-common: transparent;
    --tabsmenu-view-default-outline-color: #fff;
    --tabsmenu-view-default-border-color-base: rgb(102, 102, 102);
    --tabsmenu-view-default-border-color-active: rgb(175, 124, 4);
    --tabsmenu-view-default-fill-color-base: #370000;
    --tabsmenu-view-default-fill-color-hover: rgb(71, 0, 0);
    --tabsmenu-view-default-fill-color-disabled: rgb(38, 38, 38);
    --tabsmenu-view-default-typo-color-base: #fff;
    --tabsmenu-view-default-typo-color-disabled: rgb(153, 153, 153);
    --tabsmenu-view-primitive-outline-color: #fff;
    --tabsmenu-view-primitive-border-color-base: #fff;
    --tabsmenu-view-primitive-typo-color-base: #fff;
    --tabsmenu-view-primitive-typo-color-disabled: rgb(153, 153, 153);
    --textarea-view-default-fill-color-base: rgba(0, 0, 0, 0.15);
    --textarea-view-default-fill-color-disabled: rgb(38, 38, 38);
    --textarea-view-default-border-color-base: rgb(102, 102, 102);
    --textarea-view-default-border-color-hover: rgb(128, 128, 128);
    --textarea-view-default-border-color-disabled: rgb(38, 38, 38);
    --textarea-view-default-border-color-focus: rgb(179, 179, 179);
    --textarea-view-default-border-color-error-base: rgb(173, 0, 0);
    --textarea-view-default-border-color-error-hover: rgb(204, 0, 0);
    --textarea-view-default-border-color-error-focus: #f00;
    --textarea-view-default-typo-color-base: #fff;
    --textarea-view-default-typo-color-disabled: rgb(153, 153, 153);
    --textarea-view-default-typo-color-error: #f00;
    --textinput-view-default-fill-color-base: rgba(0, 0, 0, 0.15);
    --textinput-view-default-fill-color-disabled: rgb(38, 38, 38);
    --textinput-view-default-border-color-base: rgb(102, 102, 102);
    --textinput-view-default-border-color-hover: rgb(128, 128, 128);
    --textinput-view-default-border-color-disabled: rgb(38, 38, 38);
    --textinput-view-default-border-color-focus: rgb(179, 179, 179);
    --textinput-view-default-border-color-error-base: rgb(173, 0, 0);
    --textinput-view-default-border-color-error-hover: rgb(204, 0, 0);
    --textinput-view-default-border-color-error-focus: #f00;
    --textinput-view-default-typo-color-base: #fff;
    --textinput-view-default-typo-color-disabled: rgb(153, 153, 153);
    --textinput-view-default-typo-color-error: #f00;
}