formir/src/less/setup/variables.less

Pure CSS / HTML Framework

// Body
@html-font-size: 16px;

@body-font-family: "Roboto";
@body-font-size: 1rem;
@body-line-height: 1.35em;
@font-family: "Roboto", Arial, Helvetica, sans-serif;


// Window
@window-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
@window-content-background: #fff;
@window-content-padding: 10px 10px;
@window-header-background: #fff;
@window-header-padding: 10px 10px;
@window-header-color: @color-body;
@window-header-font-size: 1.3rem;
@window-header-border-bottom: 1px solid lighten(@color-mute, 60%);
@window-border: 0 none;
@window-border-radius: 0;
@window-footer-background: #fff;
@window-footer-padding: 10px 10px;
@window-footer-color: @color-body;
@window-footer-border-top: 1px solid lighten(@color-mute, 60%);

// Modals
@modal-width: 650px;
@modal-margin: 5vh;
@modal-min-height: 300px;
@modal-max-width: calc(100% ~"-" @content-min-margin * 2);
@modal-background-color: rgba(0, 0, 0, 0.7);
@modal-border: 0 none;
@modal-header-background: transparent;
@modal-animate-function: 0.4s ease;
@modal-animate-transform-x: 0;
@modal-animate-transform-y: -100vh;

@modal-s-width: 450px;
@modal-l-width: 70%;
@modal-xl-width: 80%;
@modal-fullscreen-width: 100%;

// Header
@header-height: 65px;
@header-background: darken(@color-primary, 10%);
@header-color: @color-primary-contrast;
@header-vertical-padding: @content-min-margin;
@header-horizontal-padding: 0;

// Tabs
@tab-nav-active-background: @color-primary;
@tab-nav-active-color: #fff;
@tab-nav-active-border: 1px solid darken(@color-primary, 10%);
@tab-nav-active-shadow: none;

// Tooltips
@tooltip-background: darken(@color-primary, 20%);
@tooltip-border-width: 0;
@tooltip-border-color: rgba(60, 60, 60, 1);
@tooltip-border: @tooltip-border-width solid @tooltip-border-color;
@tooltip-shadow: 0;
@tooltip-text-color: #fff;
@tooltip-font-size: 0.8rem;
@tooltip-line-height: 1.35em;
@tooltip-padding-vertical: 0.45rem;
@tooltip-padding-horizontal: 0.65rem;
@tooltip-max-width: 30rem;
@tooltip-width: max-content;  // Try not change this configuration
@tooltip-border-radius: 5px;
@tooltip-arrow-height: 5px;
@tooltip-arrow-width: @tooltip-arrow-height;
@tooltip-arrow-offset: 10px;
@tooltip-offset: @tooltip-arrow-offset;
@tooltip-distance: 5px;

// Popups
@popup-background: rgba(255, 255, 255, 1);
@popup-border-width: 1px;
@popup-border-color: rgba(60, 60, 60, 1);
@popup-border: @popup-border-width solid @popup-border-color;
@popup-shadow: none;
@popup-text-color: @color-body;
@popup-padding-horizontal: 0;
@popup-padding-vertical: 0;
@popup-padding: @popup-padding-vertical @popup-padding-horizontal;
@popup-max-width: 30rem;
@popup-min-width: 0;
@popup-width: max-content;
@popup-border-radius: 0px;
@popup-arrow-color: @color-body;
@popup-arrow-height: 0px;
@popup-arrow-width: @popup-arrow-height;
@popup-arrow-offset: 20px;
@popup-offset: 0px;
@popup-distance: 0px;

//// Popup inner
@popup-content-padding: 15px 20px;
@popup-footer-padding: @popup-content-padding;
@popup-header-padding: @popup-footer-padding;
@popup-header-bg: @color-body;
@popup-header-text-color: #fff;
@popup-footer-bg: transparent;
@popup-footer-text-color: inherit;

// Accordion
@accordion-animated-max-height: 200vh;
@accordion-animated-time: 1s;

// Side
@side-full-width: 90%;
@side-animate-time: 1s;
@side-hoverable-offset-width: 5px;
@side-hoverable-offset-height: 5px;
@side-backdrop-color: rgba(0, 0, 0, 1);
@side-backdrop-opacity: 0.5;
@side-width-default: 200px;
@side-height-default: 150px;
@side-collapse-width: 50px;
@side-collapse-height: @content-max-height/@base-steps;

