first commit

services/web/frontend/stylesheets/variables/border-radius.less

@@ -0,0 +1,9 @@
+// TODO: Convert all of the border-radius usage to the new values
+@border-radius-small: 2px;
+@border-radius-base: 3px;
+@border-radius-large: 5px;
+
+@border-radius-base-new: 4px;
+@border-radius-medium-new: 8px;
+@border-radius-large-new: 16px;
+@border-radius-full-new: 9999px;

services/web/frontend/stylesheets/variables/colors.less

@@ -0,0 +1,120 @@
+// ====== Color Palette ======
+// Neutral
+@white: #ffffff;
+@neutral-10: #f4f5f6;
+@neutral-20: #e7e9ee;
+@neutral-30: #d0d5dd;
+@neutral-40: #afb5c0;
+@neutral-50: #8d96a5;
+@neutral-60: #677283;
+@neutral-70: #495365;
+@neutral-80: #2f3a4c;
+@neutral-90: #1b222c;
+
+// Green
+@green-10: #eaf6ef;
+@green-20: #b8dbc8;
+@green-30: #86caa5;
+@green-40: #53b57f;
+@green-50: #098842;
+@green-60: #1e6b41;
+@green-70: #195936;
+
+// Blue
+@blue-10: #f1f4f9;
+@blue-20: #c3d0e3;
+@blue-30: #97b6e5;
+@blue-40: #6597e0;
+@blue-50: #3265b2;
+@blue-60: #28518f;
+@blue-70: #214475;
+
+// Red
+@red-10: #f9f1f1;
+@red-20: #f5beba;
+@red-30: #e59d9a;
+@red-40: #e36d66;
+@red-50: #b83a33;
+@red-60: #942f2a;
+@red-70: #782722;
+
+// Yellow
+@yellow-10: #fcf1e3;
+@yellow-20: #fcc483;
+@yellow-30: #f7a445;
+@yellow-40: #de8014;
+@yellow-50: #8f5514;
+@yellow-60: #7a4304;
+@yellow-70: #633a0b;
+
+// ====== Commonly used variable names ======
+// (all should be based on color palette above)
+@gray-darker: @neutral-90;
+@gray-dark: @neutral-70;
+@gray: @neutral-60;
+@gray-light: @neutral-40;
+@gray-lighter: @neutral-30;
+@gray-lightest: @neutral-10;
+
+@blue: @blue-50;
+@blue-dark: @blue-60;
+@green: @green-50;
+@green-dark: @green-60;
+@green-darker: @green-70;
+@red: @red-50;
+@orange: @yellow-40;
+@orange-dark: @yellow-60;
+
+@brand-primary: @green;
+@brand-secondary: @green-darker;
+@brand-success: @green;
+@brand-info: @blue;
+@brand-warning: @orange;
+@brand-danger: @red;
+
+@accent-color-secondary: @green-darker;
+@color-disabled: @neutral-20;
+
+// == Content ==
+// on light background
+@content-primary-on-light-bg: @neutral-90;
+@content-secondary-on-light-bg: @neutral-70;
+@content-disabled-on-light-bg: @neutral-40;
+@content-placeholder-on-light-bg: @neutral-50;
+// on dark background
+@content-primary-on-dark-bg: @white;
+@content-secondary-on-dark-bg: @neutral-20;
+@content-disabled-on-dark-bg: @neutral-60;
+@content-placeholder-on-dark-bg: @neutral-50;
+// default
+@content-primary: @content-primary-on-light-bg;
+@content-secondary: @content-secondary-on-light-bg;
+@content-disabled: @content-disabled-on-light-bg;
+@content-placeholder: @content-placeholder-on-light-bg;
+
+// == Website Redesign ==
+@ceil: #9597c9;
+@caramel: #f9d38f;
+@dark-jungle-green: #0f271a;
+@malachite: #13c965;
+@sapphire-blue: #4354a3;
+@sapphire-blue-dark: #3c4c93;
+@vivid-tangerine: #f1a695;
+
+// == ol-* legacy variables ==
+// These will eventually be removed and replaced with above names
+@ol-type-color: @content-secondary;
+@ol-blue-gray-0: @neutral-10;
+@ol-blue-gray-1: @neutral-20;
+@ol-blue-gray-2: @neutral-40;
+@ol-blue-gray-3: @neutral-60;
+@ol-blue-gray-4: @neutral-70;
+@ol-blue-gray-5: @neutral-80;
+@ol-blue-gray-6: @neutral-90;
+@ol-green: @green-50;
+@ol-dark-green: @green-darker;
+@ol-darker-green: @green-darker;
+@ol-blue: @blue-50;
+@ol-dark-blue: @blue-dark;
+@ol-red: @red-50;
+@ol-dark-red: @red-60;

