Make application colors easier to maintain

customize.dist/src/less2/include/colortheme.less

@@ -76,89 +76,30 @@
 @colortheme_userlist-bg: #eee;
 @colortheme_pad-chat-bg: #AAA;
 
-@colortheme_pad-bg: #256ad5;
+@colortheme_apps: {
-@colortheme_pad-color: #fff;
+    default: #0087FF;
-@colortheme_pad-warn: #ffae00;
+    pad: #256ad5;
+    code: #EAA000;
+    slide: #e57614;
+    poll: #2c9e98;
+    whiteboard: #a72ba7;
+    kanban: #8C4;
+    oocell: #40865c;
+    oodoc: #5170B5;
+    ooslide: #C65D27;
+}
+
+@colortheme_static_apps: {
+    default: #0087FF;
+    teams: #4A3BBD;
+    file: #CD2532;
+    contacts: #607B8D;
+}
 
-@colortheme_slide-bg: #e57614;
-@colortheme_slide-color: #fff;
-@colortheme_slide-warn: #005868;
-
-@colortheme_code-bg: #EAA000;
-@colortheme_code-color: #000;
-@colortheme_code-warn: #9A37F7;
-
-@colortheme_poll-bg: #2c9e98;
 @colortheme_poll-color: #fff;
 @colortheme_poll-help-bg: #bbffbb;
 @colortheme_poll-th-bg: #005bef;
 @colortheme_poll-th-fg: #fff;
-@colortheme_poll-warn: #ffade3;
-
-@colortheme_whiteboard-bg: #a72ba7;
-@colortheme_whiteboard-color: #fff;
-@colortheme_whiteboard-warn: #ffae00;
-
-@colortheme_drive-bg: #0087FF;
-@colortheme_drive-color: #fff;
-@colortheme_drive-warn: #cd2532;
-
-@colortheme_teams-bg: #4a3bbd;
-@colortheme_teams-color: #fff;
-@colortheme_teams-warn: #cd2532;
-
-@colortheme_file-bg: #cd2532;
-@colortheme_file-color: #fff;
-@colortheme_file-warn: #ffae00;
-
-@colortheme_friends-bg: #607b8d;
-@colortheme_friends-color: #fff;
-@colortheme_friends-warn: #cd2532;
-
-@colortheme_default-bg: #326599;
-@colortheme_default-color: #FFF;
-@colortheme_default-warn: #cd2532;
-
-@colortheme_settings-bg: #0087ff;
-@colortheme_settings-color: #fff;
-@colortheme_settings-warn: #cd2532;
-
-@colortheme_profile-bg: #0087ff;
-@colortheme_profile-color: #fff;
-@colortheme_profile-warn: #cd2532;
-
-@colortheme_todo-bg: #999;
-@colortheme_todo-color: #3F4141;
-@colortheme_todo-warn: #cd2532;
-
-@colortheme_oodoc-bg: #5170B5;
-@colortheme_oodoc-color: #FFF;
-@colortheme_oodoc-warn: #cd2532;
-
-@colortheme_ooslide-bg: #c65d27;
-@colortheme_ooslide-color: #FFF;
-@colortheme_ooslide-warn: #cd2532;
-
-@colortheme_oocell-bg: #40865c;
-@colortheme_oocell-color: #FFF;
-@colortheme_oocell-warn: #ffbcc0;
-
-@colortheme_kanban-bg: #8C4;
-@colortheme_kanban-color: #000;
-@colortheme_kanban-warn: #e6385d;
-
-@colortheme_admin-bg: #0087ff;
-@colortheme_admin-color: #FFF;
-@colortheme_admin-warn: #ffae00;
-
-@colortheme_notifications-bg: #0087ff;
-@colortheme_notifications-color: #000;
-@colortheme_notifications-warn: #e34a85;
-
-@colortheme_support-bg: #0087ff;
-@colortheme_support-color: #000;
-@colortheme_support-warn: #9A37F7;
-
 
 // Sidebar layout (profile / settings)
 @colortheme_sidebar-active: #fff;

customize.dist/src/less2/include/creation.less