// Chart
@chart-height: 100px;
@chart-ring-width: 10px;
@chart-color: @color-primary;
@chart-background: @color-alternative;
@chart-value-font-size: 20px;
@chart-value-color: @chart-background;
@chart-parent-background: inherit;

// Form
@focus-shadow: 1px 1px 0 @color-focus inset, -1px -1px 0 @color-focus inset;

@input-default-padding-vertical: 0.35rem;
@input-default-padding-horizontal: 0.5rem;
@input-border-style: solid;
@input-default-border-width: 1px;
@input-border-color: #ccc;
@input-default-border-radius: 3px;
@input-background-color: #fff;
@input-default-font-size: 1rem;
@input-default-line-height: 1.35rem;
@input-font-weight: normal;
@input-text-color: @color-body;
@input-default-outline: none;
@input-default-shadow: none;

@input-s-padding-vertical: @input-default-padding-vertical * @size-s;
@input-s-padding-horizontal: @input-default-padding-horizontal * @size-s;
@input-s-border-width: @input-default-border-width;
@input-s-border-radius: @input-default-border-radius - 1px;
@input-s-font-size: @input-default-font-size * @size-s;
@input-s-line-height: @input-default-line-height * @size-s;
@input-s-outline: @input-default-outline;
@input-s-shadow: @input-default-shadow;

@input-m-padding-vertical: @input-default-padding-vertical * @size-m;
@input-m-padding-horizontal: @input-default-padding-horizontal * @size-m;
@input-m-border-width: @input-default-border-width;
@input-m-border-radius: @input-default-border-radius + 2px;
@input-m-font-size: @input-default-font-size * @size-m;
@input-m-line-height: @input-default-line-height * @size-m;
@input-m-outline: @input-default-outline;
@input-m-shadow: @input-default-shadow;

@input-l-padding-vertical: @input-default-padding-vertical * @size-l;
@input-l-padding-horizontal: @input-default-padding-horizontal * @size-l;
@input-l-border-width: @input-default-border-width;
@input-l-border-radius: @input-default-border-radius + 1px;
@input-l-font-size: @input-default-font-size * @size-l;
@input-l-line-height: @input-default-line-height * @size-l;
@input-l-outline: @input-default-outline;
@input-l-shadow: @input-default-shadow;

@input-hover-border-style: @input-border-style;
@input-hover-border-color: @input-border-color;
@input-hover-outline: none;
@input-hover-shadow: none;
@input-hover-background-color: @input-background-color;

@input-focus-border-style: none;
@input-focus-border-color: none;
@input-focus-outline: none;
@input-focus-shadow: @focus-shadow;
@input-focus-background-color: none;

@label-font-size: 1rem;
@label-line-height: 1.35rem;
@label-font-weight: normal;
@label-text-transform: none;
@label-text-color: @color-body;

@hint-font-size: 1rem;
@hint-line-height: 1.35rem;
@hint-font-weight: normal;
@hint-text-transform: none;
@hint-text-color: @color-body;

@input-disabled-opacity: 0.7;
@input-icon-text-color: @input-text-color;
@input-icon-font-size: 1em;
@input-addon-text-color: @input-text-color;
@input-addon-text-transform: uppercase;
@input-addon-font-size: 0.8em;
@input-addon-font-weight: normal;

@input-lighten: 0%;
@input-background-lighten: 80%;
@input-border-lighten: 0%;

@input-color-has-success: lighten(@color-success, @input-lighten);
@input-color-has-info: lighten(@color-info, @input-lighten);
@input-color-has-warning: lighten(@color-warning, @input-lighten);
@input-color-has-error: lighten(@color-danger, @input-lighten);

@input-background-has-success: lighten(@color-success, @input-background-lighten);
@input-background-has-info: lighten(@color-info, @input-background-lighten);
@input-background-has-warning: lighten(@color-warning, @input-background-lighten);
@input-background-has-error: lighten(@color-danger, @input-background-lighten);

@input-background-contrast-has-success: @input-text-color;
@input-background-contrast-has-info: @input-text-color;
@input-background-contrast-has-warning: @input-text-color;
@input-background-contrast-has-error: @input-text-color;

@input-tooltip-has-success: @color-success;
@input-tooltip-has-info: @color-info;
@input-tooltip-has-warning: @color-warning;
@input-tooltip-has-error: @color-danger;

