[UI] Token-based approach for interface elements and colors (mautic#1…

…3735)

* tokens

* incorporating all bootstrap variables

* migrating mautic variables into bootstrap

* fixing broken darken/lighten

* variables

* revert removing 5x duplicated import rules

revert
Revert "fixing broken darken/lighten"
This reverts commit bcf4ac98e07c0c17162a74794a8161d5398c3d7c.

* grunt compile-less

* aligning previous tokens

* remove duplicated imports

* dark color scheme disabled by default to avoid conflicts

* utilities syntax fix

* improve radius calc

* tag to label token names

* setting the dark theme implementation method

* set implementation mode for high contrast + run grunt-compile-less

* fix missing transparency bg colors

* darker brand bg on dark theme

* Responsive typography

* secondary brand color support

* style fixes

* fixes for secondary brand color support

* transparency for borders when on brand bg

* Revert "transparency for borders when on brand bg"

This reverts commit a8c4748.

* sat improv

* reduced max bdr value

* enhanced border calc

* removing duplicates

* high contrast improvement

* separate file for tokens to avoid duplication on .css files

* brand center enabled by default

* another pallete generation method + accessibility improvement

* 4px rounded standard

* revert to 0 based on community feedback

* fix css to less

* semantic fixes

app/bundles/CoreBundle/Assets/css/app.less

@@ -63,9 +63,7 @@
 @import "app/less/variables";
 @import "app/less/mixins";
 @import "app/less/lesshat";
-@import "../../../../../node_modules/bootstrap/less/variables";
 @import "../../../../../node_modules/bootstrap/less/mixins";
-@import "libraries/bootstrap/bootstrap-mautic-custom-variables";
 // Layouts
 @import "app/less/layouts/base";
 @import "app/less/layouts/header";
@@ -110,4 +108,5 @@
 @import "app/less/components/utilities";
 @import "app/less/components/builder";
 @import "app/less/components/maps";
-@import "app/less/custom";
+@import "app/less/custom";
+@import "app/less/tokens";

app/bundles/CoreBundle/Assets/css/app/less/components/buttons.less

@@ -6,7 +6,7 @@
 // Base styles
 // ---------------------
 .btn {
-  transition: var(--all);
+  transition: var(--all-productive);
   &,
   &:active {
     outline: 0;

app/bundles/CoreBundle/Assets/css/app/less/components/scaffolding.less

@@ -65,7 +65,7 @@ hr,
 // Links
 
 a {
-  transition: var(--all);
+  transition: var(--all-productive);
   &:hover {
     cursor: pointer;
   }

app/bundles/CoreBundle/Assets/css/app/less/components/table.less

@@ -91,6 +91,6 @@ table i:not(.fa-lg) {
 
   .table-hover {
     > tbody > tr:hover {
-      transition: var(--all);
+      transition: var(--all-productive);
     }
   }

app/bundles/CoreBundle/Assets/css/app/less/custom.less

@@ -1,4 +1,4 @@
-@import "../../../../../../../node_modules/bootstrap/less/variables";
+@import "../../libraries/bootstrap/bootstrap-mautic-custom-variables";
 
 @media (min-width: @screen-md-min) {
   .modal-xl { width: 1140px; }

app/bundles/CoreBundle/Assets/css/app/less/mixins.less

@@ -4,6 +4,12 @@
 
 // Background color
 // ------------------------
+
+.background-blur() {
+  backdrop-filter: var(--blur);
+  background-color: var(--layer-translucent);
+}
+
 .bg-color(@bg-color; @color) {
   background-color: @bg-color !important;
   border-color: darken(@bg-color, 3%) !important;