services/web/frontend/stylesheets/variables/css-variables.less

@@ -0,0 +1,153 @@
+:root {
+  // Neutral
+  --white: @white;
+  --neutral-10: @neutral-10;
+  --neutral-20: @neutral-20;
+  --neutral-30: @neutral-30;
+  --neutral-40: @neutral-40;
+  --neutral-50: @neutral-50;
+  --neutral-60: @neutral-60;
+  --neutral-70: @neutral-70;
+  --neutral-80: @neutral-80;
+  --neutral-90: @neutral-90;
+
+  // Green
+  --green-10: @green-10;
+  --green-20: @green-20;
+  --green-30: @green-30;
+  --green-40: @green-40;
+  --green-50: @green-50;
+  --green-60: @green-60;
+  --green-70: @green-70;
+
+  // Blue
+  --blue-10: @blue-10;
+  --blue-20: @blue-20;
+  --blue-30: @blue-30;
+  --blue-40: @blue-40;
+  --blue-50: @blue-50;
+  --blue-60: @blue-60;
+  --blue-70: @blue-70;
+
+  // Red
+  --red-10: @red-10;
+  --red-20: @red-20;
+  --red-30: @red-30;
+  --red-40: @red-40;
+  --red-50: @red-50;
+  --red-60: @red-60;
+  --red-70: @red-70;
+
+  // Yellow
+  --yellow-10: @yellow-10;
+  --yellow-20: @yellow-20;
+  --yellow-30: @yellow-30;
+  --yellow-40: @yellow-40;
+  --yellow-50: @yellow-50;
+  --yellow-60: @yellow-60;
+  --yellow-70: @yellow-70;
+
+  // legacy variables
+  --ol-blue: @ol-blue;
+
+  --ol-blue-gray-0: @ol-blue-gray-0;
+  --ol-blue-gray-1: @ol-blue-gray-1;
+  --ol-blue-gray-2: @ol-blue-gray-2;
+  --ol-blue-gray-3: @ol-blue-gray-3;
+  --ol-blue-gray-4: @ol-blue-gray-4;
+  --ol-blue-gray-5: @ol-blue-gray-5;
+  --ol-blue-gray-6: @ol-blue-gray-6;
+
+  // input
+  --input-color: @input-color;
+  --input-border: @input-border;
+  --input-border-radius: @input-border-radius;
+  --input-border-focus: @input-border-focus;
+  --input-border-danger: @state-danger-border;
+  --input-shadow-danger-color: fade(@state-danger-border, 50%);
+
+  // border
+  --btn-border-radius-base: @btn-border-radius-base;
+  --btn-default-bg: @btn-default-bg;
+
+  // text
+  --line-height-base: @line-height-base;
+
+  // toolbar
+  --toolbar-btn-color: @toolbar-btn-color;
+  --editor-toolbar-bg: @editor-toolbar-bg;
+
+  // gradient
+  --premium-gradient: @premium-gradient;
+
+  // website-redesign
+  --ceil: @ceil;
+  --caramel: @caramel;
+  --dark-jungle-green: @dark-jungle-green;
+  --malachite: @malachite;
+  --sapphire-blue: @sapphire-blue;
+  --sapphire-blue-dark: @sapphire-blue-dark;
+  --vivid-tangerine: @vivid-tangerine;
+
+  // spacing
+  --spacing-00: @spacing-00; // 0px
+  --spacing-01: @spacing-01; // 2px
+  --spacing-02: @spacing-02; // 4px
+  --spacing-03: @spacing-03; // 6px
+  --spacing-04: @spacing-04; // 8px
+  --spacing-05: @spacing-05; // 12px
+  --spacing-06: @spacing-06; // 16px
+  --spacing-07: @spacing-07; // 20px
+  --spacing-08: @spacing-08; // 24px
+  --spacing-09: @spacing-09; // 32px
+  --spacing-10: @spacing-10; // 40px
+  --spacing-11: @spacing-11; // 48px
+  --spacing-12: @spacing-12; // 56px
+  --spacing-13: @spacing-13; // 64px
+  --spacing-14: @spacing-14; // 72px
+  --spacing-15: @spacing-15; // 80px
+  --spacing-16: @spacing-16; // 96px
+
+  // layout
+  --header-height: @header-height;
+
+  // font-size
+  --font-size-01: @font-size-01; // 0.75rem | 12px
+  --font-size-02: @font-size-02; // 0.875rem | 14px
+  --font-size-03: @font-size-03; // 1rem | 16px
+  --font-size-04: @font-size-04; // 1.125rem | 18px
+  --font-size-05: @font-size-05; // 1.25rem | 20px
+  --font-size-06: @font-size-06; // 1.5rem | 24px
+  --font-size-07: @font-size-07; // 1.875rem | 30px
+  --font-size-08: @font-size-08; // 2.25rem | 36px
+  --font-size-09: @font-size-09; // 3rem | 48px
+  --font-size-10: @font-size-10; // 3.25rem | 52px
+  --font-size-11: @font-size-11; // 3.75rem | 60px
+  --font-size-12: @font-size-12; // 4.5rem | 72px
+  --font-size-13: @font-size-13; // 6rem | 96px
+  --font-size-body-base: @font-size-body-base;
+
+  // line-height
+  --line-height-01: @line-height-01; // 1rem | 16px
+  --line-height-02: @line-height-02; // 1.25rem | 20px
+  --line-height-03: @line-height-03; // 1.5rem | 24px
+  --line-height-04: @line-height-04; // 1.75rem | 28px
+  --line-height-05: @line-height-05; // 2rem | 32px
+  --line-height-06: @line-height-06; // 2.5rem | 40px
+  --line-height-07: @line-height-07; // 3rem | 48px
+  --line-height-08: @line-height-08; // 4rem | 64px
+  --line-height-09: @line-height-09; // 4.25rem | 68px
+  --line-height-10: @line-height-10; // 5rem | 80px
+  --line-height-11: @line-height-11; // 6rem | 96px
+  --line-height-12: @line-height-12; // 8rem | 128px
+
+  // border-radius
+  --border-radius-base-new: @border-radius-base-new;
+  --border-radius-medium-new: @border-radius-medium-new;
+  --border-radius-large-new: @border-radius-large-new;
+  --border-radius-full-new: @border-radius-full-new;
+
+  // border-width
+  --border-width-sm: @border-width-sm;
+  --border-width-base: @border-width-base;
+}

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