@input-tooltip-contrast-has-success: @color-success-contrast;
@input-tooltip-contrast-has-info: @color-info-contrast;
@input-tooltip-contrast-has-warning: @color-warning-contrast;
@input-tooltip-contrast-has-error: @color-danger-contrast;

@input-border-has-success: lighten(@color-success, @input-border-lighten);
@input-border-has-info: lighten(@color-info, @input-border-lighten);
@input-border-has-warning: lighten(@color-warning,@input-border-lighten);
@input-border-has-error: lighten(@color-danger, @input-border-lighten);

@select-arrow-icon-down: "\f0d7";
@select-arrow-icon-up: "\f0d8";
@select-max-height: 50vh;

@icon-close: "\f00d";

// Description List
@dd-gutter: 20px;
@dd-space-default: 20px;
@dd-title-space-default: 5px;
@dl-size-default: 3;

// Menu
@side-menu-item-color: #fff;
@side-menu-item-background-color: transparent;
@side-menu-item-background-color-hover: darken(@color-primary, 15);
@side-menu-item-anchor-border: 0 none;

@menu-item-background-color: lighten(@color-primary, 70);
@menu-item-background-color-hover: lighten(@color-primary, 60);
@menu-item-color: @color-body;
@menu-item-color-hover: @color-body;
@menu-item-color-active: @color-alternative;
@menu-item-padding: 0;
@menu-item-anchor-decoration: none;
@menu-item-anchor-decoration-hover: none;
@menu-item-anchor-padding: 8px 10px;
@menu-item-anchor-border: 1px solid rgba(0, 0, 0, 0.1);
@menu-inside-item-anchor-padding: 5px 10px 5px 10px;

// Menu anchor link
@menu-item-anchor-color: @link-color;
@menu-item-anchor-hover-color: @link-hover-color;
@menu-item-anchor-decoration: @link-decoration;
@menu-item-anchor-hover-decoration: @link-hover-decoration;

@mobile-menu-item-button-radius: 0;

// Typography
//// Heading
@h-font-weight: 500;
@h-margin: 1rem;
@p-margin: 2rem 0;

@h1-font-size: @typography-font-size-1;
@h1-line-height: @typography-line-height-1;
@h1-font-weight: @h-font-weight;
@h1-margin: @h-margin * @size-xxl 0;

@h2-font-size: @typography-font-size-2;
@h2-line-height: @typography-line-height-2;
@h2-font-weight: @h-font-weight;
@h2-margin: @h-margin * @size-xl 0;

@h3-font-size: @typography-font-size-3;
@h3-line-height: @typography-line-height-3;
@h3-font-weight: @h-font-weight;
@h3-margin: @h-margin * @size-l 0;

@h4-font-size: @typography-font-size-4;
@h4-line-height: @typography-line-height-4;
@h4-font-weight: @h-font-weight;
@h4-margin: @h-margin * @size-m 0;

@h5-font-size: @typography-font-size-5;
@h5-line-height: @typography-line-height-5;
@h5-font-weight: @h-font-weight;
@h5-margin: @h-margin * @size-s 0;

@h6-font-size: @typography-font-size-6;
@h6-line-height: @typography-line-height-6;
@h6-font-weight: @h-font-weight;
@h6-margin: @h-margin * @size-xs 0;

@article-p-margin: @p-margin;

// ul, ol
@list-margin: 0 0 0 1.5rem;
@list-padding: 0;
@list-item-margin: 0;
@list-item-padding: 0;
@list-item-space: 0.2rem;

// Colors
@color-body: #2a2a2a;
@color-primary: #443349;
@color-alternative: #6253f9;
@color-link: #5386f9;
@color-mute: #575757;
@color-cancel: #aaaaaa;
@color-success: #84b500;
@color-info: #00abc4;
@color-warning: #ea8432;
@color-danger: #cf4040;
@color-white: #fff;
@color-color-1: #000;
@color-color-2: #fff;
@color-color-3: #222;

@color-body-contrast: #ffffff;
@color-primary-contrast: #ffffff;
@color-alternative-contrast: #ffffff;
@color-link-contrast: #ffffff;
@color-mute-contrast: #ffffff;
@color-cancel-contrast: #111111;
@color-success-contrast: #ffffff;
@color-info-contrast: #ffffff;
@color-warning-contrast: #111111;
@color-danger-contrast: #ffffff;
@color-white-contrast: #111111;
@color-color-1-contrast: #fff;
@color-color-2-contrast: #000;
@color-color-3-contrast: #eee;

