From 8afe22f637223a4bfdf2d8f275207e96fc2d78b4 Mon Sep 17 00:00:00 2001 From: Yuri Kuznetsov Date: Mon, 20 Dec 2021 15:47:34 +0200 Subject: [PATCH] theme colors --- frontend/less/espo-rtl/iframe/main.less | 1 + frontend/less/espo-rtl/main.less | 3 +- frontend/less/espo-vertical/custom.less | 2 +- frontend/less/espo-vertical/iframe/main.less | 1 + frontend/less/espo-vertical/main.less | 2 + frontend/less/espo/bootstrap/alerts.less | 8 +- frontend/less/espo/bootstrap/buttons.less | 60 +++++- frontend/less/espo/bootstrap/forms.less | 13 +- frontend/less/espo/bootstrap/jumbotron.less | 2 +- frontend/less/espo/bootstrap/labels.less | 12 +- frontend/less/espo/bootstrap/list-group.less | 4 +- frontend/less/espo/bootstrap/navbar.less | 2 +- frontend/less/espo/bootstrap/popovers.less | 2 +- frontend/less/espo/bootstrap/tables.less | 7 +- frontend/less/espo/bootstrap/theme.less | 2 +- frontend/less/espo/bootstrap/type.less | 10 +- frontend/less/espo/bootstrap/variables.less | 36 ++-- frontend/less/espo/elements/type.less | 2 +- frontend/less/espo/iframe/main.less | 1 + frontend/less/espo/main.less | 6 +- .../less/espo/misc/datepicker/datepicker.less | 81 ++++++-- .../selectize/plugins/dropdown_header.less | 2 +- .../misc/selectize/selectize.bootstrap3.less | 8 +- .../less/espo/misc/selectize/selectize.less | 6 +- .../less/espo/misc/timeline/timeline.less | 8 +- frontend/less/espo/mixins.less | 185 ++++++++++++++++- frontend/less/espo/root-variables.less | 188 ++++++++++++++++++ frontend/less/espo/value-variables.less | 73 +++++++ frontend/less/espo/variables.less | 177 ++++++++++++----- .../less/hazyblue-vertical/iframe/main.less | 1 + frontend/less/hazyblue-vertical/main.less | 2 + .../less/hazyblue-vertical/variables.less | 50 ++--- frontend/less/hazyblue/iframe/main.less | 1 + frontend/less/hazyblue/main.less | 2 + .../less/sakura-vertical/iframe/main.less | 1 + frontend/less/sakura-vertical/main.less | 17 +- frontend/less/sakura/iframe/main.less | 1 + frontend/less/sakura/main.less | 15 +- frontend/less/sakura/variables.less | 21 +- .../less/violet-vertical/iframe/main.less | 1 + frontend/less/violet-vertical/main.less | 17 +- frontend/less/violet/iframe/main.less | 1 + frontend/less/violet/main.less | 15 +- frontend/less/violet/variables.less | 25 ++- 44 files changed, 852 insertions(+), 222 deletions(-) create mode 100644 frontend/less/espo/root-variables.less create mode 100644 frontend/less/espo/value-variables.less diff --git a/frontend/less/espo-rtl/iframe/main.less b/frontend/less/espo-rtl/iframe/main.less index baccecf0b7..194af90358 100644 --- a/frontend/less/espo-rtl/iframe/main.less +++ b/frontend/less/espo-rtl/iframe/main.less @@ -1,4 +1,5 @@ @import "../../espo/bootstrap/variables.less"; +@import "../../espo/value-variables.less"; @import "../../espo/variables.less"; @import "../variables.less"; diff --git a/frontend/less/espo-rtl/main.less b/frontend/less/espo-rtl/main.less index 381719ca4b..f44cdebbd2 100644 --- a/frontend/less/espo-rtl/main.less +++ b/frontend/less/espo-rtl/main.less @@ -2,15 +2,16 @@ @import "bootstrap-rtl/bootstrap-rtl.less"; +@import "../espo/value-variables.less"; @import "../espo/variables.less"; @import "variables.less"; +@import "../espo/root-variables.less"; @import "../espo/mixins.less"; @import "../espo/misc.less"; @import "../espo/layout.less"; @import "../espo/custom.less"; - @import "layout.less"; @import "custom.less"; diff --git a/frontend/less/espo-vertical/custom.less b/frontend/less/espo-vertical/custom.less index 6a071a7514..823d57415c 100644 --- a/frontend/less/espo-vertical/custom.less +++ b/frontend/less/espo-vertical/custom.less @@ -49,7 +49,7 @@ input.global-search-input { > a:hover, > a:active, > a:focus { - background-color: darken(@gray-lighter, 10%); + background-color: var(--gray-lighter-10); } } } diff --git a/frontend/less/espo-vertical/iframe/main.less b/frontend/less/espo-vertical/iframe/main.less index baccecf0b7..194af90358 100644 --- a/frontend/less/espo-vertical/iframe/main.less +++ b/frontend/less/espo-vertical/iframe/main.less @@ -1,4 +1,5 @@ @import "../../espo/bootstrap/variables.less"; +@import "../../espo/value-variables.less"; @import "../../espo/variables.less"; @import "../variables.less"; diff --git a/frontend/less/espo-vertical/main.less b/frontend/less/espo-vertical/main.less index fd38742294..53569a90f8 100644 --- a/frontend/less/espo-vertical/main.less +++ b/frontend/less/espo-vertical/main.less @@ -1,10 +1,12 @@ @import "../espo/init.less"; +@import "../espo/value-variables.less"; @import "../espo/variables.less"; @import "variables.less"; @import "../espo/mixins.less"; +@import "../espo/root-variables.less"; @import "../espo/misc.less"; @import "layout.less"; @import "../espo/custom.less"; diff --git a/frontend/less/espo/bootstrap/alerts.less b/frontend/less/espo/bootstrap/alerts.less index c4199db927..d8dbe93c55 100644 --- a/frontend/less/espo/bootstrap/alerts.less +++ b/frontend/less/espo/bootstrap/alerts.less @@ -57,17 +57,17 @@ // Generate contextual modifier classes for colorizing the alert. .alert-success { - .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); + .alert-variant-espo(@alert-success-bg; @alert-success-border; @alert-success-text); } .alert-info { - .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); + .alert-variant-espo(@alert-info-bg; @alert-info-border; @alert-info-text); } .alert-warning { - .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); + .alert-variant-espo(@alert-warning-bg; @alert-warning-border; @alert-warning-text); } .alert-danger { - .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); + .alert-variant-espo(@alert-danger-bg; @alert-danger-border; @alert-danger-text); } diff --git a/frontend/less/espo/bootstrap/buttons.less b/frontend/less/espo/bootstrap/buttons.less index 9cbb8f416f..8a703bdb04 100644 --- a/frontend/less/espo/bootstrap/buttons.less +++ b/frontend/less/espo/bootstrap/buttons.less @@ -64,26 +64,74 @@ // -------------------------------------------------- .btn-default { - .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); + .button-variant-espo( + @btn-default-color; + @btn-default-bg; + @btn-default-border; + @btn-default-bg-10; + @btn-default-bg-17; + @btn-default-border-12; + @btn-default-border-25 + ); } .btn-primary { - .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); + .button-variant-espo( + @btn-primary-color; + @btn-primary-bg; + @btn-primary-border; + @btn-primary-bg-10; + @btn-primary-bg-17; + @btn-primary-border-12; + @btn-primary-border-25 + ); } // Success appears as green .btn-success { - .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); + .button-variant-espo( + @btn-success-color; + @btn-success-bg; + @btn-success-border; + @btn-success-bg-10; + @btn-success-bg-17; + @btn-success-border-12; + @btn-success-border-25 + ); } // Info appears as blue-green .btn-info { - .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); + .button-variant-espo( + @btn-info-color; + @btn-info-bg; + @btn-info-border; + @btn-info-bg-10; + @btn-info-bg-17; + @btn-info-border-12; + @btn-info-border-25 + ); } // Warning appears as orange .btn-warning { - .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); + .button-variant-espo( + @btn-warning-color; + @btn-warning-bg; + @btn-warning-border; + @btn-warning-bg-10; + @btn-warning-bg-17; + @btn-warning-border-12; + @btn-warning-border-25 + ); } // Danger and error appear as red .btn-danger { - .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); + .button-variant-espo( + @btn-danger-color; + @btn-danger-bg; + @btn-danger-border; + @btn-danger-bg-10; + @btn-danger-bg-17; + @btn-danger-border-12; + @btn-danger-border-25 + ); } diff --git a/frontend/less/espo/bootstrap/forms.less b/frontend/less/espo/bootstrap/forms.less index 9377d3846b..eee8aceadb 100644 --- a/frontend/less/espo/bootstrap/forms.less +++ b/frontend/less/espo/bootstrap/forms.less @@ -127,7 +127,7 @@ output { .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); // Customize the `:focus` state to imitate native WebKit styles. - .form-control-focus(); + .form-control-focus-espo(); // Placeholder .placeholder(); @@ -426,7 +426,13 @@ input[type="checkbox"] { // Feedback states .has-success { - .form-control-validation(@state-success-text; @state-success-text; @state-success-bg); + .form-control-validation-espo( + @state-success-text; + @state-success-text; + @state-success-bg; + @state-success-text-10; + var(--state-success-text-10l) + ); } .has-warning { .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg); @@ -456,7 +462,8 @@ input[type="checkbox"] { display: block; // account for any element using help-block margin-top: 5px; margin-bottom: 10px; - color: lighten(@text-color, 25%); // lighten the text some for contrast + //color: lighten(@text-color, 25%); // lighten the text some for contrast + color: var(--gray-dark-25l); } diff --git a/frontend/less/espo/bootstrap/jumbotron.less b/frontend/less/espo/bootstrap/jumbotron.less index 1d9b515b38..7328b4d19e 100644 --- a/frontend/less/espo/bootstrap/jumbotron.less +++ b/frontend/less/espo/bootstrap/jumbotron.less @@ -22,7 +22,7 @@ } > hr { - border-top-color: darken(@jumbotron-bg, 10%); + border-top-color: var(--gray-lighter-10); } .container &, diff --git a/frontend/less/espo/bootstrap/labels.less b/frontend/less/espo/bootstrap/labels.less index 9a5a27006a..5284860a7b 100644 --- a/frontend/less/espo/bootstrap/labels.less +++ b/frontend/less/espo/bootstrap/labels.less @@ -40,25 +40,25 @@ // Contextual variations (linked labels get darker on :hover) .label-default { - .label-variant(@label-default-bg); + .label-variant-espo(@label-default-bg; var(--gray-light-10)); } .label-primary { - .label-variant(@label-primary-bg); + .label-variant-espo(@label-primary-bg; @brand-primary-10); } .label-success { - .label-variant(@label-success-bg); + .label-variant-espo(@label-success-bg; @brand-success-10); } .label-info { - .label-variant(@label-info-bg); + .label-variant-espo(@label-info-bg; @brand-info-10); } .label-warning { - .label-variant(@label-warning-bg); + .label-variant-espo(@label-warning-bg; @brand-warning-10); } .label-danger { - .label-variant(@label-danger-bg); + .label-variant-espo(@label-danger-bg; @brand-danger-10); } diff --git a/frontend/less/espo/bootstrap/list-group.less b/frontend/less/espo/bootstrap/list-group.less index 216b91230a..263cce7c56 100644 --- a/frontend/less/espo/bootstrap/list-group.less +++ b/frontend/less/espo/bootstrap/list-group.less @@ -110,8 +110,8 @@ button.list-group-item { // Add modifier classes to change text and background color on individual items. // Organizationally, this must come after the `:hover` states. -.list-group-item-variant(success; @state-success-bg; @state-success-text); -.list-group-item-variant(info; @state-info-bg; @state-info-text); +.list-group-item-variant-espo(success; @state-success-bg; @state-success-text; @state-success-bg-5); +.list-group-item-variant-espo(info; @state-info-bg; @state-info-text; @state-info-bg-5); .list-group-item-variant(warning; @state-warning-bg; @state-warning-text); .list-group-item-variant(danger; @state-danger-bg; @state-danger-text); diff --git a/frontend/less/espo/bootstrap/navbar.less b/frontend/less/espo/bootstrap/navbar.less index 6d751bb9ce..02552e9238 100644 --- a/frontend/less/espo/bootstrap/navbar.less +++ b/frontend/less/espo/bootstrap/navbar.less @@ -585,7 +585,7 @@ .navbar-collapse, .navbar-form { - border-color: darken(@navbar-inverse-bg, 7%); + border-color: var(--navbar-inverse-bg-7); } // Dropdowns diff --git a/frontend/less/espo/bootstrap/popovers.less b/frontend/less/espo/bootstrap/popovers.less index 3a62a6455a..4771025dab 100644 --- a/frontend/less/espo/bootstrap/popovers.less +++ b/frontend/less/espo/bootstrap/popovers.less @@ -35,7 +35,7 @@ padding: 8px 14px; font-size: @font-size-base; background-color: @popover-title-bg; - border-bottom: 1px solid darken(@popover-title-bg, 5%); + border-bottom: 1px solid var(--white-color-5); border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0; } diff --git a/frontend/less/espo/bootstrap/tables.less b/frontend/less/espo/bootstrap/tables.less index 2242c03686..e31a9c7c8b 100644 --- a/frontend/less/espo/bootstrap/tables.less +++ b/frontend/less/espo/bootstrap/tables.less @@ -155,9 +155,10 @@ table { // inheritance to nested tables. // Generate the contextual variants -.table-row-variant(active; @table-bg-active); -.table-row-variant(success; @state-success-bg); -.table-row-variant(info; @state-info-bg); +.table-row-variant-espo(active; @table-bg-active; @table-bg-active-5); + +.table-row-variant-espo(success; @state-success-bg; @state-success-bg-5); +.table-row-variant-espo(info; @state-info-bg; @state-info-bg-5); .table-row-variant(warning; @state-warning-bg); .table-row-variant(danger; @state-danger-bg); diff --git a/frontend/less/espo/bootstrap/theme.less b/frontend/less/espo/bootstrap/theme.less index fb6174427b..228652dc05 100644 --- a/frontend/less/espo/bootstrap/theme.less +++ b/frontend/less/espo/bootstrap/theme.less @@ -153,7 +153,7 @@ border-radius: @navbar-border-radius; .navbar-nav > .open > a, .navbar-nav > .active > a { - #gradient > .vertical(@start-color: @navbar-inverse-link-active-bg; @end-color: lighten(@navbar-inverse-link-active-bg, 2.5%)); + //#gradient > .vertical(@start-color: @navbar-inverse-link-active-bg; @end-color: lighten(@navbar-inverse-link-active-bg, 2.5%)); .box-shadow(inset 0 3px 9px rgba(0,0,0,.25)); } diff --git a/frontend/less/espo/bootstrap/type.less b/frontend/less/espo/bootstrap/type.less index 0d4fee4848..7337e97571 100644 --- a/frontend/less/espo/bootstrap/type.less +++ b/frontend/less/espo/bootstrap/type.less @@ -103,10 +103,10 @@ mark, color: @text-muted; } .text-primary { - .text-emphasis-variant(@brand-primary); + .text-emphasis-variant-espo(@brand-primary, @brand-primary-10); } .text-success { - .text-emphasis-variant(@state-success-text); + .text-emphasis-variant-espo(@state-success-text, @state-success-text-10); } .text-info { .text-emphasis-variant(@state-info-text); @@ -125,13 +125,13 @@ mark, // Given the contrast here, this is the only class to have its color inverted // automatically. color: #fff; - .bg-variant(@brand-primary); + .bg-variant-espo(@brand-primary, @brand-primary-10); } .bg-success { - .bg-variant(@state-success-bg); + .bg-variant-espo(@brand-primary, @state-success-bg-10); } .bg-info { - .bg-variant(@state-info-bg); + .bg-variant-espo(@state-info-bg, @state-info-bg-5); } .bg-warning { .bg-variant(@state-warning-bg); diff --git a/frontend/less/espo/bootstrap/variables.less b/frontend/less/espo/bootstrap/variables.less index 03b54980ae..d35cc901c7 100644 --- a/frontend/less/espo/bootstrap/variables.less +++ b/frontend/less/espo/bootstrap/variables.less @@ -33,7 +33,7 @@ //** Global textual link color. @link-color: @brand-primary; //** Link hover color set via `darken()` function. -@link-hover-color: darken(@link-color, 15%); +//@link-hover-color: darken(@link-color, 15%); //** Link hover decoration. @link-hover-decoration: underline; @@ -150,23 +150,23 @@ @btn-primary-color: #fff; @btn-primary-bg: @brand-primary; -@btn-primary-border: darken(@btn-primary-bg, 5%); +//@btn-primary-border: darken(@btn-primary-bg, 5%); @btn-success-color: #fff; @btn-success-bg: @brand-success; -@btn-success-border: darken(@btn-success-bg, 5%); +//@btn-success-border: darken(@btn-success-bg, 5%); @btn-info-color: #fff; @btn-info-bg: @brand-info; -@btn-info-border: darken(@btn-info-bg, 5%); +//@btn-info-border: darken(@btn-info-bg, 5%); @btn-warning-color: #fff; @btn-warning-bg: @brand-warning; -@btn-warning-border: darken(@btn-warning-bg, 5%); +//@btn-warning-border: darken(@btn-warning-bg, 5%); @btn-danger-color: #fff; @btn-danger-bg: @brand-danger; -@btn-danger-border: darken(@btn-danger-bg, 5%); +//@btn-danger-border: darken(@btn-danger-bg, 5%); @btn-link-disabled-color: @gray-light; @@ -243,7 +243,7 @@ //** Dropdown link text color. @dropdown-link-color: @gray-dark; //** Hover color for dropdown links. -@dropdown-link-hover-color: darken(@gray-dark, 5%); +//@dropdown-link-hover-color: darken(@gray-dark, 5%); //** Hover background for dropdown links. @dropdown-link-hover-bg: #f5f5f5; @@ -390,16 +390,16 @@ //=== Inverted navbar // Reset inverted navbar basics -@navbar-inverse-color: lighten(@gray-light, 15%); +//@navbar-inverse-color: lighten(@gray-light, 15%); @navbar-inverse-bg: #222; -@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); +//@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); // Inverted navbar links -@navbar-inverse-link-color: lighten(@gray-light, 15%); +//@navbar-inverse-link-color: lighten(@gray-light, 15%); @navbar-inverse-link-hover-color: #fff; @navbar-inverse-link-hover-bg: transparent; @navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; -@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); +//@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); @navbar-inverse-link-disabled-color: #444; @navbar-inverse-link-disabled-bg: transparent; @@ -498,19 +498,19 @@ @state-success-text: #3c763d; @state-success-bg: #dff0d8; -@state-success-border: darken(spin(@state-success-bg, -10), 5%); +//@state-success-border: darken(spin(@state-success-bg, -10), 5%); @state-info-text: #31708f; @state-info-bg: #d9edf7; -@state-info-border: darken(spin(@state-info-bg, -10), 7%); +//@state-info-border: darken(spin(@state-info-bg, -10), 7%); @state-warning-text: #8a6d3b; @state-warning-bg: #fcf8e3; -@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); +//@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); @state-danger-text: #a94442; @state-danger-bg: #f2dede; -@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); +//@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); //== Tooltips @@ -545,7 +545,7 @@ @popover-fallback-border-color: #ccc; //** Popover title background color -@popover-title-bg: darken(@popover-bg, 3%); +//@popover-title-bg: darken(@popover-bg, 3%); //** Popover arrow width @popover-arrow-width: 10px; @@ -684,7 +684,7 @@ //** Border color of active list elements @list-group-active-border: @list-group-active-bg; //** Text color for content within active list items -@list-group-active-text-color: lighten(@list-group-active-bg, 40%); +//@list-group-active-text-color: lighten(@list-group-active-bg, 40%); //** Text color of disabled list items @list-group-disabled-color: @gray-light; @@ -761,7 +761,7 @@ //## @well-bg: #f5f5f5; -@well-border: darken(@well-bg, 7%); +//@well-border: darken(@well-bg, 7%); //== Badges diff --git a/frontend/less/espo/elements/type.less b/frontend/less/espo/elements/type.less index 99cb827b00..1ef3aaf807 100644 --- a/frontend/less/espo/elements/type.less +++ b/frontend/less/espo/elements/type.less @@ -70,7 +70,7 @@ b, strong { } .text-primary { - color: @state-primary-text; + color: var(--state-primary-text); } .text-soft { diff --git a/frontend/less/espo/iframe/main.less b/frontend/less/espo/iframe/main.less index 67adb28d40..992df78945 100644 --- a/frontend/less/espo/iframe/main.less +++ b/frontend/less/espo/iframe/main.less @@ -1,4 +1,5 @@ @import "../bootstrap/variables.less"; +@import "../value-variables.less"; @import "../variables.less"; @import "../fonts.less"; diff --git a/frontend/less/espo/main.less b/frontend/less/espo/main.less index d962afb9e8..0ea6b15714 100644 --- a/frontend/less/espo/main.less +++ b/frontend/less/espo/main.less @@ -1,7 +1,11 @@ @import "init.less"; + +@import "value-variables.less"; @import "variables.less"; + @import "mixins.less"; +@import "root-variables.less"; @import "misc.less"; @import "layout.less"; @import "custom.less"; @@ -10,4 +14,4 @@ body { --theme-name: Espo; -} \ No newline at end of file +} diff --git a/frontend/less/espo/misc/datepicker/datepicker.less b/frontend/less/espo/misc/datepicker/datepicker.less index be5679f6a6..a8f2acdbc5 100644 --- a/frontend/less/espo/misc/datepicker/datepicker.less +++ b/frontend/less/espo/misc/datepicker/datepicker.less @@ -94,11 +94,19 @@ } &.highlighted { @highlighted-bg: @state-info-bg; - .button-variant(#000, @highlighted-bg, darken(@highlighted-bg, 20%)); + .button-variant-espo( + var(--state-info-text); + var(--state-info-bg); + var(--state-info-bg-5); + var(--state-info-bg-10); + var(--state-info-bg-17); + var(--state-info-bg-12); + var(--state-info-bg-25) + ); border-radius: 0; &.focused { - background: darken(@highlighted-bg, 10%); + background: var(--state-info-bg-10); } &.disabled, @@ -123,11 +131,19 @@ } &.range { @range-bg: @gray-lighter; - .button-variant(#000, @range-bg, darken(@range-bg, 20%)); + .button-variant-espo( + #000; + @range-bg; + var(--gray-lighter-5); + var(--gray-lighter-10); + var(--gray-lighter-17); + var(--gray-lighter-12); + var(--gray-lighter-25) + ); border-radius: 0; &.focused { - background: darken(@range-bg, 10%); + background: var(--gray-lighter-10); } &.disabled, @@ -137,11 +153,20 @@ } } &.range.highlighted { - @range-highlighted-bg: mix(@state-info-bg, @gray-lighter, 50%); - .button-variant(#000, @range-highlighted-bg, darken(@range-highlighted-bg, 20%)); + @range-highlighted-bg: var(--state-info-bg-mix); + + .button-variant-espo( + var(--state-info-text); + var(--state-info-bg-mix); + var(--state-info-bg-mix-5); + var(--state-info-bg-mix-10); + var(--state-info-bg-mix-17); + var(--state-info-bg-mix-12); + var(--state-info-bg-mix-25) + ); &.focused { - background: darken(@range-highlighted-bg, 10%); + background: var(--state-info-bg-mix-10); } &.disabled, @@ -151,8 +176,16 @@ } } &.range.today { - @range-today-bg: mix(orange, @gray-lighter, 50%); - .button-variant(#000, @range-today-bg, darken(@range-today-bg, 20%)); + @range-today-bg: var(--gray-lighter-orange-mix); + .button-variant-espo( + #000; + @range-today-bg; + var(--gray-lighter-orange-mix-5); + var(--gray-lighter-orange-mix-10); + var(--gray-lighter-orange-mix-12); + var(--gray-lighter-orange-mix-17); + var(--gray-lighter-orange-mix-25) + ); &.disabled, &.disabled:active { @@ -162,12 +195,28 @@ } &.selected, &.selected.highlighted { - .button-variant(#fff, @gray-light, @gray); + .button-variant-espo( + #fff; + @gray-light; + var(--gray-light-5); + var(--gray-light-10); + var(--gray-light-17); + var(--gray-light-12); + var(--gray-light-25) + ); text-shadow: 0 -1px 0 rgba(0,0,0,.25); } &.active, &.active.highlighted { - .button-variant(@btn-primary-color, @btn-primary-bg, @btn-primary-border); + .button-variant-espo( + var(--brand-primary-text); + var(--brand-primary); + var(--brand-primary-5); + var(--brand-primary-10); + var(--brand-primary-17); + var(--brand-primary-12); + var(--brand-primary-25) + ); text-shadow: 0 -1px 0 rgba(0,0,0,.25); } span { @@ -193,7 +242,15 @@ &.active:hover, &.active.disabled, &.active.disabled:hover { - .button-variant(@btn-primary-color, @btn-primary-bg, @btn-primary-border); + .button-variant-espo( + @btn-primary-color; + @btn-primary-bg; + @btn-primary-border; + @btn-primary-bg-10; + @btn-primary-bg-17; + @btn-primary-border-12; + @btn-primary-border-25 + ); text-shadow: 0 -1px 0 rgba(0,0,0,.25); } &.old, diff --git a/frontend/less/espo/misc/selectize/plugins/dropdown_header.less b/frontend/less/espo/misc/selectize/plugins/dropdown_header.less index c3e777e163..80fc67dd55 100644 --- a/frontend/less/espo/misc/selectize/plugins/dropdown_header.less +++ b/frontend/less/espo/misc/selectize/plugins/dropdown_header.less @@ -16,5 +16,5 @@ font-size: 20px !important; } .selectize-dropdown-header-close:hover { - color: darken(@selectize-color-text, 25%); + color: var(--gray-dark-25); } \ No newline at end of file diff --git a/frontend/less/espo/misc/selectize/selectize.bootstrap3.less b/frontend/less/espo/misc/selectize/selectize.bootstrap3.less index 731849fe87..436bc641df 100644 --- a/frontend/less/espo/misc/selectize/selectize.bootstrap3.less +++ b/frontend/less/espo/misc/selectize/selectize.bootstrap3.less @@ -38,7 +38,7 @@ @selectize-color-optgroup-text: @dropdown-header-color; @selectize-color-optgroup-border: @dropdown-divider-bg; @selectize-color-dropdown: @dropdown-bg; -@selectize-color-dropdown-border-top: mix(@input-border, @input-bg, 0.8); +@selectize-color-dropdown-border-top: @input-border; @selectize-color-dropdown-item-active: @dropdown-link-hover-bg; @selectize-color-dropdown-item-active-text: @dropdown-link-hover-color; @selectize-color-dropdown-item-create-active-text: @dropdown-link-hover-color; @@ -96,6 +96,10 @@ .selectize-dropdown-content { padding: 5px 0; + + .create { + padding: 0 8px; + } } .selectize-dropdown-header { @@ -113,7 +117,7 @@ } &.focus { @color: @input-border-focus; - @color-rgba: rgba(red(@color), green(@color), blue(@color), .6); + @color-rgba: var(--input-border-focus-rgba); border-color: @color; outline: 0; .selectize-box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); diff --git a/frontend/less/espo/misc/selectize/selectize.less b/frontend/less/espo/misc/selectize/selectize.less index a33746150d..3d88e76b02 100644 --- a/frontend/less/espo/misc/selectize/selectize.less +++ b/frontend/less/espo/misc/selectize/selectize.less @@ -27,7 +27,7 @@ @selectize-color-dropdown-border-top: #f0f0f0; @selectize-color-dropdown-item-active: #f5fafd; @selectize-color-dropdown-item-active-text: #495c68; -@selectize-color-dropdown-item-create-text: rgba(red(@selectize-color-text), green(@selectize-color-text), blue(@selectize-color-text), 0.5); +@selectize-color-dropdown-item-create-text: var(--state-danger-text); @selectize-color-dropdown-item-create-active-text: @selectize-color-dropdown-item-active-text; @selectize-color-optgroup: @selectize-color-dropdown; @selectize-color-optgroup-text: @selectize-color-text; @@ -163,13 +163,13 @@ border: @selectize-width-item-border solid @selectize-color-item-active-border; } } - .selectize-control.multi &.disabled > div { + /*.selectize-control.multi &.disabled > div { &, &.active { color: lighten(desaturate(@selectize-color-item-text, 100%), @selectize-lighten-disabled-item-text); background: lighten(desaturate(@selectize-color-item, 100%), @selectize-lighten-disabled-item); border: @selectize-width-item-border solid lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border); } - } + }*/ > input { &::-ms-clear { display: none; diff --git a/frontend/less/espo/misc/timeline/timeline.less b/frontend/less/espo/misc/timeline/timeline.less index d1f593b8d4..982dc5a40a 100644 --- a/frontend/less/espo/misc/timeline/timeline.less +++ b/frontend/less/espo/misc/timeline/timeline.less @@ -64,13 +64,13 @@ } .vis-current-time { - background-color: lighten(@brand-danger, 20%) !important; + background-color: var(--brand-danger-lighten-20) !important; } .calendar-container .timeline .vis-item, .calendar-container .timeline .vis-item.vis-selected { - border-color: lighten(@brand-primary, 30%); - background-color: lighten(@brand-primary, 50%); + border-color: var(--brand-primary-lighten-30); + background-color: var(--brand-primary-lighten-50); } .calendar-container .timeline .vis-tooltip { @@ -82,7 +82,7 @@ } .vis-item.vis-background.event-range { - border-color: lighten(@brand-primary, 10%); + border-color: var(--brand-primary-lighten-10); border-left-width: 4px ; border-right-width: 4px; border-left-style: solid; diff --git a/frontend/less/espo/mixins.less b/frontend/less/espo/mixins.less index 1b8a36b587..a3f3e17795 100644 --- a/frontend/less/espo/mixins.less +++ b/frontend/less/espo/mixins.less @@ -3,11 +3,188 @@ outline-offset: -2px; } -.form-control-focus(@color: @input-border-focus) { - @color-rgba: rgba(red(@color), green(@color), blue(@color), .6); +.form-control-focus-espo(@color-rgba: var(--input-border-focus-rgba)) { &:focus { - border-color: @color; + border-color: var(--input-border-focus); outline: 0; .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); } -} \ No newline at end of file +} + +.button-variant-espo(@color; @background; @border; @background-10; @background-17; @border-12; @border-25) { + color: @color; + background-color: @background; + border-color: @border; + + &:focus, + &.focus { + color: @color; + background-color: @background-10; + border-color: @border-25; + } + &:hover { + color: @color; + background-color: @background-10; + border-color: @border-12; + } + &:active, + &.active, + .open > .dropdown-toggle& { + color: @color; + background-color: @background-10; + border-color: @border-12; + + &:hover, + &:focus, + &.focus { + color: @color; + background-color: @background-17; + border-color: @border-25; + } + } + &:active, + &.active, + .open > .dropdown-toggle& { + background-image: none; + } + &.disabled, + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus, + &.focus { + background-color: @background; + border-color: @border; + } + } + + .badge { + color: @background; + background-color: @color; + } +} + +.table-row-variant-espo(@state; @background; @background-5) { + // Exact selectors below required to override `.table-striped` and prevent + // inheritance to nested tables. + .table > thead > tr, + .table > tbody > tr, + .table > tfoot > tr { + > td.@{state}, + > th.@{state}, + &.@{state} > td, + &.@{state} > th { + background-color: @background; + } + } + + // Hover states for `.table-hover` + // Note: this is not available for cells or rows within `thead` or `tfoot`. + .table-hover > tbody > tr { + > td.@{state}:hover, + > th.@{state}:hover, + &.@{state}:hover > td, + &:hover > .@{state}, + &.@{state}:hover > th { + background-color: @background-5; + } + } +} + +.text-emphasis-variant-espo(@color, @color-10) { + color: @color; + a&:hover, + a&:focus { + color: @color-10; + } +} + +.bg-variant-espo(@color, @color-10) { + background-color: @color; + a&:hover, + a&:focus { + background-color: @color-10; + } +} + +.label-variant-espo(@color, @color-10) { + background-color: @color; + + &[href] { + &:hover, + &:focus { + background-color: @color-10; + } + } +} + +.list-group-item-variant-espo(@state; @background; @color; @background-5) { + .list-group-item-@{state} { + color: @color; + background-color: @background; + + a&, + button& { + color: @color; + + .list-group-item-heading { + color: inherit; + } + + &:hover, + &:focus { + color: @color; + background-color: @background-5; + } + &.active, + &.active:hover, + &.active:focus { + color: #fff; + background-color: @color; + border-color: @color; + } + } + } +} + +.form-control-validation-espo(@text-color; @border-color; @background-color; @border-color-1; @border-color-2) { + // Color the label and help text + .help-block, + .control-label, + .radio, + .checkbox, + .radio-inline, + .checkbox-inline, + &.radio label, + &.checkbox label, + &.radio-inline label, + &.checkbox-inline label { + color: @text-color; + } + // Set the border and box shadow on specific inputs to match + .form-control { + border-color: @border-color; + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work + &:focus { + border-color: @border-color-1; + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px @border-color-2; + .box-shadow(@shadow); + } + } + // Set validation states also for addons + .input-group-addon { + color: @text-color; + border-color: @border-color; + background-color: @background-color; + } + // Optional feedback icon + .form-control-feedback { + color: @text-color; + } +} + +.alert-variant-espo(@background; @border; @text-color) { + background-color: @background; + border-color: @border; + color: @text-color; +} diff --git a/frontend/less/espo/root-variables.less b/frontend/less/espo/root-variables.less new file mode 100644 index 0000000000..71e7b5d544 --- /dev/null +++ b/frontend/less/espo/root-variables.less @@ -0,0 +1,188 @@ +:root { + --body-bg: @body-bg-value; + --panel-bg: @panel-bg-value; + --main-gray: @main-gray-value; + + --white-color: @white-color-value; + + --white-color-3: darken(@white-color-value, 3%); + --white-color-5: darken(@white-color-value, 5%); + + --gray-base: @gray-base-value; + --gray-soft: @gray-soft-value; + --gray-dark: @gray-dark-value; + --gray-light: @gray-light-value; + --gray-lighter: @gray-lighter-value; + + --gray-light-5: darken(@gray-light-value, 5%); + --gray-light-7: darken(@gray-light-value, 7%); + --gray-light-10: darken(@gray-light-value, 10%); + --gray-light-12: darken(@gray-light-value, 12%); + --gray-light-17: darken(@gray-light-value, 17%); + --gray-light-25: darken(@gray-light-value, 25%); + --gray-light-40: darken(@gray-light-value, 40%); + + --gray-dark-5: darken(@gray-dark-value, 5%); + --gray-dark-7: darken(@gray-dark-value, 7%); + --gray-dark-10: darken(@gray-dark-value, 10%); + --gray-dark-12: darken(@gray-dark-value, 12%); + --gray-dark-17: darken(@gray-dark-value, 17%); + --gray-dark-25: darken(@gray-dark-value, 25%); + --gray-dark-40: darken(@gray-dark-value, 40%); + + --gray-dark-25l: lighten(@gray-dark-value, 25%); + + --gray-lighter-5: darken(@gray-lighter-value, 5%); + --gray-lighter-7: darken(@gray-lighter-value, 7%); + --gray-lighter-10: darken(@gray-lighter-value, 10%); + --gray-lighter-12: darken(@gray-lighter-value, 12%); + --gray-lighter-17: darken(@gray-lighter-value, 17%); + --gray-lighter-25: darken(@gray-lighter-value, 25%); + --gray-lighter-40: darken(@gray-lighter-value, 40%); + + --gray-lighter-orange-mix: @gray-lighter-orange-mix-value; + + --gray-lighter-orange-mix-5: darken(@gray-lighter-orange-mix-value, 5%); + --gray-lighter-orange-mix-7: darken(@gray-lighter-orange-mix-value, 7%); + --gray-lighter-orange-mix-10: darken(@gray-lighter-orange-mix-value, 10%); + --gray-lighter-orange-mix-12: darken(@gray-lighter-orange-mix-value, 12%); + --gray-lighter-orange-mix-17: darken(@gray-lighter-orange-mix-value, 17%); + --gray-lighter-orange-mix-25: darken(@gray-lighter-orange-mix-value, 25%); + --gray-lighter-orange-mix-40: darken(@gray-lighter-orange-mix-value, 40%); + + --brand-primary: @brand-primary-value; + --brand-danger: @brand-danger-value; + --brand-info: @brand-info-value; + --brand-success: @brand-success-value; + --brand-warning: @brand-warning-value; + + --main-gray-5: darken(@main-gray-value, 5%); + --main-gray-7: darken(@main-gray-value, 7%); + --main-gray-10: darken(@main-gray-value, 10%); + --main-gray-12: darken(@main-gray-value, 12%); + --main-gray-17: darken(@main-gray-value, 17%); + --main-gray-25: darken(@main-gray-value, 25%); + --main-gray-40: darken(@main-gray-value, 40%); + --main-gray-lighten-40: lighten(@main-gray-value, 40%); + + --brand-primary-text: @brand-primary-text-value; + + --brand-primary-5: darken(@brand-primary-value, 5%); + --brand-primary-10: darken(@brand-primary-value, 10%); + --brand-primary-12: darken(@brand-primary-value, 12%); + --brand-primary-15: darken(@brand-primary-value, 15%); + --brand-primary-17: darken(@brand-primary-value, 17%); + --brand-primary-25: darken(@brand-primary-value, 25%); + + --brand-primary-lighten-10: lighten(@brand-primary-value, 10%); + --brand-primary-lighten-30: lighten(@brand-primary-value, 30%); + --brand-primary-lighten-50: lighten(@brand-primary-value, 50%); + + --state-primary-text: @state-primary-text-value; + + --brand-danger-5: darken(@brand-danger-value, 5%); + --brand-danger-10: darken(@brand-danger-value, 10%); + --brand-danger-12: darken(@brand-danger-value, 12%); + --brand-danger-15: darken(@brand-danger-value, 15%); + --brand-danger-17: darken(@brand-danger-value, 17%); + --brand-danger-25: darken(@brand-danger-value, 25%); + --brand-danger-lighten-20: lighten(@brand-danger-value, 20%); + + --state-danger-bg: @state-danger-bg-value; + --state-danger-text: @state-danger-text-value; + + --state-danger-bg-5: darken(@state-danger-bg-value, 5%); + --state-danger-bg-10: darken(@state-danger-bg-value, 10%); + + --brand-info-5: darken(@brand-info-value, 5%); + --brand-info-10: darken(@brand-info-value, 10%); + --brand-info-12: darken(@brand-info-value, 12%); + --brand-info-15: darken(@brand-info-value, 15%); + --brand-info-17: darken(@brand-info-value, 17%); + --brand-info-25: darken(@brand-info-value, 25%); + + --state-info-bg: @state-info-bg-value; + --state-info-bg-5: darken(@state-info-bg-value, 5%); + --state-info-bg-10: darken(@state-info-bg-value, 10%); + --state-info-bg-12: darken(@state-info-bg-value, 12%); + --state-info-bg-17: darken(@state-info-bg-value, 17%); + --state-info-bg-25: darken(@state-info-bg-value, 25%); + + --state-info-bg-mix: @state-info-bg-mix-value; + --state-info-bg-mix-5: darken(@state-info-bg-mix-value, 5%); + --state-info-bg-mix-10: darken(@state-info-bg-mix-value, 10%); + --state-info-bg-mix-12: darken(@state-info-bg-mix-value, 12%); + --state-info-bg-mix-17: darken(@state-info-bg-mix-value, 17%); + --state-info-bg-mix-25: darken(@state-info-bg-mix-value, 25%); + + --brand-success-5: darken(@brand-success-value, 5%); + --brand-success-10: darken(@brand-success-value, 10%); + --brand-success-12: darken(@brand-success-value, 12%); + --brand-success-15: darken(@brand-success-value, 15%); + --brand-success-17: darken(@brand-success-value, 17%); + --brand-success-25: darken(@brand-success-value, 25%); + + --state-success-text: @state-success-text-value; + --state-success-bg: @state-success-bg-value; + + --state-success-bg-5: darken(@state-success-bg-value, 5%); + --state-success-bg-10: darken(@state-success-bg-value, 10%); + --state-success-text-10: darken(@state-success-text-value, 10%); + --state-success-text-10l: lighten(darken(@state-success-text-value, 10%), 20); + + --brand-warning-5: darken(@brand-warning-value, 5%); + --brand-warning-10: darken(@brand-warning-value, 10%); + --brand-warning-12: darken(@brand-warning-value, 12%); + --brand-warning-15: darken(@brand-warning-value, 15%); + --brand-warning-17: darken(@brand-warning-value, 17%); + --brand-warning-25: darken(@brand-warning-value, 25%); + + --state-warning-bg: @state-warning-bg-value; + --state-warning-text: @state-warning-text-value; + + --state-warning-bg-5: darken(@state-warning-bg-value, 5%); + --state-warning-bg-10: darken(@state-warning-bg-value, 10%); + + --navbar-inverse-color: @navbar-inverse-color-value; + --navbar-inverse-bg: @navbar-inverse-bg-value; + --navbar-inverse-link-color: @navbar-inverse-link-color-value; + --navbar-inverse-link-active-bg: darken(@navbar-inverse-bg-value, 10%); + --navbar-inverse-border: @navbar-inverse-border-value; + --navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg-value, 10%); + --navbar-inverse-bg-7: darken(@navbar-inverse-bg-value, 7%); + --navbar-inverse-link-hover-color: @navbar-inverse-link-hover-color-value; + --navbar-inverse-link-hover-bg: @navbar-inverse-link-hover-bg-value; + --navbar-inverse-link-disabled-color: @navbar-inverse-link-disabled-color-value; + --navbar-inverse-link-disabled-bg: @navbar-inverse-link-disabled-bg-value; + + --input-border: @input-border-value; + --input-border-focus: @input-border-focus-value; + --input-border-focus-rgba: rgba( + red(@input-border-focus-value), + green(@input-border-focus-value), + blue(@input-border-focus-value), + .6 + ); + + --modal-backdrop-bg: @modal-backdrop-bg-value; + + --text-color: @text-color-value; + + --link-color: @link-color-value; + --link-hover-color: @link-hover-color-value; + + --table-bg-accent: @table-bg-accent-value; + --code-bg: @code-bg-value; + + --default-border-color: @default-border-color-value; + + --panel-primary-border: @panel-primary-border-value; + --panel-default-border: @panel-default-border-value; + + --panel-warning-bg: @panel-warning-bg-value; + + --btn-default-bg: @btn-default-bg-value; + --btn-default-border: @btn-default-border-value; + + --login-panel-heading-bg: @login-panel-heading-bg-value; +} diff --git a/frontend/less/espo/value-variables.less b/frontend/less/espo/value-variables.less new file mode 100644 index 0000000000..665c1c2614 --- /dev/null +++ b/frontend/less/espo/value-variables.less @@ -0,0 +1,73 @@ +@main-gray-value: #E8ECED; + +@white-color-value: #fafbfc; + +@gray-base-value: #000; +@gray-soft-value: lighten(@gray-base-value, 39.0%); +@gray-dark-value: lighten(@gray-base-value, 20%); +@gray-light-value: lighten(@gray-base, 46.7%); +@gray-lighter-value: lighten(@gray-base-value, 93.5%); + +@gray-light-value: #999; + +@body-bg-value: #FEFEFE; + +@brand-primary-value: #5184B0; +@brand-danger-value: #CF605D; +@brand-info-value: #a595c9; +@brand-success-value: #87C956; +@brand-warning-value: #EF990E; + +@brand-primary-text-value: #FFF; + +@state-primary-text-value: #5b9aca; + +@state-success-bg-value: lighten(spin(@brand-success-value, 5), 31%); +@state-success-text-value: darken(spin(@brand-success-value, 7), 17%); + +@state-info-bg-value: #e5ddf8; +@state-info-text-value: #83779c; + +@state-warning-bg-value: #fcf8e3; +@state-warning-text-value: #9E7328; + +@state-danger-text-value: #ad4846; +@state-danger-bg-value: #f2dede; + +@state-info-bg-mix-value: mix(@state-info-bg-value, lighten(@gray-base-value, 93.5%), 50%); + +@navbar-inverse-color-value: @gray-light-value; +@navbar-inverse-bg-value: #4A6492; +@navbar-inverse-border-value: transparent; +@navbar-inverse-link-color-value: #DFDFDF; +@navbar-inverse-link-hover-color-value: #fff; +@navbar-inverse-link-hover-bg-value: transparent; +@navbar-inverse-link-disabled-color-value: #444; +@navbar-inverse-link-disabled-bg-value: transparent; + +@input-border-value: #D1D5D6; +@input-border-focus-value: #66afe9; + +@modal-backdrop-bg-value: #DBDBDB; + +@text-color-value: @gray-dark-value; + +@link-color-value: @brand-primary-value; +@link-hover-color-value: darken(@link-color-value, 15%); + +@panel-bg-value: @body-bg-value; +@table-bg-accent-value: #f9f9f9; +@code-bg-value: #f9f9f9; + +@default-border-color-value: @main-gray; + +@panel-primary-border-value: darken(@brand-primary-value, 12%); +@panel-default-border-value: @default-border-color; +@panel-warning-bg-value: #efda97; + +@btn-default-bg-value: @main-gray; +@btn-default-border-value: @main-gray; + +@login-panel-heading-bg-value: @navbar-inverse-bg-value; + +@gray-lighter-orange-mix-value: mix(orange, @gray-lighter-value, 50%); diff --git a/frontend/less/espo/variables.less b/frontend/less/espo/variables.less index a9374eecf2..a8d8248a9d 100644 --- a/frontend/less/espo/variables.less +++ b/frontend/less/espo/variables.less @@ -1,5 +1,83 @@ -@line-height-base: 1.36; -@line-height-computed: floor(@font-size-base * @line-height-base); + +@gray-base: @gray-base-value; + +@white-color: var(--white-color); + +@body-bg: var(--body-bg); +@panel-bg: var(--panel-bg); +@main-gray: var(--main-gray); +@gray-soft: var(--gray-soft); +@gray-dark: var(--gray-dark); +@gray-light: var(--gray-light); +@gray-lighter: var(--gray-lighter); + +@btn-default-bg: var(--btn-default-bg); +@btn-default-border: var(--btn-default-border); + +@btn-danger-bg: var(--brand-danger-5); +@btn-info-border: var(--brand-info-5); +@btn-success-border: var(--brand-success-5); +@btn-warning-border: var(--brand-warning-5); + +@btn-default-bg-10: var(--main-gray-5); +@btn-default-border-12: var(--main-gray-12); +@btn-default-bg-17: var(--main-gray-17); +@btn-default-border-25: var(--main-gray-25); + +@btn-primary-bg-10: var(--brand-primary-10); +@btn-primary-border-12: var(--brand-primary-12); +@btn-primary-bg-17: var(--brand-primary-17); +@btn-primary-border-25: var(--brand-primary-25); + +@btn-danger-bg-10: var(--brand-danger-10); +@btn-danger-border-12: var(--brand-danger-12); +@btn-danger-bg-17: var(--brand-danger-17); +@btn-danger-border-25: var(--brand-danger-25); + +@btn-info-bg-10: var(--brand-info-10); +@btn-info-border-12: var(--brand-info-12); +@btn-info-bg-17: var(--brand-info-17); +@btn-info-border-25: var(--brand-info-25); + +@btn-success-bg-10: var(--brand-success-10); +@btn-success-border-12: var(--success-info-12); +@btn-success-bg-17: var(--brand-success-17); +@btn-success-border-25: var(--brand-success-25); + +@btn-warning-bg-10: var(--brand-warning-10); +@btn-warning-border-12: var(--warning-info-12); +@btn-warning-bg-17: var(--brand-warning-17); +@btn-warning-border-25: var(--brand-warning-25); + +@brand-primary-10: var(--brand-primary-10); +@brand-danger-10 : var(--brand-danger-10); +@brand-info-10: var(--brand-info-10); +@brand-success-10: var(--brand-success-10); +@brand-warning-10: var(--brand-warning-10); + +@default-heading-bg-color: @main-gray; + +@brand-primary: var(--brand-primary); +@brand-danger: var(--brand-danger); +@brand-info: var(--brand-info); +@brand-success: var(--brand-success); +@brand-warning: var(--brand-warning); + +@text-color: var(--text-color); + +@link-color: var(--link-color); +@link-hover-color: var(--link-hover-color); + +@table-bg-hover: @default-heading-bg-color; +@table-bg-active-5: var(--main-gray-5); + +@list-group-active-text-color: var(--main-gray-lighten-40); + +@input-border: var(--input-border); +@input-border-focus: var(--input-border-focus); + +@line-height-base: 1.36; +@line-height-computed: floor(@font-size-base * @line-height-base); @headings-line-height: 1; @font-family-sans-serif: 'Open Sans', sans-serif; @@ -47,7 +125,7 @@ @button-radius: 0px; @modal-title-padding: 10px; -@modal-backdrop-bg: #DBDBDB; +@modal-backdrop-bg: var(--modal-backdrop-bg); @padding-base-horizontal: 10px; @@ -56,89 +134,75 @@ @tob-bar-height: @navbar-height; -@brand-primary: #5184B0; -@brand-danger: #CF605D; -@brand-info: #a595c9; -@brand-success: #87C956; -@brand-warning: #EF990E; +@state-success-bg: var(--state-success-bg); +@state-success-text: var(--state-success-text); -@state-info-bg: #e5ddf8; -@state-info-text: #83779c; +@state-success-bg-5: var(--state-success-bg-5); +@state-success-bg-10: var(--state-success-bg-10); -@state-warning-bg: #fcf8e3; -@state-warning-text: #9E7328; +@state-success-border: var(--state-success-bg-5); +@state-success-text-10: var(--state-success-text-10); -@state-success-bg: lighten(spin(@brand-success, 5), 31%); -@state-success-text: darken(spin(@brand-success, 7), 17%); +@state-danger-border: var(--state-danger-bg-10); -@state-danger-text: #ad4846; -@state-danger-bg: #f2dede; -@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); +@state-info-bg: var(--state-info-bg); +@state-info-bg-5: var(--state-info-bg-5); -@state-primary-text: #5b9aca; +@state-info-border: var(--state-info-bg-10); -@panel-warning-bg: #efda97; +@state-warning-border: var(--state-warning-bg-10); -@panel-primary-border: lighten(@brand-primary, 12%); +@panel-warning-bg: var(--panel-warning-bg); -@gray-light: #999; -@main-gray: #E8ECED; +@panel-primary-border: var(--panel-primary-border); -@input-border: #D1D5D6; +@table-bg-accent: var(--table-bg-accent); +@code-bg: var(--code-bg); -@btn-default-bg: @main-gray; -@btn-default-border: @main-gray; - -@table-bg-accent: #f9f9f9; - -@code-bg: #f9f9f9; @code-color: @text-color; @pre-border-color: @main-gray; @pre-bg: @code-bg; +@btn-primary-border: var(--brand-primary-5); + @btn-success-border: @btn-success-bg; @btn-primary-border: @btn-primary-bg; @btn-danger-border: @btn-danger-bg; @btn-info-border: @btn-info-bg; @btn-warning-border: @btn-warning-bg; -@navbar-inverse-color: @gray-light; -@navbar-inverse-bg: #4A6492; -@navbar-inverse-border: transparent; -@navbar-inverse-link-color: #DFDFDF; -@navbar-inverse-link-hover-color: #fff; -@navbar-inverse-link-hover-bg: transparent; -@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; -@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); -@navbar-inverse-link-disabled-color: #444; -@navbar-inverse-link-disabled-bg: transparent; -@navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg, 10%); - -@white-color: #fafbfc; +@navbar-inverse-color: var(--navbar-inverse-color); +@navbar-inverse-bg: var(--navbar-inverse-bg); +@navbar-inverse-link-active-bg: var(--navbar-inverse-link-active-bg); +@navbar-inverse-border: var(--navbar-inverse-border); +@navbar-inverse-link-color: var(--navbar-inverse-link-color); +@navbar-inverse-toggle-hover-bg: var(--navbar-inverse-toggle-hover-bg); +@navbar-inverse-link-hover-color: var(--navbar-inverse-link-hover-color); +@navbar-inverse-link-hover-bg: var(--navbar-inverse-link-hover-bg); +@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; +@navbar-inverse-link-disabled-color: var(--navbar-inverse-link-disabled-color); +@navbar-inverse-link-disabled-bg: var(--navbar-inverse-link-disabled-bg); @panel-primary-text: @white-color; -@gray-soft: lighten(@gray-base, 39.0%); - -@body-bg: #FEFEFE; -@panel-bg: #FFF; - -@default-border-color: @main-gray; -@default-heading-bg-color: @main-gray; - @well-bg: @default-heading-bg-color; @breadcrumb-bg: @default-heading-bg-color; -@table-bg-hover: @default-heading-bg-color; + +@well-border: var(--main-gray-7); + @progress-bg: @default-heading-bg-color; @list-group-hover-bg: @default-heading-bg-color; @panel-footer-bg: @default-heading-bg-color; @panel-default-heading-bg: @default-heading-bg-color; -@panel-default-border: @default-border-color; +@default-border-color: var(--default-border-color); + +@panel-default-border: var(--default-border-color); + @list-group-border: @default-border-color; @panel-inner-border: @default-border-color; -@panel-default-border: @default-border-color; + @thumbnail-border: @default-border-color; @table-border-color: @default-border-color; @navbar-default-toggle-hover-bg: @default-border-color; @@ -160,7 +224,7 @@ @navbar-height-xsmall: 37px; @navbar-logo-height-xsmall: 37px; -@login-panel-heading-bg: @navbar-inverse-bg; +@login-panel-heading-bg: var(--login-panel-heading-bg); @logo-width: 181px; @logo-height: @navbar-height; @@ -193,3 +257,8 @@ @global-search-panel-width: 600px; @well-padding: 14px; + +@dropdown-link-hover-color: var(--gray-dark-5); + +@popover-bg: @white-color; +@popover-title-bg: var(--white-color-3); diff --git a/frontend/less/hazyblue-vertical/iframe/main.less b/frontend/less/hazyblue-vertical/iframe/main.less index baccecf0b7..194af90358 100644 --- a/frontend/less/hazyblue-vertical/iframe/main.less +++ b/frontend/less/hazyblue-vertical/iframe/main.less @@ -1,4 +1,5 @@ @import "../../espo/bootstrap/variables.less"; +@import "../../espo/value-variables.less"; @import "../../espo/variables.less"; @import "../variables.less"; diff --git a/frontend/less/hazyblue-vertical/main.less b/frontend/less/hazyblue-vertical/main.less index 48325fa059..ade46f65bb 100644 --- a/frontend/less/hazyblue-vertical/main.less +++ b/frontend/less/hazyblue-vertical/main.less @@ -1,10 +1,12 @@ @import "../espo/init.less"; +@import "../espo/value-variables.less"; @import "../espo/variables.less"; @import "../espo-vertical/variables.less"; @import "../espo/mixins.less"; +@import "../espo/root-variables.less"; @import "../espo/misc.less"; @import "../espo-vertical/layout.less"; @import "../espo/custom.less"; diff --git a/frontend/less/hazyblue-vertical/variables.less b/frontend/less/hazyblue-vertical/variables.less index ceafd39bfb..1076847dd0 100644 --- a/frontend/less/hazyblue-vertical/variables.less +++ b/frontend/less/hazyblue-vertical/variables.less @@ -1,34 +1,34 @@ -@navbar-inverse-bg: #546E7A; -@body-bg: #f3f3f3; -@top-navbar-bg-color: @body-bg; +@body-bg-value: #f3f3f3; +@white-color-value: #FFF; +@panel-bg-value: @white-color-value; +@modal-backdrop-bg-value: #a3b3c7; +@navbar-inverse-bg-value: #546E7A; + +@state-info-bg-value: #dbd0f5; +@state-info-bg-value: #e2e2e2; +@state-info-text-value: @text-color; + +@brand-success-value: #85b75f; +@brand-primary-value: #537898; +@brand-info-value: #aba8cc; +@brand-warning-value: #e4a133; + +@panel-default-border-value: #dcdcdc; +@panel-primary-border-value: #849fab; + +@btn-default-bg-value: #f7f7f7; +@btn-default-border-value: #cccccc; + +@input-border-focus-value: #99b4cc; + @navbar-bg: @body-bg; -@white-color: #FFF; +@top-navbar-bg-color: @body-bg; @panel-default-heading-bg: @white-color; @modal-header-bg: @white-color; -@panel-border-width: 0; - -@panel-default-border: #dcdcdc; - -@btn-default-bg: #f7f7f7; -@btn-default-border: #cccccc; - -@brand-success: #85b75f; -@brand-primary: #537898; -@brand-info: #aba8cc; -@brand-warning: #e4a133; - -@state-info-bg: #dbd0f5; -@panel-primary-border: #849fab; - -@state-info-bg: #e2e2e2; -@state-info-text: @text-color; - @well-bg: @white-color; -@modal-backdrop-bg: #a3b3c7; - -@input-border-focus: #99b4cc; \ No newline at end of file +@panel-border-width: 0; diff --git a/frontend/less/hazyblue/iframe/main.less b/frontend/less/hazyblue/iframe/main.less index fa001fbdcc..b691d8c99d 100644 --- a/frontend/less/hazyblue/iframe/main.less +++ b/frontend/less/hazyblue/iframe/main.less @@ -1,4 +1,5 @@ @import "../../espo/bootstrap/variables.less"; +@import "../../espo/value-variables.less"; @import "../../espo/variables.less"; @import "../../hazyblue-vertical/variables.less"; diff --git a/frontend/less/hazyblue/main.less b/frontend/less/hazyblue/main.less index f713ec1ea9..c3bab1e9d1 100644 --- a/frontend/less/hazyblue/main.less +++ b/frontend/less/hazyblue/main.less @@ -1,10 +1,12 @@ @import "../espo/init.less"; +@import "../espo/value-variables.less"; @import "../espo/variables.less"; @import "../hazyblue-vertical/variables.less"; @import "../espo/mixins.less"; +@import "../espo/root-variables.less"; @import "../espo/misc.less"; @import "../espo/layout.less"; @import "../espo/custom.less"; diff --git a/frontend/less/sakura-vertical/iframe/main.less b/frontend/less/sakura-vertical/iframe/main.less index f5ec776010..167447d5a4 100644 --- a/frontend/less/sakura-vertical/iframe/main.less +++ b/frontend/less/sakura-vertical/iframe/main.less @@ -1,4 +1,5 @@ @import "../../espo/bootstrap/variables.less"; +@import "../../espo/value-variables.less"; @import "../../espo/variables.less"; @import "../../sakura/variables.less"; diff --git a/frontend/less/sakura-vertical/main.less b/frontend/less/sakura-vertical/main.less index 45dea53664..481aba04e6 100644 --- a/frontend/less/sakura-vertical/main.less +++ b/frontend/less/sakura-vertical/main.less @@ -1,18 +1,13 @@ -@import "../espo/init.less"; +@import (css) "espo-vertical.css"; +@import "../espo/bootstrap/variables.less"; + +@import "../espo/value-variables.less"; @import "../espo/variables.less"; @import "../sakura/variables.less"; -@import "../espo-vertical/variables.less"; -@import "../espo/mixins.less"; - -@import "../espo/misc.less"; -@import "../espo-vertical/layout.less"; -@import "../espo/custom.less"; -@import "../espo-vertical/custom.less"; - -@import "../espo/utilities.less"; +@import "../espo/root-variables.less"; body { - --theme-name: SakuraVertical; + --theme-name: SakuraVertical !important; } diff --git a/frontend/less/sakura/iframe/main.less b/frontend/less/sakura/iframe/main.less index baccecf0b7..194af90358 100644 --- a/frontend/less/sakura/iframe/main.less +++ b/frontend/less/sakura/iframe/main.less @@ -1,4 +1,5 @@ @import "../../espo/bootstrap/variables.less"; +@import "../../espo/value-variables.less"; @import "../../espo/variables.less"; @import "../variables.less"; diff --git a/frontend/less/sakura/main.less b/frontend/less/sakura/main.less index 0d6bdfbf5c..1d3c95390b 100644 --- a/frontend/less/sakura/main.less +++ b/frontend/less/sakura/main.less @@ -1,14 +1,13 @@ -@import "../espo/init.less"; +@import (css) "espo.css"; + +@import "../espo/bootstrap/variables.less"; + +@import "../espo/value-variables.less"; @import "../espo/variables.less"; @import "variables.less"; -@import "../espo/mixins.less"; -@import "../espo/misc.less"; -@import "../espo/layout.less"; -@import "../espo/custom.less"; - -@import "../espo/utilities.less"; +@import "../espo/root-variables.less"; body { - --theme-name: Sakura; + --theme-name: Sakura !important; } diff --git a/frontend/less/sakura/variables.less b/frontend/less/sakura/variables.less index 4ef0e7bc17..f7543966cf 100644 --- a/frontend/less/sakura/variables.less +++ b/frontend/less/sakura/variables.less @@ -1,15 +1,14 @@ +@input-border-value: #ececec; +@body-bg-value: #FAFBFC; -@main-gray: #ececec; -@input-border: #ececec; +@main-gray-value: #ececec; -@body-bg: #FAFBFC; +@brand-primary-value: #6490b7; +@brand-success-value: #83CD77; +@brand-warning-value: #e4a133; -@brand-primary: #6490b7; -@brand-success: #83CD77; -@brand-warning: #e4a133; +@navbar-inverse-color-value: #FFF; +@navbar-inverse-bg-value: #9a6373; +@navbar-inverse-link-color-value: #F7F7F7; -@navbar-inverse-color: #FFF; -@navbar-inverse-bg: #9a6373; -@navbar-inverse-link-color: #F7F7F7; - -@login-panel-heading-bg: @brand-primary; +@login-panel-heading-bg-value: @brand-primary-value; diff --git a/frontend/less/violet-vertical/iframe/main.less b/frontend/less/violet-vertical/iframe/main.less index 220549a6f8..2cfd546e84 100644 --- a/frontend/less/violet-vertical/iframe/main.less +++ b/frontend/less/violet-vertical/iframe/main.less @@ -1,4 +1,5 @@ @import "../../espo/bootstrap/variables.less"; +@import "../../espo/value-variables.less"; @import "../../espo/variables.less"; @import "../../violet/variables.less"; diff --git a/frontend/less/violet-vertical/main.less b/frontend/less/violet-vertical/main.less index 82b74f939b..760596bb6d 100644 --- a/frontend/less/violet-vertical/main.less +++ b/frontend/less/violet-vertical/main.less @@ -1,18 +1,13 @@ -@import "../espo/init.less"; +@import (css) "espo-vertical.css"; +@import "../espo/bootstrap/variables.less"; + +@import "../espo/value-variables.less"; @import "../espo/variables.less"; @import "../violet/variables.less"; -@import "../espo-vertical/variables.less"; -@import "../espo/mixins.less"; - -@import "../espo/misc.less"; -@import "../espo-vertical/layout.less"; -@import "../espo/custom.less"; -@import "../espo-vertical/custom.less"; - -@import "../espo/utilities.less"; +@import "../espo/root-variables.less"; body { - --theme-name: VioletVertical; + --theme-name: VioletVertical !important; } diff --git a/frontend/less/violet/iframe/main.less b/frontend/less/violet/iframe/main.less index baccecf0b7..194af90358 100644 --- a/frontend/less/violet/iframe/main.less +++ b/frontend/less/violet/iframe/main.less @@ -1,4 +1,5 @@ @import "../../espo/bootstrap/variables.less"; +@import "../../espo/value-variables.less"; @import "../../espo/variables.less"; @import "../variables.less"; diff --git a/frontend/less/violet/main.less b/frontend/less/violet/main.less index b49e1c81ca..2f6e5bd518 100644 --- a/frontend/less/violet/main.less +++ b/frontend/less/violet/main.less @@ -1,14 +1,13 @@ -@import "../espo/init.less"; +@import (css) "espo.css"; + +@import "../espo/bootstrap/variables.less"; + +@import "../espo/value-variables.less"; @import "../espo/variables.less"; @import "variables.less"; -@import "../espo/mixins.less"; -@import "../espo/misc.less"; -@import "../espo/layout.less"; -@import "../espo/custom.less"; - -@import "../espo/utilities.less"; +@import "../espo/root-variables.less"; body { - --theme-name: Violet; + --theme-name: Violet !important; } diff --git a/frontend/less/violet/variables.less b/frontend/less/violet/variables.less index 3435aefa4c..77fdac3596 100644 --- a/frontend/less/violet/variables.less +++ b/frontend/less/violet/variables.less @@ -1,18 +1,17 @@ +@input-border-value: @main-gray; +@body-bg-value: #FAFBFC; -@main-gray: #E4E7F2; -@input-border: @main-gray; +@link-color-value: #6e86ca; -@body-bg: #FAFBFC; +@main-gray-value: #E4E7F2; -@brand-primary: #768ED2; -@brand-success: #7BC169; -@brand-danger: #D06473; -@brand-warning: #e4a133; +@brand-primary-value: #768ED2; +@brand-success-value: #7BC169; +@brand-danger-value: #D06473; +@brand-warning-value: #e4a133; -@link-color: #6e86ca; +@navbar-inverse-color-value: #FFF; +@navbar-inverse-bg-value: #8E5C9C; +@navbar-inverse-link-color-value: #F7F7F7; -@navbar-inverse-color: #FFF; -@navbar-inverse-bg: #8E5C9C; -@navbar-inverse-link-color: #F7F7F7; - -@login-panel-heading-bg: @brand-primary; +@login-panel-heading-bg-value: @brand-primary-value;