Merge pull request #10780 from overleaf/jel-light-theme-new-css

[web] Color contrast in editor light theme

GitOrigin-RevId: 8add38e308c0bbcf6eab2988aeeb0f5f10260528

services/web/frontend/stylesheets/variables/themes/light.less

@@ -1,135 +1,135 @@
 // Sidebar
 @sidebar-bg: #fff;
-@sidebar-color: @ol-blue-gray-2;
-@sidebar-active-bg: @ol-green;
+@sidebar-color: @neutral-40;
+@sidebar-active-bg: @green;
 @sidebar-active-color: #fff;
-@sidebar-hover-bg: @ol-blue-gray-1;
+@sidebar-hover-bg: @neutral-20;
 @sidebar-active-font-weight: normal;
 @sidebar-hover-text-decoration: none;
 
-@v2-dash-pane-bg: @ol-blue-gray-1;
-@v2-dash-pane-link-color: @ol-blue;
-@v2-dash-pane-toggle-color: @ol-blue-gray-3;
-@v2-dash-pane-btn-bg: @ol-blue-gray-5;
-@v2-dash-pane-btn-hover-bg: @ol-blue-gray-6;
-@v2-dash-pane-color: @ol-blue-gray-3;
+@v2-dash-pane-bg: @neutral-20;
+@v2-dash-pane-link-color: @blue;
+@v2-dash-pane-toggle-color: @neutral-70;
+@v2-dash-pane-btn-bg: @neutral-80;
+@v2-dash-pane-btn-hover-bg: @neutral-90;
+@v2-dash-pane-color: @neutral-70;
 
 @progress-bar-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-@progress-bg: @ol-blue-gray-0;
+@progress-bg: @neutral-10;
 
-@input-border: @ol-blue-gray-1;
+@input-border: @neutral-20;
 
 // Editor file-tree
 @file-tree-bg: #fff;
 @file-tree-line-height: 2.05;
-@file-tree-item-color: @ol-blue-gray-3;
+@file-tree-item-color: @neutral-70;
 @file-tree-item-focus-color: @file-tree-item-color;
 @file-tree-item-selected-color: #fff;
-@file-tree-item-input-color: @ol-blue-gray-2;
-@file-tree-item-toggle-color: @ol-blue-gray-2;
-@file-tree-item-icon-color: @ol-blue-gray-2;
-@file-tree-item-folder-color: @ol-blue-gray-2;
-@file-tree-item-hover-bg: @ol-blue-gray-1;
-@file-tree-item-selected-bg: @ol-green;
-@file-tree-multiselect-bg: @ol-blue;
-@file-tree-multiselect-hover-bg: @ol-dark-blue;
-@file-tree-droppable-bg-color: @ol-blue-gray-2;
-
-@content-alt-bg-color: @ol-blue-gray-0;
+@file-tree-item-input-color: @neutral-40;
+@file-tree-item-toggle-color: @neutral-40;
+@file-tree-item-icon-color: @neutral-40;
+@file-tree-item-folder-color: @neutral-40;
+@file-tree-item-hover-bg: @neutral-20;
+@file-tree-item-selected-bg: @green;
+@file-tree-multiselect-bg: @blue;
+@file-tree-multiselect-hover-bg: @blue-dark;
+@file-tree-droppable-bg-color: @neutral-40;
+
+@content-alt-bg-color: @neutral-10;
 
 // File outline
-@outline-line-guide-color: @ol-blue-gray-1;
+@outline-line-guide-color: @neutral-20;
 @outline-header-hover-bg: @file-tree-item-hover-bg;
-@outline-highlight-bg: mix(@file-tree-bg, @ol-blue-gray-1);
+@outline-highlight-bg: mix(@file-tree-bg, @neutral-20);
 
-@vertical-resizable-resizer-bg: @ol-blue-gray-1;
+@vertical-resizable-resizer-bg: @neutral-20;
 @vertical-resizable-resizer-hover-bg: @file-tree-item-hover-bg;
 
 // Editor resizers
-@editor-resizer-bg-color: @ol-blue-gray-1;
-@editor-resizer-bg-color-dragging: @ol-blue-gray-1;
-@editor-toggler-bg-color: @ol-blue-gray-2;
-@editor-toggler-hover-bg-color: @ol-green;
+@editor-resizer-bg-color: @neutral-20;
+@editor-resizer-bg-color-dragging: @neutral-20;
+@editor-toggler-bg-color: @neutral-40;
+@editor-toggler-hover-bg-color: @green;
 @synctex-controls-z-index: 6;
 @synctex-controls-padding: 0;
-@editor-border-color: @ol-blue-gray-1;
+@editor-border-color: @neutral-20;
 
-@toolbar-border-color: @ol-blue-gray-1;
+@toolbar-border-color: @neutral-20;
 @toolbar-alt-bg-color: #fff;
 @editor-toolbar-bg: @toolbar-alt-bg-color;
 
 @toolbar-header-bg-color: #fff;