@color-focus: @color-alternative;
@color-hover-lighten: 20%;

@color-hover-body: lighten(@color-body, @color-hover-lighten);
@color-hover-primary: lighten(@color-primary, @color-hover-lighten);
@color-hover-alternative: lighten(@color-alternative, @color-hover-lighten);
@color-hover-link: lighten(@color-link, @color-hover-lighten);
@color-hover-mute: lighten(@color-mute, @color-hover-lighten);
@color-hover-cancel: lighten(@color-cancel, @color-hover-lighten);
@color-hover-success: lighten(@color-success, @color-hover-lighten);
@color-hover-info: lighten(@color-info, @color-hover-lighten);
@color-hover-warning: lighten(@color-warning, @color-hover-lighten);
@color-hover-danger: lighten(@color-danger, @color-hover-lighten);
@color-hover-color-1: lighten(@color-color-1, @color-hover-lighten);
@color-hover-color-2: lighten(@color-color-2, @color-hover-lighten);
@color-hover-color-3: lighten(@color-color-3, @color-hover-lighten);

// Colors modifier
@background-lighten: 30%;
@background-dark: 20%;
@text-darken: 10%;
@border-darken: 0%;

// Backgrounds
@background-color-body: lighten(@color-body, @background-lighten);
@background-color-primary: lighten(@color-primary, @background-lighten);
@background-color-alternative: lighten(@color-alternative, @background-lighten);
@background-color-link: lighten(@color-link, @background-lighten);
@background-color-mute: lighten(@color-mute, @background-lighten);
@background-color-cancel: lighten(@color-cancel, @background-lighten);
@background-color-success: lighten(@color-success, @background-lighten);
@background-color-info: lighten(@color-info, @background-lighten);
@background-color-warning: lighten(@color-warning, @background-lighten);
@background-color-danger: lighten(@color-danger, @background-lighten);
@background-color-color-1: lighten(@color-color-1, @background-lighten);
@background-color-color-2: lighten(@color-color-2, @background-lighten);
@background-color-color-3: lighten(@color-color-3, @background-lighten);

@background-dark-color-body: darken(@color-body, @background-dark);
@background-dark-color-primary: darken(@color-primary, @background-dark);
@background-dark-color-alternative: darken(@color-alternative, @background-dark);
@background-dark-color-link: darken(@color-link, @background-dark);
@background-dark-color-mute: darken(@color-mute, @background-dark);
@background-dark-color-cancel: darken(@color-cancel, @background-dark);
@background-dark-color-success: darken(@color-success, @background-dark);
@background-dark-color-info: darken(@color-info, @background-dark);
@background-dark-color-warning: darken(@color-warning, @background-dark);
@background-dark-color-danger: darken(@color-danger, @background-dark);
@background-dark-color-color-1: darken(@color-color-1, @background-dark);
@background-dark-color-color-2: darken(@color-color-2, @background-dark);
@background-dark-color-color-3: darken(@color-color-3, @background-dark);

@background-color-hover-body: lighten(@background-color-body, @color-hover-lighten);
@background-color-hover-primary: lighten(@background-color-primary, @color-hover-lighten);
@background-color-hover-alternative: lighten(@background-color-alternative, @color-hover-lighten);
@background-color-hover-link: lighten(@background-color-link, @color-hover-lighten);
@background-color-hover-mute: lighten(@background-color-mute, @color-hover-lighten);
@background-color-hover-cancel: lighten(@background-color-cancel, @color-hover-lighten);
@background-color-hover-success: lighten(@background-color-success, @color-hover-lighten);
@background-color-hover-info: lighten(@background-color-info, @color-hover-lighten);
@background-color-hover-warning: lighten(@background-color-warning, @color-hover-lighten);
@background-color-hover-danger: lighten(@background-color-danger, @color-hover-lighten);
@background-color-hover-color-1: lighten(@background-color-color-1, @color-hover-lighten);
@background-color-hover-color-2: lighten(@background-color-color-2, @color-hover-lighten);
@background-color-hover-color-3: lighten(@background-color-color-3, @color-hover-lighten);