@@ -5,8 +5,7 @@
 @import (reference) "./avatar.less";
 
 .creation_vars(
-    @color: @colortheme_default-color,
+    @bg-color: @colortheme_apps[default]
-    @bg-color: @colortheme_default-bg
 ) {
     @creation-color: @cryptpad_text_col;
     @creation-bg-color: @bg-color;
@@ -14,11 +13,10 @@
 };
 
 .creation_main(
-    @color: @colortheme_default-color,
+    @bg-color: @colortheme_apps[default]
-    @bg-color: @colortheme_default-bg
 ) {
     --LessLoader_require: LessLoader_currentFile();
-    .creation_vars(@color, @bg-color);
+    .creation_vars(@bg-color);
     --creation-color: @cryptpad_text_col;
     --creation-bg-color: @bg-color;
     --creation-bg-color-light: @creation-bg-color-light;

customize.dist/src/less2/include/drive.less

@@ -12,8 +12,7 @@
     .limit-bar_main();
     .tokenfield_main();
 
-    @colortheme_drive-bg-light: lighten(@colortheme_drive-bg, 30%);
+    @colortheme_drive-bg-active: lighten(@colortheme_static_apps[default], 20%);
-    @colortheme_drive-bg-active: lighten(@colortheme_drive-bg, 20%);
     @colortheme_drive-color: @cryptpad_text_col;
 
     @drive_hover: #eee;
@@ -819,7 +818,6 @@
                     font-size: @colortheme_app-font-size;
                     padding: 0 5px;
                     border: 0;
-                    //background: @colortheme_drive-bg-active;
                     color: @colortheme_drive-color;
                     box-sizing: border-box;
                     overflow: hidden;

customize.dist/src/less2/include/fileupload.less

@@ -16,7 +16,7 @@
         box-sizing: border-box;
         z-index: 100000; //Z file upload table container
         display: none;
-        color: darken(@colortheme_drive-bg, 10%);
+        color: darken(@colortheme_static_apps[default], 10%);
         max-height: 180px;
         overflow-y: auto;
 

customize.dist/src/less2/include/framework.less

@@ -20,9 +20,7 @@
 @import (reference) "./modals-ui-elements.less";
 
 .framework_main(
-    @bg-color: @colortheme_default-bg, // color of the toolbar background
+    @bg-color: @colortheme_apps[default]
-    @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
-    @color: @colortheme_default-color, // Color of the text for the toolbar
 ) {
     --LessLoader_require: LessLoader_currentFile();
     // Set the HTML style for the apps which shouldn't have a body scrollbar
@@ -35,8 +33,6 @@
 
     .toolbar_main(
         @bg-color: @bg-color,
-        @warn-color: @warn-color,
-        @color: @color
     );
     .alertify_main();
     .modals-ui-elements_main();
@@ -48,7 +44,6 @@
     .checkmark_main(20px);
     .password_main();
     .messenger_main(
-        @color: @cryptpad_text_col,
         @bg-color: @colortheme_pad-chat-bg
     );
     .cursor_main();
@@ -57,15 +52,12 @@
     .mentions_main();
     .creation_main(
         @bg-color: @bg-color,
-        @color: @color
     );
     font: @colortheme_app-font;
 };
 
 .framework_min_main(
-    @color: @colortheme_default-color, // Color of the text for the toolbar
+    @bg-color: @colortheme_static_apps[default]
-    @bg-color: @colortheme_default-bg, // color of the toolbar background
-    @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
 ) {
     --LessLoader_require: LessLoader_currentFile();
     // Set the HTML style for the apps which shouldn't have a body scrollbar
@@ -78,8 +70,6 @@
 
     .toolbar_main(
         @bg-color: @bg-color,
-        @warn-color: @warn-color,
-        @color: @color
     );
     .fileupload_main();
     .alertify_main();

customize.dist/src/less2/include/icon-colors.less

@@ -3,43 +3,15 @@
     --LessLoader_require: LessLoader_currentFile();
 }
 & {
-    // Classes used in common-interface.js
-    .cp-icon-color-pad { color: @colortheme_pad-bg; }
-    .cp-icon-color-code { color: @colortheme_code-bg; }
-    .cp-icon-color-slide { color: @colortheme_slide-bg; }
-    .cp-icon-color-poll { color: @colortheme_poll-bg; }
-    .cp-icon-color-file { color: @colortheme_file-bg; }
-    .cp-icon-color-contacts { color: @colortheme_friends-bg; }
-    .cp-icon-color-whiteboard { color: @colortheme_whiteboard-bg; }
-    .cp-icon-color-drive { color: @colortheme_drive-bg; }
-    .cp-icon-color-settings { color: @colortheme_settings-bg; }
-    .cp-icon-color-profile { color: @colortheme_settings-bg; }
-    .cp-icon-color-default { color: @colortheme_default-bg; }
-    .cp-icon-color-todo { color: @colortheme_todo-bg; }
-    .cp-icon-color-oodoc { color: @colortheme_oodoc-bg; }
-    .cp-icon-color-ooslide { color: @colortheme_ooslide-bg; }
-    .cp-icon-color-sheet { color: @colortheme_oocell-bg; }
-    .cp-icon-color-kanban { color: @colortheme_kanban-bg; }
-    .cp-icon-color-admin { color: @colortheme_admin-bg; }
-    .cp-icon-color-teams { color: @colortheme_teams-bg; }
 
-    .cp-border-color-pad { border-color: @colortheme_pad-bg !important; }
+    each(@colortheme_apps, {
-    .cp-border-color-code { border-color: @colortheme_code-bg !important; }
+        .cp-icon-color-@{key} { color: @value; }
-    .cp-border-color-slide { border-color: @colortheme_slide-bg !important; }
+    });
-    .cp-border-color-poll { border-color: @colortheme_poll-bg !important; }
+
-    .cp-border-color-file { border-color: @colortheme_file-bg !important; }
+    each(@colortheme_apps, {
-    .cp-border-color-contacts { border-color: @colortheme_friends-bg !important; }
+        @val: @{value} !important;
-    .cp-border-color-whiteboard { border-color: @colortheme_whiteboard-bg !important; }
+        .cp-border-color-@{key} { border-color: @val; }
-    .cp-border-color-drive { border-color: @colortheme_drive-bg !important; }
+    });
-    .cp-border-color-settings { border-color: @colortheme_settings-bg !important; }
+
-    .cp-border-color-profile { border-color: @colortheme_settings-bg !important; }
-    .cp-border-color-default { border-color: @colortheme_default-bg !important; }
-    .cp-border-color-todo { border-color: @colortheme_todo-bg !important; }
-    .cp-border-color-oodoc { border-color: @colortheme_oodoc-bg !important; }
-    .cp-border-color-ooslide { border-color: @colortheme_ooslide-bg !important; }
-    .cp-border-color-sheet { border-color: @colortheme_oocell-bg !important; }
-    .cp-border-color-kanban { border-color: @colortheme_kanban-bg !important; }
-    .cp-border-color-admin { border-color: @colortheme_admin-bg !important; }
-    .cp-border-color-teams { border-color: @colortheme_teams-bg !important; }
 }
 

customize.dist/src/less2/include/messenger.less

@@ -2,10 +2,9 @@
 @import (reference) "./colortheme-all.less";
 
 .messenger_vars (
-    @color: @colortheme_friends-color, // color of the toolbar text
+    @bg-color: @colortheme_static_apps[contacts], // color of the toolbar background
-    @bg-color: @colortheme_friends-bg, // color of the toolbar background
 ) {
-    @msg-color: @color;
+    @msg-color: @cryptpad_text_col;
     @msg-bg-color: @bg-color;
     @msg-bg-color-light: lighten(@bg-color, 15%);
     @msg-bg-color-lighter: lighten(@bg-color, 20%);
@@ -13,11 +12,10 @@
     @msg-bg-color-darker: darken(@bg-color, 20%);
 };
 .messenger_main(
-    @color: @colortheme_friends-color, // color of the toolbar text
+    @bg-color: @colortheme_static_apps[contacts], // color of the toolbar background
-    @bg-color: @colortheme_friends-bg, // color of the toolbar background
 ) {
     --LessLoader_require: LessLoader_currentFile();
-    .messenger_vars(@color, @bg-color);
+    .messenger_vars(@bg-color);
     --msg-color: @msg-color;
     --msg-bg-color: @msg-bg-color;
     --msg-bg-color-light: @msg-bg-color-light;

customize.dist/src/less2/include/toolbar.less

@@ -12,9 +12,7 @@
 @import (reference) "./notifications.less";
 
 .toolbar_vars (
-    @color: @colortheme_default-color, // Color of the text for the toolbar
+    @bg-color: @colortheme_apps[default], // color of the toolbar background
-    @bg-color: @colortheme_default-bg, // color of the toolbar background
-    @warn-color: @colortheme_default-warn // color of the warning text in the toolbar
 ) {
     @toolbar-bg-color: @bg-color;
     @toolbar-bg-color-light: lighten(@bg-color, 30%);
@@ -22,13 +20,10 @@
 };
 
 .toolbar_main (
-    @color: @colortheme_default-color, // Color of the text for the toolbar
+    @bg-color: @colortheme_apps[default], // color of the toolbar background
-    @bg-color: @colortheme_default-bg, // color of the toolbar background
-    @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
-    @barWidth: 600px // width of the toolbar
 ) {
     --LessLoader_require: LessLoader_currentFile();
-    .toolbar_vars(@color, @bg-color, @warn-color);
+    .toolbar_vars(@bg-color);
 
     --toolbar-bg-color: @toolbar-bg-color;
     --toolbar-bg-color-light: @toolbar-bg-color-light;

customize.dist/src/less2/pages/page-index.less

@@ -148,28 +148,15 @@
         transform: none !important;
     }
 
-    .app-block(@app; @app-color) {
+    each(@colortheme_apps, {
-        .cp-callout-@{app} {
+        .cp-callout-@{key} {
-            i {
+            i { color: @value; }
-                color: @app-color;
-            }
             &:hover {
-                background-color: lighten(@app-color, 30%);
+                background-color: lighten(@value, 30%);
-                i {
+                i { color: @cryptpad_text_col; }
-                    color: @cryptpad_text_col;
-                }
             }
         }
-    }
+    });
-    .app-block(code, @colortheme_code-bg);
-    .app-block(pad, @colortheme_pad-bg);
-    .app-block(slide, @colortheme_slide-bg);
-    .app-block(poll, @colortheme_poll-bg);
-    .app-block(kanban, @colortheme_kanban-bg);
-    .app-block(whiteboard, @colortheme_whiteboard-bg);
-    .app-block(sheet, @colortheme_oocell-bg);
-    .app-block(drive, @colortheme_drive-bg);
-
 
     .cp-hidden { display: none !important; }
     .cp-callout-more {

www/admin/app-admin.less

@@ -4,11 +4,7 @@
 
 &.cp-app-admin {
 
-    .framework_min_main(
+    .framework_min_main();
-        @bg-color: @colortheme_admin-bg,
-        @warn-color: @colortheme_admin-warn,
-        @color: @colortheme_admin-color
-    );
     .sidebar-layout_main();
     .support_main();
 

www/code/app-code.less

@@ -4,9 +4,7 @@
 
 &.cp-app-code {
     .framework_main(
-        @bg-color: @colortheme_code-bg,
+        @bg-color: @colortheme_apps[code],
-        @warn-color: @colortheme_code-warn,
-        @color: @colortheme_code-color
     );
 
     display: flex;

www/common/onlyoffice/app-oo.less

@@ -7,23 +7,17 @@ body.cp-app-sheet, body.cp-app-oodoc, body.cp-app-ooslide {
 
     &.cp-app-sheet {
         .framework_main(
-            @bg-color: @colortheme_oocell-bg,
+            @bg-color: @colortheme_apps[oocell],
-            @warn-color: @colortheme_oocell-warn,
-            @color: @colortheme_oocell-color
         );
     }
     &.cp-app-oodoc {
         .framework_main(
-            @bg-color: @colortheme_oodoc-bg,
+            @bg-color: @colortheme_apps[oodoc],
-            @warn-color: @colortheme_oodoc-warn,
-            @color: @colortheme_oodoc-color
         );
     }
     &.cp-app-ooslide {
         .framework_main(
-            @bg-color: @colortheme_ooslide-bg,
+            @bg-color: @colortheme_apps[ooslide],
-            @warn-color: @colortheme_ooslide-warn,
-            @color: @colortheme_ooslide-color
         );
     }
 

www/contacts/app-contacts.less

@@ -5,9 +5,7 @@
 // body
 &.cp-app-contacts {
     .framework_min_main(
-        @bg-color: @colortheme_friends-bg,
+        @bg-color: @colortheme_static_apps[contacts]
-        @warn-color: @colortheme_friends-warn,
-        @color: @colortheme_friends-color
     );
 
     display: flex;

www/drive/app-drive.less

@@ -2,11 +2,7 @@
 @import (reference) '../../customize/src/less2/include/drive.less';
 
 &.cp-app-drive {
-    .framework_min_main(
+    .framework_min_main();
-        @bg-color: @colortheme_drive-bg,
-        @warn-color: @colortheme_drive-warn,
-        @color: @colortheme_drive-color
-    );
 
     .drive_main();
 }

www/file/app-file.less

@@ -4,9 +4,7 @@
 &.cp-app-file {
 
     .framework_min_main(
-        @bg-color: @colortheme_file-bg,
+        @bg-color: @colortheme_static_app[file],
-        @warn-color: @colortheme_file-warn,
-        @color: @colortheme_file-color
     );
     .tokenfield_main();
 

www/kanban/app-kanban.less

@@ -7,9 +7,7 @@
 // body
 &.cp-app-kanban {
     .framework_main(
-        @bg-color: @colortheme_kanban-bg,
+        @bg-color: @colortheme_apps[kanban],
-        @warn-color: @colortheme_kanban-warn,
-        @color: @colortheme_kanban-color
     );
 
     display: flex;

www/notifications/app-notifications.less

@@ -4,11 +4,7 @@
 
 &.cp-app-notifications {
 
-    .framework_min_main(
+    .framework_min_main();
-        @bg-color: @colortheme_notifications-bg,
-        @warn-color: @colortheme_notifications-warn,
-        @color: @colortheme_notifications-color
-    );
     .sidebar-layout_main();
 
     display: flex;

www/pad/app-pad.less

@@ -4,9 +4,7 @@
 
 body.cp-app-pad {
     .framework_main(
-        @bg-color: @colortheme_pad-bg,
+        @bg-color: @colortheme_apps[pad],
-        @warn-color: @colortheme_pad-warn,
-        @color: @colortheme_pad-color
     );
 
     @bg-color: #e3e3e3;

www/poll/app-poll.less

@@ -6,9 +6,7 @@
 &.cp-app-poll {
 
     .framework_main(
-        @bg-color: @colortheme_poll-bg,
+        @bg-color: @colortheme_apps[poll],
-        @warn-color: @colortheme_poll-warn,
-        @color: @colortheme_poll-color
     );
 
     @poll-fore: #555;

www/profile/app-profile.less

@@ -3,11 +3,7 @@
 
 &.cp-app-profile {
 
-    .framework_min_main(
+    .framework_min_main();
-        @bg-color: @colortheme_profile-bg,
-        @warn-color: @colortheme_profile-warn,
-        @color: @colortheme_profile-color
-    );
     .sidebar-layout_main();
 
     @cp-profile-is-your-friend: #777;

www/settings/app-settings.less

@@ -5,11 +5,7 @@
 @import (reference) '../../customize/src/less2/include/export.less';
 
 &.cp-app-settings {
-    .framework_min_main(
+    .framework_min_main();
-        @bg-color: @colortheme_settings-bg,
-        @warn-color: @colortheme_settings-warn,
-        @color: @colortheme_settings-color
-    );
     .sidebar-layout_main();
     .limit-bar_main();
     .creation_main();

www/slide/app-slide.less

@@ -7,9 +7,7 @@
     .mediatag_base();
 
     .framework_main(
-        @bg-color: @colortheme_slide-bg,
+        @bg-color: @colortheme_apps[slide]
-        @warn-color: @colortheme_slide-warn,
-        @color: @colortheme_slide-color
     );
 
     @slide-default-bg: #e3e3e3;

www/support/app-support.less

@@ -3,11 +3,7 @@
 @import (reference) '../../customize/src/less2/include/support.less';
 
 &.cp-app-support {
-    .framework_min_main(
+    .framework_min_main();
-        @bg-color: @colortheme_support-bg,
-        @warn-color: @colortheme_support-warn,
-        @color: @colortheme_support-color
-    );
     .sidebar-layout_main();
     .support_main();
 

www/teams/app-team.less

@@ -9,9 +9,7 @@
 
 &.cp-app-team {
     .framework_min_main(
-        @bg-color: @colortheme_teams-bg,
+        @bg-color: @colortheme_static_apps[teams],
-        @warn-color: @colortheme_teams-warn,
-        @color: @colortheme_teams-color
     );
 
     .drive_main();

www/todo/app-todo.less

@@ -2,11 +2,8 @@
 
 &.cp-app-todo {
 
-    .framework_min_main(
+    @colortheme_todo-bg: @colortheme_static_apps[default];
-        @bg-color: @colortheme_todo-bg,
+    .framework_min_main();
-        @warn-color: @colortheme_todo-warn,
-        @color: @colortheme_todo-color
-    );
 
     display: flex;
     flex-flow: column;

www/whiteboard/app-whiteboard.less

@@ -4,9 +4,7 @@
 &.cp-app-whiteboard {
 
     .framework_main(
-        @bg-color: @colortheme_whiteboard-bg,
+        @bg-color: @colortheme_apps[whiteboard],
-        @warn-color: @colortheme_whiteboard-warn,
-        @color: @colortheme_whiteboard-color
     );
 
     display: flex;

www/worker/app-worker.less

@@ -22,7 +22,7 @@
         flex-flow: column;
         padding: 20px;
         align-items: center;
-        background-color: lighten(@colortheme_todo-bg, 15%);
+        background-color: lighten(@colortheme_apps[default], 15%);
         min-height: 0;
     }
 }