From 841ff1b805c0eb70cfeabf1c288fb4668baa413b Mon Sep 17 00:00:00 2001 From: Jessica Lawshe Date: Mon, 5 Dec 2022 09:32:40 -0600 Subject: [PATCH] Merge pull request #10780 from overleaf/jel-light-theme-new-css [web] Color contrast in editor light theme GitOrigin-RevId: 8add38e308c0bbcf6eab2988aeeb0f5f10260528 --- .../stylesheets/variables/themes/light.less | 146 +++++++++--------- 1 file changed, 73 insertions(+), 73 deletions(-) diff --git a/services/web/frontend/stylesheets/variables/themes/light.less b/services/web/frontend/stylesheets/variables/themes/light.less index f8f6f53a3d..c6fa70c470 100644 --- a/services/web/frontend/stylesheets/variables/themes/light.less +++ b/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; +@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: @ol-blue-gray-0; +@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;