// Text colors
@text-color-body: darken(@color-body, @text-darken);
@text-color-primary: darken(@color-primary, @text-darken);
@text-color-alternative: darken(@color-alternative, @text-darken);
@text-color-link: darken(@color-link, @text-darken);
@text-color-mute: darken(@color-mute, @text-darken);
@text-color-cancel: darken(@color-cancel, @text-darken);
@text-color-success: darken(@color-success, @text-darken);
@text-color-info: darken(@color-info, @text-darken);
@text-color-warning: darken(@color-warning, @text-darken);
@text-color-danger: darken(@color-danger, @text-darken);
@text-color-color-1: darken(@color-color-1, @text-darken);
@text-color-color-2: darken(@color-color-2, @text-darken);
@text-color-color-3: darken(@color-color-3, @text-darken);

// Borders colors
@border-color-body: darken(@color-body, @border-darken);
@border-color-primary: darken(@color-primary, @border-darken);
@border-color-alternative: darken(@color-alternative, @border-darken);
@border-color-link: darken(@color-link, @border-darken);
@border-color-mute: darken(@color-mute, @border-darken);
@border-color-cancel: darken(@color-cancel, @border-darken);
@border-color-success: darken(@color-success, @border-darken);
@border-color-info: darken(@color-info, @border-darken);
@border-color-warning: darken(@color-warning, @border-darken);
@border-color-danger: darken(@color-danger, @border-darken);
@border-color-color-1: darken(@color-color-1, @border-darken);
@border-color-color-2: darken(@color-color-2, @border-darken);
@border-color-color-3: darken(@color-color-3, @border-darken);

// Links
@link-color: @color-link;
@link-hover-color: @color-hover-link;
@link-decoration: none;
@link-hover-decoration: underline;

// Buttons
@button-border-style: solid;
@button-text-align: center;
@button-cursor: pointer;

@button-lighten: 0%;
@button-lighten-2: -7%;

@button-hover-lighten: 10%;
@button-hover-lighten-2: 20%;

@button-focus-lighten: 8%;
@button-focus-lighten-2: 18%;

@button-active-lighten: 8%;
@button-active-lighten-2: 18%;

@button-default-text: @color-white-contrast;
@button-default-background: @color-white;

@button-default-font-size: 1rem;
@button-default-line-height: 1.35rem;
@button-default-padding-horizontal: 0.7rem;
@button-default-padding-vertical: 0.35rem;
@button-default-border-radius: 3px;
@button-default-border: 1px solid currentColor;
@button-default-outline: none;
@button-default-shadow: none;

// Use variables name as: button-<size-name>-... on @sizes array
@button-xs-font-size: @button-default-font-size * @size-xs;
@button-xs-line-height: @button-default-line-height * @size-xs;
@button-xs-padding: @button-default-padding-vertical * @size-xs @button-default-padding-horizontal * @size-xs;
@button-xs-border-radius: @button-default-border-radius - 1px;
@button-xs-border-width: none;
@button-xs-outline-width: none;
@button-xs-shadow: none;

@button-s-font-size: @button-default-font-size * @size-s;
@button-s-line-height: @button-default-line-height * @size-s;
@button-s-padding: @button-default-padding-vertical * @size-s @button-default-padding-horizontal * @size-s;
@button-s-border-radius: @button-default-border-radius - 1px;
@button-s-border-width: none;
@button-s-outline-width: none;
@button-s-shadow: none;

@button-m-font-size: @button-default-font-size * @size-m;
@button-m-line-height: @button-default-line-height * @size-m;
@button-m-padding: @button-default-padding-vertical * @size-m @button-default-padding-horizontal * @size-m;
@button-m-border-radius: @button-default-border-radius + 2px;
@button-m-border-width: none;
@button-m-outline-width: none;
@button-m-shadow: none;

@button-l-font-size: @button-default-font-size * @size-l;
@button-l-line-height: @button-default-line-height * @size-l;
@button-l-padding: @button-default-padding-vertical* @size-l @button-default-padding-horizontal * @size-l;
@button-l-border-radius: @button-default-border-radius + 1px;
@button-l-border-width: none;
@button-l-outline-width: none;
@button-l-shadow: none;

@button-xl-font-size: @button-default-font-size * @size-xl;
@button-xl-line-height: @button-default-line-height * @size-xl;
@button-xl-padding: @button-default-padding-vertical * @size-xl @button-default-padding-horizontal * @size-xl;
@button-xl-border-radius: @button-default-border-radius + 2px;
@button-xl-border-width: none;
@button-xl-outline-width: none;
@button-xl-shadow: none;

