Merge pull request #10073 from overleaf/jel-cleanup-imports

[web] Design system updates

GitOrigin-RevId: d5a9d8736083b076474e2a43f0200a6419f24a92

services/web/frontend/stylesheets/app/recurly.less

@@ -2,7 +2,7 @@
   &:extend(.form-control);
 }
 
-.recurly-element-card {
+.recurly-element-card when (@is-new-css = false) {
   &:extend(.form-control);
   padding: 4px 4px;
   border: 1px #cccccc solid;
@@ -10,6 +10,18 @@
   height: 50px;
 }
 
+.recurly-element-card when (@is-new-css = true) {
+  &:extend(.form-control);
+  padding: 4px 4px;
+  border: @input-border-size @input-border solid;
+  border-radius: @input-border-radius;
+  height: 50px;
+
+  &.recurly-element-focus {
+    &:extend(.input-focus-style);
+  }
+}
+
 .recurly-element-card-invalid {
   &:extend(.has-error);
   border-color: @red;

services/web/frontend/stylesheets/app/subscription.less

@@ -175,3 +175,7 @@
   position: absolute;
   left: 10px;
 }
+
+.recurly-hosted-field-input when (@is-new-css = true) {
+  &:extend(.form-control);
+}

services/web/frontend/stylesheets/components/divider.less

@@ -1,3 +1,3 @@
 .horizontal-divider {
-  border-top: 1px solid @table-border-color;
+  border-top: 1px solid @hr-border;
 }

services/web/frontend/stylesheets/components/forms.less

@@ -108,7 +108,7 @@ output {
 // input[type="tel"]
 // input[type="color"]
 
-.form-control {
+.form-control when (@is-new-css = false) {
   display: block;
   width: 100%;
   height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
@@ -118,7 +118,7 @@ output {
   color: @input-color;
   background-color: @input-bg;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
-  border: 1px solid @input-border;
+  border: @input-border-size solid @input-border;
   border-radius: @input-border-radius;
   .box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
   .transition(~'border-color ease-in-out .15s, box-shadow ease-in-out .15s');
@@ -152,6 +152,50 @@ output {
     border-radius: @border-radius-base;
   }
 }
+.form-control when (@is-new-css = true) {
+  display: block;
+  width: 100%;
+  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: @padding-base-vertical @padding-base-horizontal;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  color: @input-color;
+  background-color: @input-bg;
+  border: @input-border-size solid @input-border;
+  border-radius: @input-border-radius;
+  .transition(~'border-color ease-in-out .15s, box-shadow ease-in-out .15s');
+
+  // Customize the `:focus` state to imitate native WebKit styles.
+  .form-control-focus();
+
+  // Placeholder
+  .placeholder();
+
+  // Disabled and read-only inputs
+  //
+  // HTML5 says that controls under a fieldset > legend:first-child won't be
+  // disabled if the fieldset is disabled. Due to implementation difficulty, we
+  // don't honor that edge case; we style them as disabled anyway.
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+    background-color: @input-bg-disabled;
+    border-color: @input-bg-disabled;
+    opacity: 1; // iOS fix for unreadable disabled content
+    .placeholder(@neutral-40);
+  }
+
+  // Reset height for `textarea`s, and smaller border-radius
+  textarea& {
+    height: auto;
+    border-radius: @border-radius-base;
+  }
+  // Smaller border-radius for `select` inputs
+  select& {
+    border-radius: @border-radius-base;
+  }
+}
 
 // Search inputs in iOS
 //
@@ -308,22 +352,32 @@ input[type='checkbox'],
 }
 
 // Feedback states
-.has-success {
+.has-success when(@is-new-css = false) {
   .form-control-validation(
     @state-success-text; @state-success-text; @state-success-bg
   );
 }
-.has-warning {
+.has-warning when(@is-new-css = false) {
   .form-control-validation(
     @state-warning-text; @state-warning-text; @state-warning-bg
   );
 }
-.has-error {
+.has-error when(@is-new-css = false) {
   .form-control-validation(
     @state-danger-text; @state-danger-text; @state-danger-bg
   );
+
   color: @red;
 }
+.has-success when(@is-new-css = true) {
+  .form-control-validation(@brand-success);
+}
+.has-warning when(@is-new-css = true) {
+  .form-control-validation(@brand-warning);
+}
+.has-error when(@is-new-css = true) {
+  .form-control-validation(@brand-danger);
+}
 
 .form-control.ng-dirty.ng-invalid:not(:focus),
 .form-control[data-ol-dirty]:invalid:not(:focus) {

services/web/frontend/stylesheets/core/mixins.less

@@ -1028,7 +1028,8 @@
 // Used in forms.less to generate the form validation CSS for warnings, errors,
 // and successes.
 
-.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
+.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5)
+  when(@is-new-css = false) {
   // Color the label and help text
   .help-block,
   .control-label,
@@ -1063,6 +1064,33 @@
   }
 }
 
+.form-control-validation(@color) when(@is-new-css = true) {
+  color: @color;
+
+  // Color the label and help text
+  .help-block,
+  .control-label,
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline {
+    color: @color;
+  }
+
+  .form-control {
+    border-color: @color;
+
+    &:focus {
+      border-color: @input-border-focus;
+    }
+  }
+
+  // Optional feedback icon
+  .form-control-feedback {
+    color: @color;
+  }
+}
+
 // Form control focus state
 //
 // Generate a customized focus state and for any input with the specified color,
@@ -1076,7 +1104,7 @@
 // Example usage: change the default blue border and shadow to white for better
 // contrast against a dark gray background.
 
-.form-control-focus(@color: @input-border-focus) {
+.form-control-focus(@color: @input-border-focus) when (@is-new-css = false) {
   @color-rgba: rgba(red(@color), green(@color), blue(@color), 0.6);
   &:focus {
     border-color: @color;
@@ -1085,6 +1113,19 @@
   }
 }
 
+.input-focus-style {
+  // need to define as class for recurly UI
+  border-color: @input-border-focus;
+  outline: 0;
+  box-shadow: 0px 0px 0px 2px rgba(50, 101, 178, 0.56);
+}
+
+.form-control-focus() when (@is-new-css = true) {
+  &:focus {
+    &:extend(.input-focus-style);
+  }
+}
+
 // Form control sizing
 //
 // Relative text size, padding, and border-radii changes for form controls. For

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

@@ -237,6 +237,8 @@
 @input-border-radius: unit(@line-height-base, em);
 //** Border color for inputs on focus
 @input-border-focus: #66afe9;
+//** Bordersize for inputs
+@input-border-size: 1px;
 
 //** Placeholder text color
 @input-color-placeholder: @gray-light;

services/web/frontend/stylesheets/main-style.less

@@ -5,13 +5,76 @@
 
 @is-overleaf-light: false;
 @show-rich-text: true;
+@is-new-css: true;
 
 // Core variables and mixins
 @import 'variables/all.less';
 @import 'variables/css-variables.less';
 @import 'app/ol-style-guide.less';
-@import '_style_includes.less';
-@import '_ol_style_includes.less';
+@import (less) '../fonts/font-awesome.css';
+
+@import 'core/mixins.less';
+
+// Reset
+@import 'core/normalize.less';
+@import 'core/print.less';
+
+// Vendor CSS
+@import (less) 'vendor/pdfListView/TextLayer.css';
+@import (less) 'vendor/pdfListView/AnnotationsLayer.css';
+@import (less) 'vendor/pdfListView/HighlightsLayer.css';
+@import (less) 'vendor/select/select.css';
+@import (less) 'vendor/codemirror.css';
+@import (less) 'vendor/codemirror-dialog.css';
+@import (less) 'vendor/codemirror-show-hint.css';
+
+// Core CSS
+@import 'core/scaffolding.less';
+@import 'core/type.less';
+@import 'core/grid.less';
+@import 'core/accessibility.less';
+@import 'core/spacing.less';
+// Utility classes
+@import 'core/utilities.less';
+@import 'core/responsive-utilities.less';
+
+// Components
+@import 'components/tables.less';
+@import 'components/forms.less';
+@import 'components/buttons.less';
+@import 'components/card.less';
+@import 'components/component-animations.less';
+@import 'components/dropdowns.less';
+@import 'components/button-groups.less';
+@import 'components/input-groups.less';
+@import 'components/navs.less';
+@import 'components/navbar.less';
+@import 'components/footer.less';
+@import 'components/notifications.less';
+@import 'components/labels.less';
+@import 'components/thumbnails.less';
+@import 'components/alerts.less';
+@import 'components/progress-bars.less';
+@import 'components/close.less';
+@import 'components/fineupload.less';
+@import 'components/hover.less';
+@import 'components/ui-select.less';
+@import 'components/input-suggestions.less';
+@import 'components/nvd3.less';
+@import 'components/nvd3_override.less';
+@import 'components/infinite-scroll.less';
+@import 'components/expand-collapse.less';
+@import 'components/beta-badges.less';
+@import 'components/divider.less';
+
+// Components w/ JavaScript
+@import 'components/modals.less';
+@import 'components/tooltip.less';
+@import 'components/popovers.less';
+@import 'components/daterange-picker';
+@import 'components/vertical-resizable-panes.less';
+@import 'components/lists.less';
+@import 'components/overbox.less';
 @import 'components/embed-responsive.less';
 @import 'components/icons.less';
 @import 'components/images.less';
@@ -19,6 +82,48 @@
 @import 'components/pagination.less';
 @import 'components/tabs.less';
 
+// ngTagsInput
+@import 'components/tags-input.less';
+
+// ShareLaTeX app classes
+@import 'app/base.less';
+@import 'app/account-settings.less';
+@import 'app/beta-program.less';
+@import 'app/about-page.less';
+@import 'app/project-list.less';
+@import 'app/project-list-react.less';
+@import 'app/editor.less';
+@import 'app/homepage.less';
+@import 'app/plans.less';
+@import 'app/plans-v2.less';
+@import 'app/recurly.less';
+@import 'app/bonus.less';
+@import 'app/register.less';
+@import 'app/blog.less';
+@import 'app/features.less';
+@import 'app/templates.less';
+@import 'app/wiki.less';
+@import 'app/translations.less';
+@import 'app/contact-us.less';
+@import 'app/subscription.less';
+@import 'app/invite.less';
+@import 'app/error-pages.less';
+@import 'app/editor/history-v2.less';
+@import 'app/metrics.less';
+@import 'app/open-in-overleaf.less';
+@import 'app/primary-email-check';
+@import 'app/project-url-lookup';
+@import 'app/grammarly';
+@import 'app/sidebar-v2-dash-pane.less';
+@import 'app/front-chat-widget.less';
+@import 'app/ol-chat.less';
+@import 'app/templates-v2.less';
+@import 'app/login-register.less';
+@import 'app/review-features-page.less';
+@import 'app/institution-hub.less';
+@import 'app/publisher-hub.less';
+@import 'app/admin-hub.less';
+@import 'app/import.less';
 // Pages
 @import 'app/about.less';
 @import 'app/blog-posts.less';
@@ -26,3 +131,9 @@
 @import 'app/content_page.less';
 @import 'app/plans-ol.less';
 @import 'app/portals.less';
+
+// module styles
+// TODO: find a way for modules to add styles dynamically
+@import 'modules/symbol-palette.less';
+@import 'modules/galileo.less';
+@import 'modules/admin-panel.less';

services/web/frontend/stylesheets/style.less

@@ -5,6 +5,7 @@
 
 @is-overleaf-light: false;
 @show-rich-text: true;
+@is-new-css: false;
 
 // Core variables and mixins
 @import 'core/variables.less';

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

@@ -1,60 +1,15 @@
+@import 'colors.less';
+
 //
 // Variables
 // --------------------------------------------------
 
-@gray-darker: #252525;
-@gray-dark: #505050;
-@gray: #7a7a7a;
-@gray-light: #a4a4a4;
-@gray-lighter: #cfcfcf;
-@gray-lightest: #f0f0f0;
-@white: #ffffff;
-
-// Styleguide colors
-@ol-blue-gray-0: #f4f5f8;
-@ol-blue-gray-1: #e4e8ee;
-@ol-blue-gray-2: #9da7b7;
-@ol-blue-gray-3: #5d6879;
-@ol-blue-gray-4: #455265;
-@ol-blue-gray-5: #2c3645;
-@ol-blue-gray-6: #1e2530;
-
-@ol-green: #138a07;
-@ol-type-green: #107206;
-@ol-dark-green: #004a0e;
-@ol-darker-green: #083c03;
-@ol-blue: #3e70bb;
-@ol-dark-blue: #2857a1;
-@ol-red: #c9453e;
-@ol-dark-red: #a6312b;
-
-@blue: #405ebf;
-@blueDark: #040d2d;
-@green: #46a546;
-@red: #a93529;
-@yellow: #a1a729;
-@orange: #f89406;
-@orange-dark: #9e5e04;
-@pink: #c3325f;
-@purple: #7a43b6;
-
-@brand-primary: @ol-green;
-@brand-secondary: @ol-dark-green;
-@brand-success: @green;
-@brand-info: @ol-blue;
-@brand-warning: @orange;
-@brand-danger: @ol-red;
-
-@ol-type-color: @ol-blue-gray-3;
-@accent-color-primary: @ol-green;
-@accent-color-secondary: @ol-dark-green;
-
 @editor-header-logo-background: url(../../../public/img/ol-brand/overleaf-o-white.svg)
   center / contain no-repeat;
 @editor-loading-logo-padding-top: 115.44%;
 @editor-loading-logo-background-url: url(../../../public/img/ol-brand/overleaf-o-grey.svg);
 @editor-loading-logo-foreground-url: url(../../../public/img/ol-brand/overleaf-o.svg);
-@editor-search-count-color: @ol-blue-gray-4;
+@editor-search-count-color: @neutral-70;
 
 //== Scaffolding
 //
@@ -63,16 +18,16 @@
 //** Background color for `<body>`.
 @body-bg: #fff;
 //** Global text color on `<body>`.
-@text-color: @ol-type-color;
+@text-color: @content-secondary;
 
 //** Global textual link color.
-@link-color: @ol-blue;
-@link-active-color: @ol-dark-green;
+@link-color: @blue;
+@link-active-color: @green-darker;
 //** Link hover color set via `darken()` function.
-@link-hover-color: @ol-dark-blue;
+@link-hover-color: @blue-dark;
 
-@link-color-alt: @ol-type-green;
-@link-hover-color-alt: @ol-dark-green;
+@link-color-alt: @green-dark;
+@link-hover-color-alt: @green-darker;
 @hr-border-alt: @gray-lighter;
 
 //== Typography
@@ -106,7 +61,7 @@
 @headings-font-family: @font-family-serif;
 @headings-font-weight: 500;
 @headings-line-height: 1.35;
-@headings-color: @gray-dark;
+@headings-color: @content-primary;
 
 //-- Iconography
 //
@@ -152,11 +107,15 @@
 @border-radius-base: 3px;
 @border-radius-large: 5px;
 @border-radius-small: 2px;
-@border-width-base: 3px;
-@border-color-base: @ol-blue-gray-2;
+@border-width-base: 3px; // only used by plans and cards
+@border-size: 1.5px;
+@border-color-base: @neutral-40;
+
+//** Horizontal line color.
+@hr-border: @neutral-20;
 
-@btn-switch-color: @ol-blue-gray-4;
-@btn-switch-hover-color: darken(@ol-blue-gray-4, 8%);
+@btn-switch-color: @neutral-70;
+@btn-switch-hover-color: darken(@neutral-70, 8%);
 
 //** Global color for active items (e.g., navs or dropdowns).
 @component-active-color: #fff;
@@ -186,7 +145,7 @@
 @table-bg-active: @table-bg-hover;
 
 //** Border color for table and cell borders.
-@table-border-color: #ddd;
+@table-border-color: @neutral-20;
 
 //== Buttons
 //
@@ -195,19 +154,19 @@
 @btn-font-weight: 700;
 
 @btn-default-color: #fff;
-@btn-default-bg: @ol-blue-gray-4;
+@btn-default-bg: @neutral-70;
 @btn-default-border: transparent;
 
 @btn-primary-color: #fff;
-@btn-primary-bg: @ol-green;
+@btn-primary-bg: @green;
 @btn-primary-border: transparent;
 
 @btn-success-color: #fff;
-@btn-success-bg: @ol-green;
+@btn-success-bg: @green;
 @btn-success-border: transparent;
 
 @btn-info-color: #fff;
-@btn-info-bg: @ol-blue;
+@btn-info-bg: @blue;
 @btn-info-border: transparent;
 
 @btn-warning-color: #fff;
@@ -215,7 +174,7 @@
 @btn-warning-border: transparent;
 
 @btn-danger-color: #fff;
-@btn-danger-bg: @ol-red;
+@btn-danger-bg: @red;
 @btn-danger-border: transparent;
 
 @btn-link-disabled-color: @gray-light;
@@ -227,19 +186,21 @@
 //** `<input>` background color
 @input-bg: #fff;
 //** `<input disabled>` background color
-@input-bg-disabled: @gray-lighter;
+@input-bg-disabled: @color-disabled;
 
 //** Text color for `<input>`s
-@input-color: @ol-blue-gray-3;
+@input-color: @neutral-90;
 //** `<input>` border color
-@input-border: #ccc;
+@input-border: @neutral-40;
 //** `<input>` border radius
-@input-border-radius: unit(@line-height-base, em);
+@input-border-radius: 4px;
 //** Border color for inputs on focus
-@input-border-focus: #66afe9;
+@input-border-focus: @blue-50;
+//** Bordersize for inputs
+@input-border-size: @border-size;
 
 //** Placeholder text color
-@input-color-placeholder: @gray-light;
+@input-color-placeholder: @neutral-60;
 
 //** Default `.form-control` height
 @input-height-base: @line-height-computed + (@padding-base-vertical * 2) - 1;
@@ -392,16 +353,16 @@
 @navbar-collapse-max-height: 380px;
 
 @navbar-default-color: #fff;
-@navbar-default-bg: @ol-blue-gray-6;
+@navbar-default-bg: @neutral-90;
 @navbar-default-border: transparent;
 
 // Navbar links
 @navbar-default-link-color: #fff;
 @navbar-default-link-border-color: @navbar-default-link-color;
-@navbar-default-link-hover-color: @ol-green;
-@navbar-default-link-hover-bg: @ol-green;
+@navbar-default-link-hover-color: @green;
+@navbar-default-link-hover-bg: @green;
 @navbar-default-link-active-color: #fff;
-@navbar-default-link-active-bg: @ol-green;
+@navbar-default-link-active-bg: @green;
 @navbar-default-link-disabled-color: #ccc;
 @navbar-default-link-disabled-bg: transparent;
 
@@ -442,82 +403,54 @@
 //== Pills
 @nav-pills-link-color: @btn-default-bg;
 @nav-pills-link-hover-color: @nav-link-hover-bg;
-@nav-pills-link-hover-bg: darken(
-  @ol-blue-gray-4,
-  8%
-); // match button-variant mixin
+@nav-pills-link-hover-bg: darken(@neutral-70, 8%); // match button-variant mixin
 @nav-pills-border-radius: @border-radius-base;
-@nav-pills-active-link-hover-bg: @ol-dark-green;
+@nav-pills-active-link-hover-bg: @green-darker;
 @nav-pills-active-link-hover-color: @component-active-color;
 
 //== Pagination
 //
 //##
 
-@pagination-color: @ol-dark-green;
+@pagination-color: @green-darker;
 @pagination-bg: #fff;
 @pagination-border: @gray-lighter;
 
-@pagination-hover-color: @ol-dark-green;
+@pagination-hover-color: @green-darker;
 @pagination-hover-bg: @gray-lightest;
 @pagination-hover-border: @gray-lighter;
 
 @pagination-active-color: #fff;
-@pagination-active-bg: @ol-dark-green;
+@pagination-active-bg: @green-darker;
 @pagination-active-border: @gray-lighter;
 
 @pagination-disabled-color: @gray-dark;
 @pagination-disabled-bg: @gray-lightest;
 @pagination-disabled-border: @gray-lighter;
 
-//== Pager
-//
-//##
-
-@pager-bg: @pagination-bg;
-@pager-border: @pagination-border;
-@pager-border-radius: 15px;
-
-@pager-hover-bg: @pagination-hover-bg;
-
-@pager-active-bg: @pagination-active-bg;
-@pager-active-color: @pagination-active-color;
-
-@pager-disabled-color: @pagination-disabled-color;
-
 // Plans
-@table-hover-bg: @ol-blue-gray-0;
+@table-hover-bg: @neutral-10;
 @plans-non-highlighted: white;
 
-//== Jumbotron
-//
-//##
-
-@jumbotron-padding: 30px;
-@jumbotron-color: inherit;
-@jumbotron-bg: @gray-lighter;
-@jumbotron-heading-color: inherit;
-@jumbotron-font-size: ceil((@font-size-base * 1.5));
-
 //== Form states and alerts
 //
 //## Define colors for form feedback states and, by default, alerts.
 
-@state-success-text: darken(@brand-success, 20%);
+@state-success-text: @brand-success;
 @state-success-bg: lighten(@brand-success, 50%);
-@state-success-border: darken(@brand-success, 5%);
+@state-success-border: @brand-success;
 
-@state-info-text: darken(@brand-info, 20%);
+@state-info-text: @content-secondary;
 @state-info-bg: lighten(@brand-info, 47%);
-@state-info-border: darken(@brand-info, 7%);
+@state-info-border: @content-secondary;
 
-@state-warning-text: darken(@brand-warning, 10%);
+@state-warning-text: @brand-warning;
 @state-warning-bg: lighten(@brand-warning, 45%);
 @state-warning-border: @brand-warning;
 
-@state-danger-text: darken(@brand-danger, 10%);
+@state-danger-text: @brand-danger;
 @state-danger-bg: lighten(@brand-danger, 50%);
-@state-danger-border: darken(@brand-danger, 5%);
+@state-danger-border: @brand-danger;
 
 //== Tooltips
 //
@@ -646,8 +579,8 @@
 @alert-danger-text: #fff;
 @alert-danger-border: transparent;
 
-@alert-alt-bg: @ol-blue-gray-1;
-@alert-alt-text: @ol-type-color;
+@alert-alt-bg: @neutral-20;
+@alert-alt-text: @content-secondary;
 @alert-alt-border: transparent;
 
 //== Progress bars
@@ -661,75 +594,15 @@
 @progress-bar-color: #fff;
 
 //** Default progress bar color
-@progress-bar-bg: @ol-blue-gray-4;
+@progress-bar-bg: @neutral-70;
 //** Success progress bar color
-@progress-bar-success-bg: @ol-green;
+@progress-bar-success-bg: @green;
 //** Warning progress bar color
 @progress-bar-warning-bg: @brand-warning;
 //** Danger progress bar color
-@progress-bar-danger-bg: @ol-red;
+@progress-bar-danger-bg: @red;
 //** Info progress bar color
-@progress-bar-info-bg: @ol-blue;
-
-//== List group
-//
-//##
-
-//** Background color on `.list-group-item`
-@list-group-bg: #fff;
-//** `.list-group-item` border color
-@list-group-border: #ddd;
-//** List group border radius
-@list-group-border-radius: @border-radius-base;
-
-//** Background color of single list elements on hover
-@list-group-hover-bg: #f5f5f5;
-//** Text color of active list elements
-@list-group-active-color: @component-active-color;
-//** Background color of active list elements
-@list-group-active-bg: @component-active-bg;
-//** Border color of active list elements
-@list-group-active-border: @list-group-active-bg;
-@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
-
-@list-group-link-color: #555;
-@list-group-link-heading-color: #333;
-
-//== Panels
-//
-//##
-
-@panel-bg: #fff;
-@panel-body-padding: 15px;
-@panel-border-radius: @border-radius-base;
-
-//** Border color for elements within panels
-@panel-inner-border: #ddd;
-@panel-footer-bg: #f5f5f5;
-
-@panel-default-text: @gray-dark;
-@panel-default-border: #ddd;
-@panel-default-heading-bg: #f5f5f5;
-
-@panel-primary-text: #fff;
-@panel-primary-border: @brand-primary;
-@panel-primary-heading-bg: @brand-primary;
-
-@panel-success-text: @state-success-text;
-@panel-success-border: @state-success-border;
-@panel-success-heading-bg: @state-success-bg;
-
-@panel-info-text: @state-info-text;
-@panel-info-border: @state-info-border;
-@panel-info-heading-bg: @state-info-bg;
-
-@panel-warning-text: @state-warning-text;
-@panel-warning-border: @state-warning-border;
-@panel-warning-heading-bg: @state-warning-bg;
-
-@panel-danger-text: @state-danger-text;
-@panel-danger-border: @state-danger-border;
-@panel-danger-heading-bg: @state-danger-bg;
+@progress-bar-info-bg: @blue;
 
 //== Thumbnails
 //
@@ -749,62 +622,6 @@
 //** Padding around the thumbnail caption
 @thumbnail-caption-padding: 9px;
 
-//== Wells
-//
-//##
-
-@well-bg: #f5f5f5;
-@well-border: darken(@well-bg, 7%);
-
-//== Badges
-//
-//##
-
-@badge-color: #fff;
-//** Linked badge text color on hover
-@badge-link-hover-color: #fff;
-@badge-bg: @gray-light;
-
-//** Badge text color in active nav link
-@badge-active-color: @link-color;
-//** Badge background color in active nav link
-@badge-active-bg: #fff;
-
-@badge-font-weight: bold;
-@badge-line-height: 1;
-@badge-border-radius: 10px;
-
-//== Breadcrumbs
-//
-//##
-
-@breadcrumb-padding-vertical: 8px;
-@breadcrumb-padding-horizontal: 15px;
-//** Breadcrumb background color
-@breadcrumb-bg: #f5f5f5;
-//** Breadcrumb text color
-@breadcrumb-color: #ccc;
-//** Text color of current page in the breadcrumb
-@breadcrumb-active-color: @gray-light;
-//** Textual separator for between breadcrumb elements
-@breadcrumb-separator: '/';
-
-//== Carousel
-//
-//##
-
-@carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-
-@carousel-control-color: #fff;
-@carousel-control-width: 15%;
-@carousel-control-opacity: 0.5;
-@carousel-control-font-size: 20px;
-
-@carousel-indicator-active-bg: #fff;
-@carousel-indicator-border-color: #fff;
-
-@carousel-caption-color: #fff;
-
 //== Close
 //
 //##
@@ -813,21 +630,6 @@
 @close-color: #000;
 @close-text-shadow: 0 1px 0 #fff;
 
-//== Code
-//
-//##
-
-@code-color: #c7254e;
-@code-bg: #f9f2f4;
-
-@kbd-color: #fff;
-@kbd-bg: #333;
-
-@pre-bg: #f5f5f5;
-@pre-color: @gray-dark;
-@pre-border-color: #ccc;
-@pre-scrollable-max-height: 340px;
-
 //== Type
 //
 //##
@@ -839,21 +641,18 @@
 //** Headings small color
 @headings-small-color: @gray-light;
 //** Blockquote small color
-@blockquote-small-color: @ol-blue-gray-3;
+@blockquote-small-color: @neutral-60;
 //** Blockquote font size
 @blockquote-font-size: (@font-size-base * 1.125);
 //** Blockquote border color
 @blockquote-border-color: @gray-lighter;
 //** Page header border color
-@page-header-border-color: @gray-lighter;
+@page-header-border-color: @hr-border;
 
 //== Miscellaneous
-@editor-search-count-color: @ol-blue-gray-4;
+@editor-search-count-color: @neutral-70;
 //##
 
-//** Horizontal line color.
-@hr-border: @ol-blue-gray-1;
-
 //** Horizontal offset for forms and lists.
 @component-offset-horizontal: 180px;
 
@@ -862,10 +661,10 @@
 @left-menu-width: 260px;
 @left-menu-animation-duration: 0.35s;
 
-@toolbar-border-color: @ol-blue-gray-5;
+@toolbar-border-color: @neutral-80;
 @toolbar-header-btn-border-color: @toolbar-border-color;
 @common-border-color: @gray-lighter;
-@editor-border-color: @ol-blue-gray-5;
+@editor-border-color: @neutral-80;
 
 @editor-dark-background-color: #333;
 @editor-dark-toolbar-border-color: #222;
@@ -876,14 +675,14 @@
 @footer-height: 50px;
 
 // Backgrounds
-@content-alt-bg-color: @ol-blue-gray-0;
+@content-alt-bg-color: @neutral-10;
 
 // Typography
-@text-small-color: @ol-type-color;
+@text-small-color: @content-secondary;
 
 // Navbar
-@navbar-title-color: @ol-blue-gray-1;
-@navbar-title-color-hover: @ol-blue-gray-2;
+@navbar-title-color: @neutral-20;
+@navbar-title-color-hover: @neutral-40;
 @navbar-default-padding-v: (@grid-gutter-width / 2);
 @navbar-default-padding-h: 10px;
 @navbar-default-padding: @navbar-default-padding-v @navbar-default-padding-h;
@@ -898,7 +697,7 @@
   (@padding-base-horizontal + 1) (@padding-base-vertical + 2);
 @navbar-subdued-color: #fff;
 @navbar-subdued-hover-bg: #fff;
-@navbar-subdued-hover-color: @ol-green;
+@navbar-subdued-hover-color: @green;
 @navbar-brand-image-url: url(../../../public/img/ol-brand/overleaf-white.svg);
 
 @dropdown-divider-margin: 6px;
@@ -916,29 +715,29 @@
 @card-box-shadow: none;
 
 // Project table
-@structured-list-link-color: @ol-blue;
-@structured-header-border-color: shade(@ol-blue-gray-1, 5%);
-@structured-list-border-color: @ol-blue-gray-1;
-@structured-list-hover-color: lighten(@ol-blue-gray-1, 5%);
+@structured-list-link-color: @blue;
+@structured-header-border-color: shade(@neutral-20, 5%);
+@structured-list-border-color: @neutral-20;
+@structured-list-hover-color: lighten(@neutral-20, 5%);
 @structured-list-line-height: 2.5;
 
 // Sidebar
-@sidebar-bg: @ol-blue-gray-5;
-@sidebar-color: @ol-blue-gray-2;
+@sidebar-bg: @neutral-80;
+@sidebar-color: @neutral-40;
 @sidebar-link-color: #fff;
 @sidebar-active-border-radius: 0;
-@sidebar-active-bg: @ol-blue-gray-6;
+@sidebar-active-bg: @neutral-90;
 @sidebar-active-color: #fff;
 @sidebar-active-font-weight: 700;
-@sidebar-hover-bg: @ol-blue-gray-4;
+@sidebar-hover-bg: @neutral-70;
 @sidebar-hover-text-decoration: none;
-@v2-dash-pane-bg: @ol-blue-gray-4;
+@v2-dash-pane-bg: @neutral-70;
 @v2-dash-pane-link-color: #fff;
 @v2-dash-pane-color: #fff;
-@v2-dash-pane-subdued-color: @ol-blue-gray-1;
+@v2-dash-pane-subdued-color: @neutral-20;
 @v2-dash-pane-toggle-color: #fff;
-@v2-dash-pane-btn-bg: @ol-blue-gray-5;
-@v2-dash-pane-btn-hover-bg: @ol-blue-gray-6;
+@v2-dash-pane-btn-bg: @neutral-80;
+@v2-dash-pane-btn-hover-bg: @neutral-90;
 
 @folders-menu-margin: 0 - (@grid-gutter-width / 2);
 @folders-menu-line-height: @structured-list-line-height;
@@ -950,7 +749,7 @@
 @folders-title-font-size: @font-size-small;
 @folders-title-font-weight: normal;
 @folders-title-line-height: @headings-line-height;
-@folders-title-color: @ol-blue-gray-2;
+@folders-title-color: @neutral-40;
 @folders-title-text-transform: uppercase;
 @folders-tag-padding: @folders-menu-item-v-padding 30px
   @folders-menu-item-v-padding @folders-menu-item-h-padding;
@@ -961,7 +760,7 @@
 @folders-tag-border-color: @folders-tag-menu-color;
 @folders-tag-menu-active-hover: rgba(0, 0, 0, 0.1);
 @folders-tag-menu-hover: rgba(0, 0, 0, 0.1);
-@info-badge-bg: @ol-blue;
+@info-badge-bg: @blue;
 // Progress bars
 @progress-border-radius: @line-height-computed;
 @progress-border-width: 0;
@@ -976,18 +775,18 @@
 
 // Editor header
 @ide-body-top-offset: 40px;
-@toolbar-header-bg-color: @ol-blue-gray-6;
+@toolbar-header-bg-color: @neutral-90;
 @toolbar-header-shadow: none;
 @toolbar-header-branded-btn-bg-color: transparent;
 @toolbar-btn-color: #fff;
 @toolbar-btn-hover-color: #fff;
-@toolbar-btn-hover-bg-color: @ol-blue-gray-5;
+@toolbar-btn-hover-bg-color: @neutral-80;
 @toolbar-btn-hover-text-shadow: none;
 @toolbar-btn-active-color: #fff;
-@toolbar-btn-active-bg-color: @ol-green;
+@toolbar-btn-active-bg-color: @green;
 @toolbar-btn-active-shadow: none;
 @toolbar-font-size: 13px;
-@toolbar-alt-bg-color: @ol-blue-gray-5;
+@toolbar-alt-bg-color: @neutral-80;
 @toolbar-icon-btn-color: #fff;
 @toolbar-icon-btn-hover-color: #fff;
 @toolbar-icon-btn-hover-shadow: none;
@@ -995,99 +794,99 @@
 @toolbar-border-bottom: 1px solid @toolbar-border-color;
 @toolbar-small-height: 32px;
 @toolbar-tall-height: 58px;
-@project-name-color: @ol-blue-gray-2;
-@project-rename-link-color: @ol-blue-gray-2;
-@project-rename-link-color-hover: @ol-blue-gray-1;
+@project-name-color: @neutral-40;
+@project-rename-link-color: @neutral-40;
+@project-rename-link-color-hover: @neutral-20;
 @global-alerts-padding: 7px;
 
 // Editor file-tree
-@file-tree-bg: @ol-blue-gray-4;
+@file-tree-bg: @neutral-70;
 @file-tree-line-height: 2.05;
 @file-tree-item-color: #fff;
 @file-tree-item-focus-color: @file-tree-item-color;
 @file-tree-item-selected-color: @file-tree-item-color;
-@file-tree-item-toggle-color: @ol-blue-gray-2;
-@file-tree-item-icon-color: @ol-blue-gray-2;
-@file-tree-item-input-color: @ol-blue-gray-5;
-@file-tree-item-folder-color: @ol-blue-gray-2;
-@file-tree-item-hover-bg: @ol-blue-gray-5;
-@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-error-color: @ol-blue-gray-1;
+@file-tree-item-toggle-color: @neutral-40;
+@file-tree-item-icon-color: @neutral-40;
+@file-tree-item-input-color: @neutral-80;
+@file-tree-item-folder-color: @neutral-40;
+@file-tree-item-hover-bg: @neutral-80;
+@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: @neutral-20;
 
 // File outline
 @outline-v-rhythm: 24px;
 @outline-h-rhythm: 24px;
 @outline-item-h-padding: @outline-h-rhythm * 0.25;
-@outline-line-guide-color: @ol-blue-gray-3;
-@outline-expand-collapse-color: @ol-blue-gray-2;
+@outline-line-guide-color: @neutral-60;
+@outline-expand-collapse-color: @neutral-40;
 @outline-no-items-color: @file-tree-item-color;
-@outline-header-hover-bg: @ol-blue-gray-6;
+@outline-header-hover-bg: @neutral-90;
 @outline-highlight-bg: tint(@file-tree-bg, 15%);
-@vertical-resizable-resizer-bg: @ol-blue-gray-5;
-@vertical-resizable-resizer-hover-bg: @ol-blue-gray-6;
+@vertical-resizable-resizer-bg: @neutral-80;
+@vertical-resizable-resizer-hover-bg: @neutral-90;
 
 // Editor resizers
-@editor-resizer-bg-color: @ol-blue-gray-5;
-@editor-resizer-bg-color-dragging: @ol-blue-gray-5;
-@editor-toggler-bg-color: darken(@ol-blue-gray-2, 15%);
-@editor-toggler-hover-bg-color: @ol-green;
+@editor-resizer-bg-color: @neutral-80;
+@editor-resizer-bg-color-dragging: @neutral-80;
+@editor-toggler-bg-color: darken(@neutral-40, 15%);
+@editor-toggler-hover-bg-color: @green;
 @synctex-controls-z-index: 6;
 @synctex-controls-padding: 0;
 
 // Editor toolbar
 @editor-toolbar-height: 32px;
-@editor-toolbar-bg: @ol-blue-gray-5;
+@editor-toolbar-bg: @neutral-80;
 
 // Toggle switch
-@toggle-switch-bg: @ol-blue-gray-1;
-@toggle-switch-highlight-color: @ol-green;
+@toggle-switch-bg: @neutral-20;
+@toggle-switch-highlight-color: @green;
 
 // Formatting buttons
 @formatting-btn-color: #fff;
-@formatting-btn-bg: @ol-blue-gray-5;
-@formatting-btn-border: @ol-blue-gray-4;
-@formatting-menu-bg: @ol-blue-gray-5;
+@formatting-btn-bg: @neutral-80;
+@formatting-btn-border: @neutral-70;
+@formatting-menu-bg: @neutral-80;
 
 // Chat
-@chat-bg: @ol-blue-gray-5;
-@chat-instructions-color: @ol-blue-gray-1;
+@chat-bg: @neutral-80;
+@chat-instructions-color: @neutral-20;
 @chat-message-color: #fff;
-@chat-message-date-color: @ol-blue-gray-2;
+@chat-message-date-color: @neutral-40;
 @chat-message-name-color: #fff;
 @chat-message-box-shadow: none;
 @chat-message-border-radius: @border-radius-large;
 @chat-message-padding: 5px 10px;
 @chat-message-weight: bold;
-@chat-new-message-bg: @ol-blue-gray-4;
-@chat-new-message-textarea-bg: @ol-blue-gray-1;
-@chat-new-message-textarea-color: @ol-blue-gray-6;
+@chat-new-message-bg: @neutral-70;
+@chat-new-message-textarea-bg: @neutral-20;
+@chat-new-message-textarea-color: @neutral-90;
 @chat-new-message-border-color: @editor-border-color;
 
 // PDF and logs
 @pdf-top-offset: @toolbar-small-height;
-@pdf-bg: @ol-blue-gray-1;
+@pdf-bg: @neutral-20;
 @pdfjs-bg: transparent;
 @pdf-page-shadow-color: rgba(0, 0, 0, 0.5);
-@logs-pane-bg: @ol-blue-gray-5;
+@logs-pane-bg: @neutral-80;
 @log-line-no-color: #fff;
-@log-hints-color: @ol-blue-gray-4;
+@log-hints-color: @neutral-70;
 
 // Tags
 @tag-border-radius: 9999px;
-@tag-color: @ol-blue-gray-4;
-@tag-bg-color: @ol-blue-gray-1;
-@tag-bg-hover-color: darken(@ol-blue-gray-1, 5%);
+@tag-color: @neutral-70;
+@tag-bg-color: @neutral-20;
+@tag-bg-hover-color: darken(@neutral-20, 5%);
 @tag-max-width: 150px;
 @tag-top-adjustment: 2px;
 @labels-font-size: 85%;
 
 // System messages
-@sys-msg-background: @ol-blue;
+@sys-msg-background: @blue;
 @sys-msg-color: #fff;
-@sys-msg-border: solid 1px lighten(@ol-blue, 10%);
+@sys-msg-border: solid 1px lighten(@blue, 10%);
 
 // Portals
 @black-alpha-strong: rgba(0, 0, 0, 0.8);
@@ -1095,20 +894,20 @@
 
 // v2 History
 @history-base-font-size: @font-size-small;
-@history-base-bg: @ol-blue-gray-1;
-@history-entry-label-bg-color: @ol-blue;
-@history-entry-pseudo-label-bg-color: @ol-green;
+@history-base-bg: @neutral-20;
+@history-entry-label-bg-color: @blue;
+@history-entry-pseudo-label-bg-color: @green;
 @history-entry-label-color: #fff;
 @history-entry-selected-label-bg-color: #fff;
-@history-entry-selected-label-color: @ol-blue;
-@history-entry-selected-pseudo-label-color: @ol-green;
-@history-entry-day-bg: @ol-blue-gray-1;
-@history-entry-day-color: @ol-blue-gray-3;
-@history-entry-selected-bg: @ol-green;
-@history-entry-handle-bg: darken(@ol-green, 10%);
+@history-entry-selected-label-color: @blue;
+@history-entry-selected-pseudo-label-color: @green;
+@history-entry-day-bg: @neutral-20;
+@history-entry-day-color: @neutral-60;
+@history-entry-selected-bg: @green;
+@history-entry-handle-bg: darken(@green, 10%);
 @history-entry-handle-height: 8px;
-@history-base-color: @ol-blue-gray-3;
-@history-highlight-color: @ol-type-color;
+@history-base-color: @neutral-60;
+@history-highlight-color: @content-secondary;
 @history-toolbar-bg-color: @editor-toolbar-bg;
 @history-toolbar-color: #fff;
 @history-file-badge-bg: rgba(255, 255, 255, 0.25);
@@ -1118,20 +917,20 @@
 @input-suggestion-v-offset: 4px;
 
 // Symbol Palette
-@symbol-palette-bg: @ol-blue-gray-4;
+@symbol-palette-bg: @neutral-70;
 @symbol-palette-color: #fff;
-@symbol-palette-header-background: @ol-blue-gray-5;
-@symbol-palette-item-bg: @ol-blue-gray-5;
+@symbol-palette-header-background: @neutral-80;
+@symbol-palette-item-bg: @neutral-80;
 @symbol-palette-item-color: #fff;
-@symbol-palette-selected-tab-bg: @ol-blue-gray-4;
+@symbol-palette-selected-tab-bg: @neutral-70;
 @symbol-palette-selected-tab-color: #fff;
-@symbol-palette-text-shadow-color: @ol-blue-gray-6;
+@symbol-palette-text-shadow-color: @neutral-90;
 
 // Galileo
-@galileo-bg: @ol-blue-gray-4;
+@galileo-bg: @neutral-70;
 @galileo-color: #fff;
-@galileo-header-background: @ol-blue-gray-5;
-@galileo-suggestion-background: @ol-blue-gray-3;
+@galileo-header-background: @neutral-80;
+@galileo-suggestion-background: @neutral-60;
 
 // Editor fonts
 @editor-font-lucida: 'Lucida Console', 'Source Code Pro', monospace;

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

@@ -0,0 +1,111 @@
+// ====== 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: #ebf6ea;
+@green-20: #bbdbb8;
+@green-30: #8cca86;
+@green-40: #5bb553;
+@green-50: #138a07;
+@green-60: #246b1e;
+@green-70: #1f5919;
+
+// 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;
+
+// == 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

@@ -1,4 +1,53 @@
 :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;
@@ -9,13 +58,16 @@
   --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;
 
+  // border
   --btn-border-radius-base: @btn-border-radius-base;
   --btn-default-bg: @btn-default-bg;
 
+  // text
   --line-height-base: @line-height-base;
 }

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

@@ -1,13 +1,3 @@
-// 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;