From c021b48824a0b0e35c1b02f33b0ce0f249f019cf Mon Sep 17 00:00:00 2001 From: Jessica Lawshe Date: Tue, 1 Nov 2022 08:43:57 -0500 Subject: [PATCH] Merge pull request #10073 from overleaf/jel-cleanup-imports [web] Design system updates GitOrigin-RevId: d5a9d8736083b076474e2a43f0200a6419f24a92 --- .../web/frontend/stylesheets/app/recurly.less | 14 +- .../stylesheets/app/subscription.less | 4 + .../stylesheets/components/divider.less | 2 +- .../stylesheets/components/forms.less | 64 ++- .../web/frontend/stylesheets/core/mixins.less | 45 +- .../frontend/stylesheets/core/variables.less | 2 + .../web/frontend/stylesheets/main-style.less | 115 +++- services/web/frontend/stylesheets/style.less | 1 + .../frontend/stylesheets/variables/all.less | 491 ++++++------------ .../stylesheets/variables/colors.less | 111 ++++ .../stylesheets/variables/css-variables.less | 52 ++ .../stylesheets/variables/themes/light.less | 10 - 12 files changed, 544 insertions(+), 367 deletions(-) create mode 100644 services/web/frontend/stylesheets/variables/colors.less diff --git a/services/web/frontend/stylesheets/app/recurly.less b/services/web/frontend/stylesheets/app/recurly.less index 9f02469a9a..0fc282e2c5 100644 --- a/services/web/frontend/stylesheets/app/recurly.less +++ b/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; diff --git a/services/web/frontend/stylesheets/app/subscription.less b/services/web/frontend/stylesheets/app/subscription.less index c35968a973..0d408c4f41 100644 --- a/services/web/frontend/stylesheets/app/subscription.less +++ b/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); +} diff --git a/services/web/frontend/stylesheets/components/divider.less b/services/web/frontend/stylesheets/components/divider.less index d005f06e4a..7b2755c28e 100644 --- a/services/web/frontend/stylesheets/components/divider.less +++ b/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; } diff --git a/services/web/frontend/stylesheets/components/forms.less b/services/web/frontend/stylesheets/components/forms.less index 07cf7767ef..cbed72f5fa 100755 --- a/services/web/frontend/stylesheets/components/forms.less +++ b/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) { diff --git a/services/web/frontend/stylesheets/core/mixins.less b/services/web/frontend/stylesheets/core/mixins.less index 0b10d24160..11f0ab2f44 100755 --- a/services/web/frontend/stylesheets/core/mixins.less +++ b/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 diff --git a/services/web/frontend/stylesheets/core/variables.less b/services/web/frontend/stylesheets/core/variables.less index e61242ec83..4d16729e5f 100644 --- a/services/web/frontend/stylesheets/core/variables.less +++ b/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; diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less index de080b2ab4..6cd9bff8b3 100644 --- a/services/web/frontend/stylesheets/main-style.less +++ b/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'; diff --git a/services/web/frontend/stylesheets/style.less b/services/web/frontend/stylesheets/style.less index efdd9117be..090e08f407 100644 --- a/services/web/frontend/stylesheets/style.less +++ b/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'; diff --git a/services/web/frontend/stylesheets/variables/all.less b/services/web/frontend/stylesheets/variables/all.less index e61242ec83..5515e13db1 100644 --- a/services/web/frontend/stylesheets/variables/all.less +++ b/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-bg: #fff; //** Global text color on ``. -@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; -@btn-switch-color: @ol-blue-gray-4; -@btn-switch-hover-color: darken(@ol-blue-gray-4, 8%); +//** Horizontal line color. +@hr-border: @neutral-20; + +@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 @@ //** `` background color @input-bg: #fff; //** `` background color -@input-bg-disabled: @gray-lighter; +@input-bg-disabled: @color-disabled; //** Text color for ``s -@input-color: @ol-blue-gray-3; +@input-color: @neutral-90; //** `` border color -@input-border: #ccc; +@input-border: @neutral-40; //** `` 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; diff --git a/services/web/frontend/stylesheets/variables/colors.less b/services/web/frontend/stylesheets/variables/colors.less new file mode 100644 index 0000000000..a8f1e706bb --- /dev/null +++ b/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; diff --git a/services/web/frontend/stylesheets/variables/css-variables.less b/services/web/frontend/stylesheets/variables/css-variables.less index 90832002b5..b61291d672 100644 --- a/services/web/frontend/stylesheets/variables/css-variables.less +++ b/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; } diff --git a/services/web/frontend/stylesheets/variables/themes/light.less b/services/web/frontend/stylesheets/variables/themes/light.less index 60cef4da97..f8f6f53a3d 100644 --- a/services/web/frontend/stylesheets/variables/themes/light.less +++ b/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;