react-elegant-ui/theme/presets/dark/root.css

Elegant UI components, made by BEM best practices for react

.Theme_root_dark {
    --typography-controls-font-family: Arial, Helvetica, sans-serif;
    --typography-controls-outline-width: 2px;
    --typography-controls-font-size-s: .9rem;
    --typography-controls-font-size-m: 1rem;
    --typography-controls-font-size-l: 1.2rem;
    --typography-controls-line-height-s: 120%;
    --typography-controls-line-height-m: 150%;
    --typography-controls-line-height-l: 200%;
    --typography-controls-line-height-xl: 250%;
    --typography-controls-indent-xs: .1rem;
    --typography-controls-indent-s: .2rem;
    --typography-controls-indent-m: .4rem; /* Base indent size */
    --typography-controls-indent-l: .6rem;
    --typography-controls-indent-xl: .8rem;
    --typography-controls-border-radius: 4px;
    --typography-controls-border-width-s: 1px;
    --typography-controls-border-width-m: 2px;
    --typography-controls-border-width-l: 3px;
    --typography-controls-icon-size-xs: 18px;
    --typography-controls-icon-size-s: 20px;
    --typography-controls-icon-size-m: 24px;
    --typography-controls-icon-size-l: 28px;
    --typography-controls-icon-size-xl: 32px;
    --transition-controls-action-toggle-size-s: 100ms;
    --transition-controls-action-toggle-size-m: 250ms;
    --transition-controls-action-press-size-s: 100ms;
    --transition-controls-action-hover-size-s-in: 150ms;
    --transition-controls-action-hover-size-s-out: 100ms;
    --transition-controls-action-hover-size-m-in: 250ms;
    --transition-controls-action-hover-size-m-out: 200ms;
    --transition-controls-action-hover-size-l-in: 300ms;
    --transition-controls-action-hover-size-l-out: 250ms;
    --transition-controls-action-spin-size-m-duration: 700ms;
    --transition-controls-action-spin-size-m-delay: 200ms;
    --button-transition-hover: 150ms;
    --button-transition-press: 100ms;
    --button-font-family: Arial, Helvetica, sans-serif;
    --button-outline-width: 2px;
    --button-border-width: 1px;
    --button-border-radius: 4px;
    --button-size-s-font-size: .9rem;
    --button-size-s-line-height: 200%;
    --button-size-s-indent-inner: .2rem;
    --button-size-s-indent-outer: .4rem;
    --button-size-s-indent-content: .1rem;
    --button-size-m-font-size: 1rem;
    --button-size-m-line-height: 200%;
    --button-size-m-indent-inner: .4rem;
    --button-size-m-indent-outer: .6rem;
    --button-size-m-indent-content: .1rem;
    --button-size-l-font-size: 1.2rem;
    --button-size-l-line-height: 200%;
    --button-size-l-indent-inner: .4rem;
    --button-size-l-indent-outer: .8rem;
    --button-size-l-indent-content: .1rem;
    --checkbox-transition-hover: 150ms;
    --checkbox-transition-toggle: 100ms;
    --checkbox-outline-width: 2px;
    --checkbox-border-radius: 4px;
    --checkbox-box-size-s: calc(1rem);
    --checkbox-box-size-m: calc(1.2rem - 1px);
    --checkbox-icon-padding-m: .2rem;
    --checkbox-label-indent-m: .2rem;
    --checkbox-label-font-size-s: calc(.9rem);
    --checkbox-label-font-size-m: calc(1rem);
    --icon-size-xs: 18px;
    --icon-size-s: 20px;
    --icon-size-m: 24px;
    --icon-size-l: 28px;
    --icon-size-xl: 32px;
    --menu-font-family: Arial, Helvetica, sans-serif;
    --menu-border-radius: 4px;
    --menu-indent-m: .4rem;
    --menu-size-s-font-size: .9rem;
    --menu-size-m-font-size: 1rem;
    --menu-size-m-container-indent: .2rem;
    --menu-size-m-item-line-height: 250%;
    --menu-size-m-item-indent: .8rem;
    --menu-size-m-title-line-height: 200%;
    --menu-size-m-title-indent: .8rem;
    --menu-size-l-font-size: 1.2rem;
    --menu-view-default-group-border-width: 1px;
    --menu-view-action-group-border-width: 1px;
    --modal-size-m-content-indent: .4rem;
    --modal-view-default-border-radius: 4px;
    --popup-border-radius: 4px;
    --select-border-radius: 4px;
    --spinner-size-s: 20px;
    --spinner-size-m: 24px;
    --spinner-size-l: 28px;
    --spinner-animation-duration: 700ms;
    --spinner-animation-delay: 200ms;
    --spinner-view-primitive-border-width: 3px;
    --spinner-view-icon-fill-color: currentColor;
    --tabsmenu-transition-hover: 150ms;
    --tabsmenu-transition-toggle: 100ms;
    --tabsmenu-transition-motion: 250ms;
    --tabsmenu-font-family: Arial, Helvetica, sans-serif;
    --tabsmenu-outline-width: 2px;
    --tabsmenu-indent-inner-m: .4rem;
    --tabsmenu-indent-gap-s: .2rem;
    --tabsmenu-indent-gap-m: .4rem;
    --tabsmenu-size-s-font-size: .9rem;
    --tabsmenu-size-s-line-height: 200%;
    --tabsmenu-size-m-font-size: 1rem;
    --tabsmenu-size-m-line-height: 200%;
    --tabsmenu-view-default-border-width: 2px;
    --tabsmenu-view-default-border-radius: 4px;
    --tabsmenu-view-primitive-border-width: 2px;
    --textarea-transition-hover: 150ms;
    --textarea-border-width: 2px;
    --textarea-border-radius: 4px;
    --textarea-font-family: Arial, Helvetica, sans-serif;
    --textarea-size-s-font-size: .9rem;
    --textarea-size-s-line-height: 120%;
    --textarea-size-s-control-indent: .4rem;
    --textarea-size-s-hint-font-size: .9rem;
    --textarea-size-s-hint-indent: .2rem;
    --textarea-size-m-font-size: 1rem;
    --textarea-size-m-line-height: 120%;
    --textarea-size-m-control-indent: .4rem;
    --textarea-size-m-clear-indent: .1rem;
    --textarea-size-m-clear-size: 24px;
    --textarea-size-m-hint-font-size: .9rem;
    --textarea-size-m-hint-indent: .2rem;
    --textinput-transition-hover: 150ms;
    --textinput-border-width: 2px;
    --textinput-border-radius: 4px;
    --textinput-font-family: Arial, Helvetica, sans-serif;
    --textinput-size-s-font-size: .9rem;
    --textinput-size-s-line-height: 120%;
    --textinput-size-s-control-indent: .4rem;
    --textinput-size-s-hint-font-size: .9rem;
    --textinput-size-s-hint-indent: .2rem;
    --textinput-size-m-font-size: 1rem;
    --textinput-size-m-line-height: 120%;
    --textinput-size-m-control-indent: .4rem;
    --textinput-size-m-hint-font-size: .9rem;
    --textinput-size-m-hint-indent: .2rem;
    --textinput-size-m-clear-indent: .2rem;
}