[DE forms] Refactoring form theme colors

apps/common/forms/resources/less/common.less

@@ -83,9 +83,6 @@
 @toolbarTopColor:               @background-toolbar-ie;
 @toolbarTopColor:               @background-toolbar;
 @toolbarFontSize:               12px;
-@btnColored:                    #446995;
-@btnActiveColored:              #293F59;
-@btnHoverColored:               #375478;
 
 @iconSpriteCommonPath:          "../../../../common/forms/resources/img/glyphicons.png";
 @icon-socnet-size: 40px;
@@ -228,20 +225,20 @@
     &.colored {
         padding: 0 16px;
         height: 28px;
-        background-color: @btnColored;
+        background-color: @background-accent-button;
         border: 1px solid transparent;
         border-radius: 3px;
-        color: #ffffff;
+        color: @text-contrast-background !important;
         font-weight: 700;
 
         &:hover:not(.disabled),
         .over:not(.disabled) {
-            background-color: @btnHoverColored !important;
+            background-color: @highlight-accent-button-hover !important;
         }
 
         &:active:not(.disabled),
         &.active:not(.disabled) {
-            background-color: @btnActiveColored !important;;
+            background-color: @highlight-accent-button-pressed !important;
         }
     }
 }
@@ -583,22 +580,22 @@
         }
 
         .asc-synchronizetip {
-            background-color: @btnColored;
+            background-color: @background-contrast-popover;
-            color: @text-toolbar-header;
+            color: @text-contrast-background;
             .close {
                 &:before, &:after {
-                    background-color: @text-toolbar-header;
+                    background-color: @text-contrast-background;
                 }
             }
         }
 
         .tip-arrow:after {
-            background-color: @btnColored;
+            background-color: @background-contrast-popover;
         }
 
         .btn-div {
             display: inline-block;
-            border: 1px solid #fff;
+            border: 1px solid @border-regular-control;
             border-radius: 2px;
             padding: 3px 12px;
             margin-top: 10px;

apps/common/main/resources/less/colors-table-classic.less

@@ -14,6 +14,7 @@
         --background-notification-badge: #ffd112;
         --background-scrim: fade(#000, 20%);
         --background-loader: fade(#000, 65%);
+        --background-contrast-popover: #444444;
 
         --highlight-button-hover: #d8dadc;
         --highlight-button-pressed: #7d858c;

apps/common/main/resources/less/colors-table-dark.less

@@ -15,6 +15,7 @@
         --background-scrim: fade(black, 60%);
         --background-loader: fade(#181818, 90%);
         --background-alt-key-hint: #FFD938;
+        --background-contrast-popover: #363636;
 
         --highlight-button-hover: #555;
         --highlight-button-pressed: #707070;

apps/common/main/resources/less/colors-table.less

@@ -25,6 +25,8 @@
     --background-scrim: fade(#000, 20%);
     --background-loader: fade(#181818, 90%);
     --background-alt-key-hint: #FFD938;
+    --background-accent-button: #446995;
+    --background-contrast-popover: #444444;
 
     --highlight-button-hover: #e0e0e0;
     --highlight-button-pressed: #cbcbcb;
@@ -34,6 +36,8 @@
     --highlight-header-button-pressed: fade(#fff, 25%);
     --highlight-toolbar-tab-underline: #444;
     --highlight-text-select: #3494fb;
+    --highlight-accent-button-hover: #375478;
+    --highlight-accent-button-pressed: #293F59;
 
     --border-toolbar: #cbcbcb;
     --border-divider: #dfdfdf;
@@ -154,6 +158,8 @@
 @background-scrim: var(--background-scrim);
 @background-loader: var(--background-loader);
 @background-alt-key-hint: var(--background-alt-key-hint);
+@background-accent-button: var(--background-accent-button);
+@background-contrast-popover: var(--background-contrast-popover);
 
 // Highlight
 // -------------------------
@@ -165,6 +171,8 @@
 @highlight-header-button-pressed: var(--highlight-header-button-pressed);
 @highlight-toolbar-tab-underline: var(--highlight-toolbar-tab-underline);
 @highlight-text-select: var(--highlight-text-select);
+@highlight-accent-button-hover: var(--highlight-accent-button-hover);
+@highlight-accent-button-pressed: var(--highlight-accent-button-pressed);
 
 // Border
 // -------------------------

apps/documenteditor/forms/index.html

@@ -115,7 +115,7 @@
       <script src="../../common/main/lib/util/themeinit.js"></script>
   </head>
 
-  <body class="embed-body theme-classic-light theme-type-light">
+  <body class="embed-body">
       <script src="../../common/main/lib/util/htmlutils.js"></script>
       <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="brand-logo loading-logo"><img src=""></div><div class="doc-title"></div><div class="circle"></div></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
 

apps/documenteditor/forms/index.html.deploy

@@ -112,7 +112,7 @@
     <![endif]-->
   </head>
 
-  <body class="embed-body theme-classic-light theme-type-light">
+  <body class="embed-body">
       <script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
       <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="brand-logo loading-logo"><img src=""></div><div class="doc-title"></div><div class="circle"></div></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>