overleaf/services/web/frontend/stylesheets/core/ol-light-variables.less
Jessica Lawshe 76cbf9949f Merge pull request #3396 from overleaf/jel-match-grays
Improve editor color contrast and remove light theme blue-gray colors

GitOrigin-RevId: acc5659c41201fce47e9ff03531cb51bfbf590bc
2020-12-01 03:04:34 +00:00

127 lines
4.1 KiB
Text

// Styleguide colors
@ol-green : #138A07;
@ol-dark-green : #004A0E;
@ol-blue : #3E70BB;
@ol-dark-blue : #2857A1;
@ol-red : #C9453E;
@ol-dark-red : #A6312B;
@ol-type-color : @ol-blue-gray-3;
// Sidebar
@sidebar-bg : #FFF;
@sidebar-color : @ol-blue-gray-2;
@sidebar-active-bg : @ol-green;
@sidebar-active-color : #FFF;
@sidebar-hover-bg : @ol-blue-gray-1;
@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;
@progress-bar-shadow : inset 0 -1px 0 rgba(0,0,0,.15);
@progress-bg : @ol-blue-gray-0;
@input-border : @ol-blue-gray-1;
// Editor file-tree
@file-tree-bg : #FFF;
@file-tree-line-height : 2.05;
@file-tree-item-color : @ol-blue-gray-3;
@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 outline
@outline-line-guide-color: @ol-blue-gray-1;
@outline-header-hover-bg: @file-tree-item-hover-bg;
@outline-highlight-bg: mix(@file-tree-bg, @ol-blue-gray-1);
@vertical-resizable-resizer-bg: @ol-blue-gray-1;
@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;
@synctex-controls-z-index : 6;
@synctex-controls-padding : 0;
@editor-border-color : @ol-blue-gray-1;
@toolbar-border-color : @ol-blue-gray-1;
@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;
@editor-header-logo-background : url(/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;
// Navbar
@navbar-default-bg : #FFF;
@navbar-default-border : @ol-blue-gray-1;
@navbar-default-link-bg : @ol-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-title-color : @ol-blue-gray-1;
@navbar-title-color-hover : @ol-blue-gray-2;
@navbar-default-color : @ol-blue-gray-3;
@navbar-brand-image-url : url(/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;
@card-box-shadow : 0 0 0 1px @ol-blue-gray-1;
// v2 History
@history-toolbar-color : @ol-blue-gray-3;
@history-base-bg : @ol-blue-gray-0;
@history-file-badge-bg : rgba(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-menu-bg : transparent;
// Chat
@chat-bg : #FFF;
@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-new-message-textarea-bg : #FFF;
@chat-new-message-textarea-color : @ol-blue-gray-6;
@chat-new-message-border-color : @ol-blue-gray-1;