@@ -0,0 +1,61 @@
+@ieee-blue: #00629b;
+@ieee-dark-blue: #002855;
+@ieee-cyan: #00b5e2;
+@ieee-dark-cyan: #009ca6;
+@ieee-red: #ba0c2f;
+@ieee-orange: #ffa300;
+@ieee-yellow: #ffd100;
+@ieee-light-green: #78be20;
+@ieee-dark-green: #00843d;
+@ieee-purple: #981d97;
+
+@ol-blue-gray-0: #f4f5f8;
+@ol-blue-gray-1: #d8e0e6;
+@ol-blue-gray-2: #8195a1;
+@ol-blue-gray-3: #425e6e;
+@ol-blue-gray-4: #26425f;
+@ol-blue-gray-5: #1e3048;
+@ol-blue-gray-6: #112437;
+
+@ol-green: @ieee-dark-green;
+@ol-dark-green: darken(@ieee-dark-green, 15%);
+@ol-blue: @ieee-blue;
+@ol-dark-blue: @ieee-dark-blue;
+@ol-red: @ieee-red;
+@ol-dark-red: darken(@ieee-red, 15%);
+
+@green: @ol-green;
+@green-dark: @ol-dark-green;
+@blue: @ol-blue;
+@blue-dark: @ol-dark-blue;
+@red: @ol-red;
+
+@brand-primary: @ieee-blue;
+@brand-secondary: @ieee-dark-blue;
+@brand-success: @ol-blue;
+@brand-info: @ieee-dark-cyan;
+@brand-warning: @ieee-orange;
+@brand-danger: @ol-red;
+
+@btn-primary-bg: @ieee-blue;
+@link-color: @ieee-blue;
+@link-hover-color: @ieee-dark-blue;
+
+@toolbar-btn-active-bg-color: @ieee-blue;
+@file-tree-item-selected-bg: @ieee-blue;
+@file-tree-multiselect-bg: @ieee-cyan;
+
+@editor-toggler-hover-bg-color: @ieee-blue;
+
+@toggle-switch-highlight-color: @ieee-blue;
+
+@footer-link-color: @link-color;
+@footer-link-hover-color: @link-hover-color;
+
+@navbar-subdued-hover-color: @ieee-blue;
+@navbar-default-link-hover-bg: @ieee-blue;
+@navbar-default-link-hover-color: @ieee-blue;
+@navbar-default-link-active-bg: @ieee-blue;
+
+@btn-primary-hover-bg-color: darken(@brand-primary, 8%);
+@btn-default-bg: @ol-blue-gray-4;

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