@button-xxl-font-size: @button-default-font-size * @size-xxl;
@button-xxl-line-height: @button-default-line-height * @size-xxl;
@button-xxl-padding: @button-default-padding-vertical * @size-xxl @button-default-padding-horizontal * @size-xxl;
@button-xxl-border-radius: @button-default-border-radius + 3px;
@button-xxl-border-width: none;
@button-xxl-outline-width: none;
@button-xxl-shadow: none;

@button-hover-border: none;
@button-hover-outline: none;
@button-hover-shadow: none;

@button-active-border: none;
@button-active-outline: none;
@button-active-shadow: @focus-shadow inset;

@button-focus-border: none;
@button-focus-outline: none;
@button-focus-shadow: @focus-shadow;

@button-inverse-border: @button-default-border;
@button-inverse-outline: @button-default-outline;
@button-inverse-shadow: @button-default-shadow;

@button-inverse-hover-border: @button-inverse-border;
@button-inverse-hover-outline: @button-inverse-outline;
@button-inverse-hover-shadow: @button-inverse-shadow;

@button-inverse-active-border: @button-inverse-border;
@button-inverse-active-outline: @button-inverse-outline;
@button-inverse-active-shadow: @button-active-shadow;

@button-inverse-focus-border: @button-inverse-border;
@button-inverse-focus-outline: @button-inverse-outline;
@button-inverse-focus-shadow: @button-inverse-shadow;

// Buttons colors
// Use variables name as: button-color-<color-name>... or button-color-...-<color-name>.. on @colors array
@button-color-body: lighten(@color-body, @button-lighten);
@button-color-primary: lighten(@color-primary, @button-lighten);
@button-color-alternative: lighten(@color-alternative, @button-lighten);
@button-color-link: lighten(@color-link, @button-lighten);
@button-color-mute: lighten(@color-mute, @button-lighten);
@button-color-cancel: lighten(@color-cancel, @button-lighten);
@button-color-success: lighten(@color-success, @button-lighten);
@button-color-info: lighten(@color-info, @button-lighten);
@button-color-warning: lighten(@color-warning, @button-lighten);
@button-color-danger: lighten(@color-danger, @button-lighten);
@button-color-color-1: lighten(@color-color-1, @button-lighten);
@button-color-color-2: lighten(@color-color-2, @button-lighten);
@button-color-color-3: lighten(@color-color-3, @button-lighten);

@button-color-2-body: lighten(@color-body, @button-lighten-2);
@button-color-2-primary: lighten(@color-primary, @button-lighten-2);
@button-color-2-alternative: lighten(@color-alternative, @button-lighten-2);
@button-color-2-link: lighten(@color-link, @button-lighten-2);
@button-color-2-mute: lighten(@color-mute, @button-lighten-2);
@button-color-2-cancel: lighten(@color-cancel, @button-lighten-2);
@button-color-2-success: lighten(@color-success, @button-lighten-2);
@button-color-2-info: lighten(@color-info, @button-lighten-2);
@button-color-2-warning: lighten(@color-warning, @button-lighten-2);
@button-color-2-danger: lighten(@color-danger, @button-lighten-2);
@button-color-2-color-1: lighten(@color-color-1, @button-lighten-2);
@button-color-2-color-2: lighten(@color-color-2, @button-lighten-2);
@button-color-2-color-3: lighten(@color-color-3, @button-lighten-2);

@button-color-hover-body: lighten(@button-color-body, @button-hover-lighten);
@button-color-hover-primary: lighten(@button-color-primary, @button-hover-lighten);
@button-color-hover-alternative: lighten(@button-color-alternative, @button-hover-lighten);
@button-color-hover-link: lighten(@button-color-link, @button-hover-lighten);
@button-color-hover-mute: lighten(@button-color-mute, @button-hover-lighten);
@button-color-hover-cancel: lighten(@button-color-cancel, @button-hover-lighten);
@button-color-hover-success: lighten(@button-color-success, @button-hover-lighten);
@button-color-hover-info: lighten(@button-color-info, @button-hover-lighten);
@button-color-hover-warning: lighten(@button-color-warning, @button-hover-lighten);
@button-color-hover-danger: lighten(@button-color-danger, @button-hover-lighten);
@button-color-hover-color-1: lighten(@button-color-color-1, @button-hover-lighten);
@button-color-hover-color-2: lighten(@button-color-color-2, @button-hover-lighten);
@button-color-hover-color-3: lighten(@button-color-color-3, @button-hover-lighten);