-@toolbar-header-btn-border-color: @ol-blue-gray-1;
-@toolbar-header-branded-btn-bg-color: @ol-blue-gray-3;
-@toolbar-btn-color: @ol-blue-gray-3;
-@toolbar-btn-hover-color: @ol-blue-gray-3;
-@toolbar-btn-hover-bg-color: @ol-blue-gray-0;
-@toolbar-icon-btn-color: @ol-blue-gray-3;
-@toolbar-icon-btn-hover-color: @ol-blue-gray-3;
+@toolbar-header-btn-border-color: @neutral-20;
+@toolbar-header-branded-btn-bg-color: @neutral-70;
+@toolbar-btn-color: @neutral-70;
+@toolbar-btn-hover-color: @neutral-70;
+@toolbar-btn-hover-bg-color: @neutral-10;
+@toolbar-icon-btn-color: @neutral-70;
+@toolbar-icon-btn-hover-color: @neutral-70;
 @editor-header-logo-background: url(../../../../public/img/ol-brand/overleaf-o.svg)
   center / contain no-repeat;
-@project-name-color: @ol-blue-gray-3;
-@project-rename-link-color: @ol-blue-gray-3;
-@project-rename-link-color-hover: @ol-blue-gray-4;
-@pdf-bg: @ol-blue-gray-0;
-@logs-pane-bg: @ol-blue-gray-1;
+@project-name-color: @neutral-70;
+@project-rename-link-color: @neutral-70;
+@project-rename-link-color-hover: @neutral-70;
+@pdf-bg: @neutral-10;
+@logs-pane-bg: @neutral-10;
 
 // Navbar
 @navbar-default-bg: #fff;
-@navbar-default-border: @ol-blue-gray-1;
-@navbar-default-link-bg: @ol-green;
+@navbar-default-border: @neutral-20;
+@navbar-default-link-bg: @green;
 @navbar-default-link-color: #fff;
 @navbar-default-link-border-color: transparent;
-@navbar-default-link-hover-bg: @ol-green;
-@navbar-default-link-active-bg: @ol-green;
-@navbar-default-link-hover-color: @ol-green;
+@navbar-default-link-hover-bg: @green;
+@navbar-default-link-active-bg: @green;
+@navbar-default-link-hover-color: @green;
 
-@navbar-title-color: @ol-blue-gray-1;
-@navbar-title-color-hover: @ol-blue-gray-2;
-@navbar-default-color: @ol-blue-gray-3;
+@navbar-title-color: @neutral-20;
+@navbar-title-color-hover: @neutral-40;
+@navbar-default-color: @neutral-70;
 @navbar-brand-image-url: url(../../../../public/img/ol-brand/overleaf.svg);
 
-@navbar-subdued-color: @ol-blue-gray-3;
-@navbar-subdued-hover-bg: @ol-blue-gray-1;
-@navbar-subdued-hover-color: @ol-blue-gray-3;
+@navbar-subdued-color: @neutral-70;
+@navbar-subdued-hover-bg: @neutral-20;
+@navbar-subdued-hover-color: @neutral-70;
 
-@card-box-shadow: 0 0 0 1px @ol-blue-gray-1;
+@card-box-shadow: 0 0 0 1px @neutral-20;
 
 // v2 History
-@history-toolbar-color: @ol-blue-gray-3;
-@history-base-bg: @ol-blue-gray-0;
+@history-toolbar-color: @neutral-70;
+@history-base-bg: @neutral-10;
 @history-file-badge-bg: rgba(0, 0, 0, 0.25);
 @history-file-badge-color: #fff;
 
 // Formatting buttons
 @formatting-btn-color: @toolbar-icon-btn-color;
 @formatting-btn-bg: transparent;
-@formatting-btn-border: @ol-blue-gray-1;
+@formatting-btn-border: @neutral-20;
 @formatting-menu-bg: #fff;
 
 // Chat
 @chat-bg: #fff;
-@chat-instructions-color: @ol-blue-gray-3;
+@chat-instructions-color: @neutral-70;
 @chat-message-color: #fff;
-@chat-message-name-color: @ol-blue-gray-3;
-@chat-message-date-color: @ol-blue-gray-3;
-@chat-new-message-bg: @ol-blue-gray-0;
+@chat-message-name-color: @neutral-70;
+@chat-message-date-color: @neutral-70;
+@chat-new-message-bg: @neutral-10;
 @chat-new-message-textarea-bg: #fff;
-@chat-new-message-textarea-color: @ol-blue-gray-6;
-@chat-new-message-border-color: @ol-blue-gray-1;
+@chat-new-message-textarea-color: @neutral-90;
+@chat-new-message-border-color: @neutral-20;
 
 // Symbol Palette
 @symbol-palette-bg: #fff;
-@symbol-palette-color: @ol-blue-gray-3;
-@symbol-palette-header-background: @ol-blue-gray-1;
-@symbol-palette-item-bg: @ol-blue-gray-1;
-@symbol-palette-item-color: @ol-blue-gray-3;
+@symbol-palette-color: @neutral-70;
+@symbol-palette-header-background: @neutral-20;
+@symbol-palette-item-bg: @neutral-20;
+@symbol-palette-item-color: @neutral-70;
 @symbol-palette-selected-tab-bg: #fff;
-@symbol-palette-selected-tab-color: @ol-blue;
-@symbol-palette-text-shadow-color: @ol-blue-gray-1;
+@symbol-palette-selected-tab-color: @blue;
+@symbol-palette-text-shadow-color: @neutral-20;
 
 // Galileo
 @galileo-bg: #fff;
-@galileo-color: @ol-blue-gray-3;
-@galileo-header-background: @ol-blue-gray-1;
-@galileo-suggestion-background: @ol-blue-gray-1;
+@galileo-color: @neutral-70;
+@galileo-header-background: @neutral-20;
+@galileo-suggestion-background: @neutral-20;