@@ -0,0 +1,132 @@
+// Sidebar
+@sidebar-bg: #fff;
+@sidebar-color: @neutral-40;
+@sidebar-active-bg: @green;
+@sidebar-active-color: #fff;
+@sidebar-hover-bg: @neutral-20;
+@sidebar-active-font-weight: normal;
+@sidebar-hover-text-decoration: none;
+
+@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: @neutral-10;
+
+@input-border: @neutral-20;
+
+// Editor file-tree
+@file-tree-bg: #fff;
+@file-tree-line-height: 2.05;
+@file-tree-item-color: @neutral-70;
+@file-tree-item-focus-color: @file-tree-item-color;
+@file-tree-item-selected-color: #fff;
+@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;
+@file-tree-error-color: @ol-blue-gray-5;
+@file-tree-toolbar-btn-hover-color: @neutral-10;
+
+@content-alt-bg-color: @neutral-10;
+
+// File outline
+@outline-line-guide-color: @neutral-20;
+@outline-header-hover-bg: @file-tree-item-hover-bg;
+@outline-highlight-bg: mix(@file-tree-bg, @neutral-20);
+
+@vertical-resizable-resizer-bg: @neutral-20;
+@vertical-resizable-resizer-hover-bg: @file-tree-item-hover-bg;
+
+// Editor resizers
+@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: @neutral-20;
+
+@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: @neutral-20;
+@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: @neutral-70;
+@project-rename-link-color: @neutral-70;
+@project-rename-link-color-hover: @neutral-70;
+@logs-pane-bg: @neutral-10;
+@pdf-toolbar-btn-hover-color: @neutral-10;
+
+// Navbar
+@navbar-default-bg: #fff;
+@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: @green;
+@navbar-default-link-active-bg: @green;
+@navbar-default-link-hover-color: @green;
+
+@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: @neutral-70;
+@navbar-subdued-hover-bg: @neutral-20;
+@navbar-subdued-hover-color: @neutral-70;
+
+// v2 History
+@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: @neutral-20;
+@formatting-menu-bg: #fff;
+
+// Chat
+@chat-bg: #fff;
+@chat-instructions-color: @neutral-70;
+@chat-message-color: #fff;
+@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: @neutral-90;
+@chat-new-message-border-color: @neutral-20;
+
+// Symbol Palette
+@symbol-palette-bg: #fff;
+@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: @blue;
+@symbol-palette-text-shadow-color: @neutral-20;
+
+// React History
+@history-react-header-bg: #fff;
+@history-react-header-color: @ol-blue-gray-3;
+@history-react-separator-color: @neutral-20;

services/web/frontend/stylesheets/variables/z-index.less

@@ -0,0 +1,2 @@
+@z-index-plans-page-table-header-mobile: 100;
+@z-index-navbar: 200;