@button-color-2-hover-body: lighten(@button-color-body, @button-hover-lighten-2);
@button-color-2-hover-primary: lighten(@button-color-primary, @button-hover-lighten-2);
@button-color-2-hover-alternative: lighten(@button-color-alternative, @button-hover-lighten-2);
@button-color-2-hover-link: lighten(@button-color-link, @button-hover-lighten-2);
@button-color-2-hover-mute: lighten(@button-color-mute, @button-hover-lighten-2);
@button-color-2-hover-cancel: lighten(@button-color-cancel, @button-hover-lighten-2);
@button-color-2-hover-success: lighten(@button-color-success, @button-hover-lighten-2);
@button-color-2-hover-info: lighten(@button-color-info, @button-hover-lighten-2);
@button-color-2-hover-warning: lighten(@button-color-warning, @button-hover-lighten-2);
@button-color-2-hover-danger: lighten(@button-color-danger, @button-hover-lighten-2);
@button-color-2-hover-color-1: lighten(@button-color-color-1, @button-hover-lighten-2);
@button-color-2-hover-color-2: lighten(@button-color-2-color-2, @button-hover-lighten-2);
@button-color-2-hover-color-3: lighten(@button-color-color-3, @button-hover-lighten-2);

@button-color-focus-body: lighten(@button-color-body, @button-focus-lighten);
@button-color-focus-primary: lighten(@button-color-primary, @button-focus-lighten);
@button-color-focus-alternative: lighten(@button-color-alternative, @button-focus-lighten);
@button-color-focus-link: lighten(@button-color-link, @button-focus-lighten);
@button-color-focus-mute: lighten(@button-color-mute, @button-focus-lighten);
@button-color-focus-cancel: lighten(@button-color-cancel, @button-focus-lighten);
@button-color-focus-success: lighten(@button-color-success, @button-focus-lighten);
@button-color-focus-info: lighten(@button-color-info, @button-focus-lighten);
@button-color-focus-warning: lighten(@button-color-warning, @button-focus-lighten);
@button-color-focus-danger: lighten(@button-color-danger, @button-focus-lighten);
@button-color-focus-color-1: lighten(@button-color-color-1, @button-focus-lighten);
@button-color-focus-color-2: lighten(@button-color-color-2, @button-focus-lighten);
@button-color-focus-color-3: lighten(@button-color-color-3, @button-focus-lighten);

@button-color-2-focus-body: lighten(@button-color-body, @button-focus-lighten-2);
@button-color-2-focus-primary: lighten(@button-color-primary, @button-focus-lighten-2);
@button-color-2-focus-alternative: lighten(@button-color-alternative, @button-focus-lighten-2);
@button-color-2-focus-link: lighten(@button-color-link, @button-focus-lighten-2);
@button-color-2-focus-mute: lighten(@button-color-mute, @button-focus-lighten-2);
@button-color-2-focus-cancel: lighten(@button-color-cancel, @button-focus-lighten-2);
@button-color-2-focus-success: lighten(@button-color-success, @button-focus-lighten-2);
@button-color-2-focus-info: lighten(@button-color-info, @button-focus-lighten-2);
@button-color-2-focus-warning: lighten(@button-color-warning, @button-focus-lighten-2);
@button-color-2-focus-danger: lighten(@button-color-danger, @button-focus-lighten-2);
@button-color-2-focus-color-1: lighten(@button-color-color-1, @button-focus-lighten-2);
@button-color-2-focus-color-2: lighten(@button-color-color-2, @button-focus-lighten-2);
@button-color-2-focus-color-3: lighten(@button-color-color-3, @button-focus-lighten-2);

@button-color-active-body: lighten(@button-color-body, @button-active-lighten);
@button-color-active-primary: lighten(@button-color-primary, @button-active-lighten);
@button-color-active-alternative: lighten(@button-color-alternative, @button-active-lighten);
@button-color-active-link: lighten(@button-color-link, @button-active-lighten);
@button-color-active-mute: lighten(@button-color-mute, @button-active-lighten);
@button-color-active-cancel: lighten(@button-color-cancel, @button-active-lighten);
@button-color-active-success: lighten(@button-color-success, @button-active-lighten);
@button-color-active-info: lighten(@button-color-info, @button-active-lighten);
@button-color-active-warning: lighten(@button-color-warning, @button-active-lighten);
@button-color-active-danger: lighten(@button-color-danger, @button-active-lighten);
@button-color-active-color-1: lighten(@button-color-color-1, @button-active-lighten);
@button-color-active-color-2: lighten(@button-color-color-2, @button-active-lighten);
@button-color-active-color-3: lighten(@button-color-color-3, @button-active-lighten);

@button-color-2-active-body: lighten(@button-color-body, @button-active-lighten-2);
@button-color-2-active-primary: lighten(@button-color-primary, @button-active-lighten-2);
@button-color-2-active-alternative: lighten(@button-color-alternative, @button-active-lighten-2);
@button-color-2-active-link: lighten(@button-color-link, @button-active-lighten-2);
@button-color-2-active-mute: lighten(@button-color-mute, @button-active-lighten-2);
@button-color-2-active-cancel: lighten(@button-color-cancel, @button-active-lighten-2);
@button-color-2-active-success: lighten(@button-color-success, @button-active-lighten-2);
@button-color-2-active-info: lighten(@button-color-info, @button-active-lighten-2);
@button-color-2-active-warning: lighten(@button-color-warning, @button-active-lighten-2);
@button-color-2-active-danger: lighten(@button-color-danger, @button-active-lighten-2);
@button-color-2-active-color-1: lighten(@button-color-color-1, @button-active-lighten-2);
@button-color-2-active-color-2: lighten(@button-color-color-2, @button-active-lighten-2);
@button-color-2-active-color-3: lighten(@button-color-color-3, @button-active-lighten-2);

// Table
@table-color: @color-body; // table text color
@table-base-color: @color-alternative; // table base thema color
@table-base-color-hover: lighten(@table-base-color, 10%); 
@table-base-color-contrast: #fff;
@table-base-color-border: @color-mute;

@table-font-size: 1rem;
@table-td-padding: 1rem 0.5rem;
@table-th-padding: 0.7rem 0.5rem;
@table-th-font-size: 0.8rem;
@table-text-align: left;

@table-tr-bgcolor-hover: lighten(@table-base-color-hover, 7%);
@table-tr-color-hover: @table-base-color-contrast;
@table-td-bgcolor-hover: @table-base-color-hover;
@table-td-color-hover: @table-base-color-contrast;
@table-col-bgcolor-hover: fade(@table-base-color-hover, 15%);
@table-border: 1px solid lighten(@table-base-color-border, 60%);
@table-background: @table-base-color-contrast;
@table-zebra-bgcolor: lighten(@table-base-color-border, 60%);

@table-mobile-td-border: 1px solid lighten(@table-base-color-border, 60%);
@table-mobile-th-width: 30%;
@table-mobile-td-width: 70%;
@table-mobile-td-padding: 0.7rem 1rem 0.7rem 1.5rem;
@table-mobile-th-padding: 0.7rem 1.5rem 0.7rem 1rem;
@table-td-width-vw-sizes: 10, 20, 30, 40, 50, 60, 70, 80, 90;

// Section

@section-radius: 4px;
@section-header-padding: 1.5rem 1rem; //with .with-padding class
@section-footer-padding: 1.5rem 1rem;  //with .with-padding class
@section-content-padding: 1.5rem 1rem; //with .with-padding class

@section-table-padding-left: 1rem;
@section-table-padding-right: 1rem;
@section-shadow: 0 0 4px rgba(21, 16, 60, 0.22);
@section-border: 1px solid lighten(@color-mute, 60%);
@section-background: #fff;
@section-margin: @h-margin * @size-l 0;

// Alert

@alert-color-success: @color-success;
@alert-color-contrast-success: @color-success-contrast;
@alert-color-warning: @color-warning;
@alert-color-contrast-warning: #fff;
@alert-color-error: @color-danger;
@alert-color-contrast-error: @color-danger-contrast;
@alert-color-info: @color-info;
@alert-color-contrast-info: @color-info-contrast;

@alert-padding: 1.5rem 4.5rem 1.5rem 2rem; //for animation
@alert-light-border: 1px solid currentColor;