Merge pull request #15901 from overleaf/tm-design-system-updates-teardown

Design system updates test tear down and clean up

GitOrigin-RevId: 743423f7c31c0ba89093bba0107d7e6799e1c309

services/web/app/src/Features/StaticPages/HomeController.js

@@ -43,21 +43,6 @@ module.exports = HomeController = {
 
   async home(req, res) {
     if (Features.hasFeature('homepage') && homepageExists) {
-      let designSystemUpdatesAssignment = { variant: 'default' }
-      try {
-        designSystemUpdatesAssignment =
-          await SplitTestHandler.promises.getAssignment(
-            req,
-            res,
-            'design-system-updates'
-          )
-      } catch (error) {
-        logger.error(
-          { err: error },
-          'failed to get "design-system-updates" split test assignment'
-        )
-      }
-
       const websiteRedesignVariant =
         res.locals.splitTestVariants?.['website-redesign']
       const websiteRedesignActive =
@@ -77,7 +62,6 @@ module.exports = HomeController = {
         })
       } else {
         return res.render('external/home/v2', {
-          designSystemUpdatesVariant: designSystemUpdatesAssignment.variant,
           onboardingFlowVariant: onboardingFlowAssignment.variant,
           hideNewsletterCheckbox:
             onboardingFlowAssignment.variant === 'token-confirmation-odc',

services/web/app/src/Features/Subscription/RecurlyEventHandler.js

@@ -1,8 +1,6 @@
 const AnalyticsManager = require('../Analytics/AnalyticsManager')
 const SubscriptionEmailHandler = require('./SubscriptionEmailHandler')
 const { ObjectID } = require('mongodb')
-const SplitTestHandler = require('../SplitTests/SplitTestHandler')
-const logger = require('@overleaf/logger')
 
 const INVOICE_SUBSCRIPTION_LIMIT = 10
 
@@ -101,25 +99,11 @@ async function _sendSubscriptionUpdatedEvent(userId, eventData) {
 async function _sendSubscriptionCancelledEvent(userId, eventData) {
   const { planCode, quantity, state, isTrial, subscriptionId } =
     _getSubscriptionData(eventData)
-  let designSystemUpdatesAssignment = { variant: 'default' }
-  try {
-    designSystemUpdatesAssignment =
-      await SplitTestHandler.promises.getAssignmentForUser(
-        userId,
-        'design-system-updates'
-      )
-  } catch (error) {
-    logger.error(
-      { err: error },
-      'failed to get "design-system-updates" split test assignment'
-    )
-  }
   AnalyticsManager.recordEventForUser(userId, 'subscription-cancelled', {
     plan_code: planCode,
     quantity,
     is_trial: isTrial,
     subscriptionId,
-    'split-test-design-system-updates': designSystemUpdatesAssignment.variant,
   })
   AnalyticsManager.setUserPropertyForUser(userId, 'subscription-state', state)
   AnalyticsManager.setUserPropertyForUser(

services/web/app/src/Features/Subscription/SubscriptionController.js

@@ -207,28 +207,8 @@ async function userSubscriptionPage(req, res) {
     SubscriptionViewModelBuilder.buildPlansListForSubscriptionDash(
       personalSubscription?.plan
     )
-  let designSystemUpdatesAssignment = { variant: 'default' }
-  try {
-    designSystemUpdatesAssignment =
-      await SplitTestHandler.promises.getAssignment(
-        req,
-        res,
-        'design-system-updates'
-      )
-  } catch (error) {
-    logger.error(
-      { err: error },
-      'failed to get "design-system-updates" split test assignment'
-    )
-  }
 
-  AnalyticsManager.recordEventForSession(
-    req.session,
-    'subscription-page-view',
-    {
-      'split-test-design-system-updates': designSystemUpdatesAssignment.variant,
-    }
-  )
+  AnalyticsManager.recordEventForSession(req.session, 'subscription-page-view')
 
   const cancelButtonAssignment = await SplitTestHandler.promises.getAssignment(
     req,

services/web/app/src/Features/User/UserCreator.js

@@ -37,20 +37,6 @@ async function _addAffiliation(user, affiliationOptions) {
 }
 
 async function recordRegistrationEvent(user) {
-  let designSystemUpdatesAssignment = { variant: 'default' }
-  try {
-    designSystemUpdatesAssignment =
-      await SplitTestHandler.promises.getAssignmentForUser(
-        user._id,
-        'design-system-updates'
-      )
-  } catch (error) {
-    logger.error(
-      { err: error },
-      'failed to get "design-system-updates" split test assignment'
-    )
-  }
-
   const onboardingFlowAssignment =
     await SplitTestHandler.promises.getAssignmentForUser(
       user._id,
@@ -60,7 +46,6 @@ async function recordRegistrationEvent(user) {
   try {
     const segmentation = {
       'home-registration': 'default',
-      'split-test-design-system-updates': designSystemUpdatesAssignment.variant,
       'onboarding-flow': onboardingFlowAssignment.variant,
     }
     if (user.thirdPartyIdentifiers && user.thirdPartyIdentifiers.length > 0) {

services/web/app/src/infrastructure/ExpressLocals.js

@@ -81,10 +81,7 @@ function getWebpackAssets(entrypoint, section) {
 module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
   webRouter.use(
     expressify(
-      SplitTestMiddleware.loadAssignmentsInLocals([
-        'design-system-updates',
-        'website-redesign',
-      ])
+      SplitTestMiddleware.loadAssignmentsInLocals(['website-redesign'])
     )
   )
 
@@ -224,12 +221,7 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
     }
 
     res.locals.buildCssPath = function (themeModifier = '') {
-      if (
-        res.locals.splitTestVariants?.['design-system-updates'] === 'enabled'
-      ) {
-        themeModifier = `main-${themeModifier}`
-      }
-      return res.locals.buildStylesheetPath(`${themeModifier}style.css`)
+      return res.locals.buildStylesheetPath(`main-${themeModifier}style.css`)
     }
 
     res.locals.buildImgPath = function (imgFile) {

services/web/cypress/support/component.ts

@@ -1,5 +1,5 @@
 import 'cypress-plugin-tab'
-import '../../frontend/stylesheets/style.less'
+import '../../frontend/stylesheets/main-style.less'
 import './ct/window' // needs to be before i18n
 import '../../frontend/js/i18n'
 import './shared/commands'

services/web/frontend/js/features/subscription/components/dashboard/states/active/active.tsx

@@ -14,7 +14,6 @@ import { ChangePlanModal } from './change-plan/modals/change-plan-modal'
 import { ConfirmChangePlanModal } from './change-plan/modals/confirm-change-plan-modal'
 import { KeepCurrentPlanModal } from './change-plan/modals/keep-current-plan-modal'
 import { ChangeToGroupModal } from './change-plan/modals/change-to-group-modal'
-import { isSplitTestEnabled } from '../../../../../../../../frontend/js/utils/splitTestUtils'
 
 export function ActiveSubscription({
   subscription,
@@ -25,10 +24,6 @@ export function ActiveSubscription({
   const { recurlyLoadError, setModalIdShown, showCancellation } =
     useSubscriptionDashboardContext()
 
-  const isDesignSystemUpdatesEnabled = isSplitTestEnabled(
-    'design-system-updates'
-  )
-
   if (showCancellation) return <CancelSubscription />
 
   return (
@@ -125,7 +120,7 @@ export function ActiveSubscription({
         >
           {t('view_your_invoices')}
         </a>
-        {!recurlyLoadError && isDesignSystemUpdatesEnabled && (
+        {!recurlyLoadError && (
           <CancelSubscriptionButton className="btn btn-danger-ghost ms-1" />
         )}
       </p>
@@ -133,11 +128,6 @@ export function ActiveSubscription({
       {!recurlyLoadError && (
         <>
           <br />
-          {!isDesignSystemUpdatesEnabled && (
-            <p>
-              <CancelSubscriptionButton className="btn btn-danger" />
-            </p>
-          )}
           <p>
             <i>
               <SubscriptionRemainder subscription={subscription} />

services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-subscription-button.tsx

@@ -1,7 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import * as eventTracking from '../../../../../../infrastructure/event-tracking'
 import { useSubscriptionDashboardContext } from '../../../../context/subscription-dashboard-context'
-import { getSplitTestVariant } from '../../../../../../../../frontend/js/utils/splitTestUtils'
 
 export function CancelSubscriptionButton(
   props: React.ComponentProps<'button'>
@@ -10,15 +9,8 @@ export function CancelSubscriptionButton(
   const { recurlyLoadError, setShowCancellation } =
     useSubscriptionDashboardContext()
 
-  const designSystemUpdatesVariant = getSplitTestVariant(
-    'design-system-updates',
-    'default'
-  )
-
   function handleCancelSubscriptionClick() {
-    eventTracking.sendMB('subscription-page-cancel-button-click', {
-      'split-test-design-system-updates': designSystemUpdatesVariant,
-    })
+    eventTracking.sendMB('subscription-page-cancel-button-click', {})
     setShowCancellation(true)
   }
 

services/web/frontend/stylesheets/_ol_style_includes.less

@@ -1,13 +0,0 @@
-@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';
-@import 'components/lists.less';
-@import 'components/overbox.less';
-@import 'components/container.less';

services/web/frontend/stylesheets/_style_includes.less

@@ -1,118 +0,0 @@
-@import (less) '../fonts/font-awesome.css';
-
-@import 'core/mixins.less';
-
-// Reset
-@import 'core/normalize.less';
-@import 'core/print.less';
-
-// Vendor CSS
-@import (less) 'vendor/select/select.css';
-
-// Core CSS
-@import 'core/scaffolding.less';
-@import 'core/type.less';
-@import 'core/grid.less';
-@import 'core/accessibility.less';
-@import 'core/spacing.less';
-
-// Components
-@import 'components/tables.less';
-@import 'components/forms.less';
-@import 'components/badge.less';
-@import 'components/buttons.less';
-@import 'components/card.less';
-//@import "components/code.less";
-@import 'components/component-animations.less';
-@import 'components/dev-toolbar.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/breadcrumbs.less";
-//@import "components/pagination.less";
-@import 'components/notifications.less';
-@import 'components/pager.less';
-@import 'components/labels.less';
-@import 'components/loading-spinner';
-//@import "components/jumbotron.less";
-@import 'components/thumbnails.less';
-@import 'components/alerts.less';
-@import 'components/progress-bars.less';
-@import 'components/select.less';
-@import 'components/switch.less';
-@import 'components/switcher.less';
-// @import "components/media.less";
-@import 'components/list-group.less';
-// @import "components/panels.less";
-// @import "components/wells.less";
-@import 'components/close.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';
-@import 'components/split-menu.less';
-@import 'components/group-members.less';
-@import 'components/stepper.less';
-@import 'components/radio-chip.less';
-
-// Components w/ JavaScript
-@import 'components/modals.less';
-@import 'components/tooltip.less';
-@import 'components/popovers.less';
-@import 'components/carousel.less';
-@import 'components/daterange-picker';
-@import 'components/vertical-resizable-panes.less';
-
-// ngTagsInput
-@import 'components/tags-input.less';
-
-// Utility classes
-@import 'core/utilities.less';
-@import 'core/responsive-utilities.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/sprites.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';
-
-// module styles
-// TODO: find a way for modules to add styles dynamically
-@import 'modules/symbol-palette.less';
-@import 'modules/group-settings.less';
-@import 'modules/git-bridge-modal.less';
-@import 'modules/admin-panel.less';
-@import 'modules/overleaf-integration.less';

services/web/frontend/stylesheets/app/editor/compile-button.less

@@ -15,12 +15,8 @@
 
 // only apply for legacy editor
 .toolbar-pdf-right {
-  .detach-compile-button-container when (@is-new-css = false) {
-    margin-right: -5px;
-  }
-
   // because 2px border on :active state
-  .detach-compile-button-container when (@is-new-css = true) {
+  .detach-compile-button-container {
     margin-right: -3px;
   }
 }
@@ -32,16 +28,6 @@
   .animation(pdf-toolbar-stripes 2s linear infinite);
 }
 
-.detach-compile-button when (@is-new-css = false) {
-  &[disabled],
-  &[disabled].active,
-  &[disabled]:hover,
-  &[disabled]:focus {
-    background-color: mix(@btn-primary-bg, @toolbar-alt-bg-color, 65%);
-    .opacity(1);
-  }
-}
-
 .detach-compile-button {
   height: 28px;
   padding-top: 0;
@@ -56,7 +42,7 @@
   }
 }
 
-.detach-compile-button when (@is-new-css = true) {
+.detach-compile-button {
   border: none;
 }
 

services/web/frontend/stylesheets/app/editor/pdf.less

@@ -24,7 +24,7 @@
   flex: 1 1 100%;
 }
 
-.toolbar-pdf-left when (@is-new-css = true) {
+.toolbar-pdf-left {
   margin-left: 2px;
 }
 
@@ -236,19 +236,11 @@
       }
     }
 
-    i.fa-arrows-h when(@is-new-css = false) {
-      border-right: 2px solid white;
-      border-left: 2px solid white;
-    }
-    i.fa-arrows-h when(@is-new-css = true) {
+    i.fa-arrows-h {
       border-right: 2px solid @content-primary;
       border-left: 2px solid @content-primary;
     }
-    i.fa-arrows-v when(@is-new-css = false) {
-      border-top: 2px solid white;
-      border-bottom: 2px solid white;
-    }
-    i.fa-arrows-v when(@is-new-css = true) {
+    i.fa-arrows-v {
       border-top: 2px solid @content-primary;
       border-bottom: 2px solid @content-primary;
     }

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

@@ -183,20 +183,7 @@
   }
 }
 
-.hp-login-btn when(@is-new-css = false) {
-  .login-btn;
-  min-width: 220px;
-
-  background-color: @ol-blue-gray-3;
-
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: darken(@ol-blue-gray-3, 8%);
-  }
-}
-
-.hp-login-btn when(@is-new-css = true) {
+.hp-login-btn {
   .login-btn;
   min-width: 220px;
 }

services/web/frontend/stylesheets/app/project-list-react.less

@@ -960,11 +960,6 @@
     }
   }
 
-  .custom-picker when(@is-new-css = false) {
-    // to prevent the primary button from overlapping when disabled due to the opacity property
-    z-index: 100 !important;
-  }
-
   .popover-backdrop {
     position: fixed;
     top: 0;

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

@@ -2,15 +2,7 @@
   &:extend(.form-control);
 }
 
-.recurly-element-card when (@is-new-css = false) {
-  &:extend(.form-control);
-  padding: 4px 4px;
-  border: 1px #cccccc solid;
-  border-radius: 20px;
-  height: 50px;
-}
-
-.recurly-element-card when (@is-new-css = true) {
+.recurly-element-card {
   &:extend(.form-control);
   padding: 4px 4px;
   border: @input-border-size @input-border solid;

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

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

services/web/frontend/stylesheets/components/button-groups.less

@@ -120,15 +120,7 @@
 
 // The clickable button for toggling the menu
 // Remove the gradient and set the same inset shadow as the :active state
-.btn-group.open .dropdown-toggle when (@is-new-css = false) {
-  .box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
-
-  // Show no shadow for `.btn-link` since it has no other button styles.
-  &.btn-link {
-    .box-shadow(none);
-  }
-}
-.btn-group.open .dropdown-toggle when (@is-new-css = true) {
+.btn-group.open .dropdown-toggle {
   &.btn-secondary {
     background-color: @btn-secondary-hover-bg-color;
   }

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

@@ -5,54 +5,7 @@
 // Base styles
 // --------------------------------------------------
 
-.btn when(@is-new-css = false) {
-  display: inline-block;
-  margin-bottom: 0; // For input.btn
-  font-weight: @btn-font-weight;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
-  border: @btn-border-width solid transparent;
-  border-bottom: @btn-border-bottom-width solid transparent;
-  white-space: nowrap;
-  .button-size(
-    @padding-base-vertical; @padding-base-horizontal; @font-size-base;
-      @line-height-base; @btn-border-radius-base
-  );
-  .user-select(none);
-
-  &,
-  &:active,
-  &.active {
-    &:focus {
-      .tab-focus();
-    }
-  }
-
-  &:hover,
-  &:focus {
-    color: @btn-default-color;
-    text-decoration: none;
-  }
-
-  &:active,
-  &.active {
-    outline: 0;
-    background-image: none;
-    .box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
-  }
-
-  &.disabled,
-  &[disabled],
-  fieldset[disabled] & {
-    cursor: not-allowed;
-    pointer-events: none; // Future-proof disabling of clicks
-    .opacity(0.65);
-    .box-shadow(none);
-  }
-}
-.btn when(@is-new-css = true) {
+.btn {
   display: inline-block;
   margin-bottom: 0; // For input.btn
   font-weight: @btn-font-weight;
@@ -119,10 +72,7 @@
 .btn-default-outline {
   .button-outline-variant(@btn-default-bg);
 }
-.btn-primary when (@is-new-css = false) {
-  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
-}
-.btn-primary when (@is-new-css = true) {
+.btn-primary {
   .btn-borderless();
 }
 .btn-primary-on-primary-bg {
@@ -142,66 +92,30 @@
   .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
 }
 // Danger and error appear as red
-.btn-danger when(@is-new-css = false) {
-  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
-}
-.btn-danger when(@is-new-css = true) {
+.btn-danger {
   .btn-borderless(@white, @red, @red-60);
 }
 // Danger Ghost and error appear as light red with no border
-.btn-danger-ghost when (@is-new-css = false) {
-  .button-variant(@btn-danger-ghost-color; @btn-danger-ghost-bg; @btn-danger-ghost-border);
-  // hover for ghost acts different from typical variants, as it's default state has no bg
-  &:hover {
-    background-color: @red-10;
-  }
-}
-.btn-info-ghost when (@is-new-css = true) {
-  .btn-borderless(@blue-50, @btn-info-ghost-bg, @blue-10);
+.btn-danger-ghost {
+  .btn-borderless(@red-50, @btn-danger-ghost-bg, @red-10);
 }
 // Info Ghost appear as info blue with no border
-.btn-info-ghost when (@is-new-css = false) {
-  .button-variant(@btn-info-ghost-color; @btn-info-ghost-bg; @btn-info-ghost-border);
-  // hover for ghost acts different from typical variants, as it's default state has no bg
-  &:hover {
-    background-color: @blue-10;
-  }
+.btn-info-ghost {
+  .btn-borderless(@blue-50, @btn-info-ghost-bg, @blue-10);
 }
 // Inline button to fit text, without link styling.
 // TODO: generic class for other styles
-.btn-info-ghost-inline when (@is-new-css = true) {
+.btn-info-ghost-inline {
   .btn-borderless(@blue-50, @btn-info-ghost-bg, @blue-10);
   padding: 0 !important;
   font-size: inherit !important;
   vertical-align: inherit;
 }
-.btn-info-ghost-inline when (@is-new-css = false) {
-  .button-variant(@btn-info-ghost-color; @btn-info-ghost-bg; @btn-info-ghost-border);
-  // hover for ghost acts different from typical variants, as it's default state has no bg
-  &:hover {
-    background-color: @blue-10;
-  }
-  padding: 0 !important;
-  font-size: inherit !important;
-  vertical-align: inherit;
-}
-.btn-danger-ghost when (@is-new-css = true) {
-  .btn-borderless(@red-50, @btn-danger-ghost-bg, @red-10);
-}
 // btn-secondary
-.btn-secondary when(@is-new-css = false) {
-  &:not(.btn-secondary-info) {
-    .btn-default;
-  }
-}
-.btn-secondary when(@is-new-css = true) {
+.btn-secondary {
   .btn-bordered();
 }
-// btn-info for old and btn-secondary for new
-.btn-secondary-info when(@is-new-css = false) {
-  .btn-info;
-}
-.btn-secondary-info when(@is-new-css = true) {
+.btn-secondary-info {
   .btn-secondary;
 }
 
@@ -349,7 +263,7 @@ input[type='button'] {
   }
 }
 
-.login-btn when(@is-new-css = true) {
+.login-btn {
   .btn;
   .btn-secondary;
   position: relative;
@@ -357,14 +271,6 @@ input[type='button'] {
   padding-right: 0;
 }
 
-.login-btn when(@is-new-css = false) {
-  .btn;
-  .btn-default;
-  position: relative;
-  padding-left: 20px;
-  padding-right: 0;
-}
-
 .login-expand-more-btn {
   display: list-item;
 }

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

@@ -118,51 +118,7 @@ output {
 // input[type="tel"]
 // input[type="color"]
 
-.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)
-  padding: @padding-base-vertical @padding-base-horizontal;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-  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: @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');
-
-  // 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;
-    opacity: 1; // iOS fix for unreadable disabled content
-  }
-
-  // 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;
-  }
-}
-.form-control when (@is-new-css = true) {
+.form-control {
   display: block;
   width: 100%;
   height: @input-height-base;
@@ -362,30 +318,13 @@ input[type='checkbox'],
 }
 
 // Feedback states
-.has-success when(@is-new-css = false) {
-  .form-control-validation(
-    @state-success-text; @state-success-text; @state-success-bg
-  );
-}
-.has-warning when(@is-new-css = false) {
-  .form-control-validation(
-    @state-warning-text; @state-warning-text; @state-warning-bg
-  );
-}
-.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) {
+.has-success {
   .form-control-validation(@brand-success);
 }
-.has-warning when(@is-new-css = true) {
+.has-warning {
   .form-control-validation(@brand-warning);
 }
-.has-error when(@is-new-css = true) {
+.has-error {
   .form-control-validation(@brand-danger);
 }
 

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

@@ -36,7 +36,7 @@
   }
 }
 
-.label when(@is-new-css = true) {
+.label {
   padding: 0.3em 0.6em;
 }
 

services/web/frontend/stylesheets/components/split-menu.less

@@ -47,26 +47,17 @@
       border-right: 1px solid fade(@neutral-90, 16%);
     }
 
-    // on new css, btn-secondary already has a border
-    &.btn-secondary when (@is-new-css = false) {
-      border-right: 1px solid fade(@ol-blue-gray-6, 16%);
-    }
-
     &.btn-danger {
       border-right: 1px solid fade(@neutral-90, 16%);
     }
 
-    &[disabled] when (@is-new-css = false) {
-      opacity: 1;
-    }
-
     &.no-left-radius {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
   }
 
-  .split-menu-button when (@is-new-css = true) {
+  .split-menu-button {
     // workaround for for the blue 2x border on the new css
     // if z-index rule is not added, the border will overlap under the `split-menu-dropdown-toggle` since margin between both component is only 1px
     z-index: 1;
@@ -87,7 +78,7 @@
       // on new css, btn-secondary has a border
       // since the border between both buttons already been defined in the `split-menu-button`
       // we will remove the rule from the dropdown toggle
-      &.btn-secondary when (@is-new-css = true) {
+      &.btn-secondary {
         border-left: none;
       }
     }

services/web/frontend/stylesheets/components/tags-input.less

@@ -31,17 +31,7 @@
   display: flex;
   flex-wrap: wrap;
 }
-.tags-input .tags when(@is-new-css = false) {
-  padding: 3px;
-  border-radius: 3px; /* overriding .form-control */
-}
-.tags-input .tags:focus-within when(@is-new-css = false) {
-  outline: none;
-  -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
-  -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
-  box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
-}
-.tags-input .tags:focus-within when(@is-new-css = true) {
+.tags-input .tags:focus-within {
   &:extend(.input-focus-style);
 }
 .tags-input .tags .tag-list {
@@ -83,12 +73,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.tags-input .tags .input when(@is-new-css = false) {
-  margin: 2px;
-  padding: 0;
-  padding-left: 5px;
-}
-.tags-input .tags .input when(@is-new-css = true) {
+.tags-input .tags .input {
   .placeholder();
 }
 .tags-input .tags .input.invalid-tag {

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

@@ -27,14 +27,7 @@
 }
 
 // WebKit-style focus
-.tab-focus() when (@is-new-css = false) {
-  // Default
-  outline: thin dotted;
-  // WebKit
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-.tab-focus() when (@is-new-css = true) {
+.tab-focus() {
   outline: none;
 }
 
@@ -851,16 +844,7 @@
 
 // Button sizes
 // -------------------------
-.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius)
-  when(@is-new-css = false) {
-  // Remove 1px to make up for the extra px of border-bottom we've added
-  padding: @padding-vertical - 1 @padding-horizontal @padding-vertical;
-  font-size: @font-size;
-  line-height: @line-height;
-  border-radius: @border-radius;
-}
-.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius)
-  when(@is-new-css = true) {
+.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
   padding: @padding-vertical - @border-size @padding-horizontal;
   font-size: @font-size;
   line-height: @line-height;
@@ -1181,43 +1165,7 @@
 // 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)
-  when(@is-new-css = false) {
-  // Color the label and help text
-  .help-block,
-  .control-label,
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline {
-    color: @text-color;
-  }
-  // Set the border and box shadow on specific inputs to match
-  .form-control {
-    border-color: @border-color;
-    .box-shadow(
-      inset 0 1px 1px rgba(0, 0, 0, 0.075)
-    ); // Redeclare so transitions work
-    &:focus {
-      border-color: darken(@border-color, 10%);
-      @shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-        0 0 6px lighten(@border-color, 20%);
-      .box-shadow(@shadow);
-    }
-  }
-  // Set validation states also for addons
-  .input-group-addon {
-    color: @text-color;
-    border-color: @border-color;
-    background-color: @background-color;
-  }
-  // Optional feedback icon
-  .form-control-feedback {
-    color: @text-color;
-  }
-}
-
-.form-control-validation(@color) when(@is-new-css = true) {
+.form-control-validation(@color) {
   color: @color;
 
   // Color the label and help text
@@ -1257,15 +1205,6 @@
 // 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) when (@is-new-css = false) {
-  @color-rgba: rgba(red(@color), green(@color), blue(@color), 0.6);
-  &:focus {
-    border-color: @color;
-    outline: 0;
-    .box-shadow(~'inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}');
-  }
-}
-
 .input-focus-style {
   // need to define as class for recurly UI
   border-color: @input-border-focus;
@@ -1273,7 +1212,7 @@
   .box-shadow-button-input();
 }
 
-.form-control-focus() when (@is-new-css = true) {
+.form-control-focus() {
   &:focus {
     &:extend(.input-focus-style);
   }

services/web/frontend/stylesheets/core/ol-ieee-variables.less

@@ -1,52 +0,0 @@
-@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%);
-
-@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;

services/web/frontend/stylesheets/core/ol-light-variables.less

@@ -1,141 +0,0 @@
-// Styleguide colors
-@ol-green: #138a07;
-@ol-dark-green: #004a0e;
-@ol-blue: #3e70bb;
-@ol-dark-blue: #2857a1;
-@ol-red: #c9453e;
-@ol-dark-red: #a6312b;
-
-@ol-type-color: @ol-blue-gray-3;
-
-// Sidebar
-@sidebar-bg: #fff;
-@sidebar-color: @ol-blue-gray-2;
-@sidebar-active-bg: @ol-green;
-@sidebar-active-color: #fff;
-@sidebar-hover-bg: @ol-blue-gray-1;
-@sidebar-active-font-weight: normal;
-@sidebar-hover-text-decoration: none;
-
-@v2-dash-pane-bg: @ol-blue-gray-1;
-@v2-dash-pane-link-color: @ol-blue;
-@v2-dash-pane-toggle-color: @ol-blue-gray-3;
-@v2-dash-pane-btn-bg: @ol-blue-gray-5;
-@v2-dash-pane-btn-hover-bg: @ol-blue-gray-6;
-@v2-dash-pane-color: @ol-blue-gray-3;
-
-@progress-bar-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-@progress-bg: @ol-blue-gray-0;
-
-@input-border: @ol-blue-gray-1;
-
-// Editor file-tree
-@file-tree-bg: #fff;
-@file-tree-line-height: 2.05;
-@file-tree-item-color: @ol-blue-gray-3;
-@file-tree-item-focus-color: @file-tree-item-color;
-@file-tree-item-selected-color: #fff;
-@file-tree-item-input-color: @ol-blue-gray-2;
-@file-tree-item-toggle-color: @ol-blue-gray-2;
-@file-tree-item-icon-color: @ol-blue-gray-2;
-@file-tree-item-folder-color: @ol-blue-gray-2;
-@file-tree-item-hover-bg: @ol-blue-gray-1;
-@file-tree-item-selected-bg: @ol-green;
-@file-tree-multiselect-bg: @ol-blue;
-@file-tree-multiselect-hover-bg: @ol-dark-blue;
-@file-tree-droppable-bg-color: @ol-blue-gray-2;
-
-@content-alt-bg-color: @ol-blue-gray-0;
-
-// File outline
-@outline-line-guide-color: @ol-blue-gray-1;
-@outline-header-hover-bg: @file-tree-item-hover-bg;
-@outline-highlight-bg: mix(@file-tree-bg, @ol-blue-gray-1);
-
-@vertical-resizable-resizer-bg: @ol-blue-gray-1;
-@vertical-resizable-resizer-hover-bg: @file-tree-item-hover-bg;
-
-// Editor resizers
-@editor-resizer-bg-color: @ol-blue-gray-1;
-@editor-resizer-bg-color-dragging: @ol-blue-gray-1;
-@editor-toggler-bg-color: @ol-blue-gray-2;
-@editor-toggler-hover-bg-color: @ol-green;
-@synctex-controls-z-index: 6;
-@synctex-controls-padding: 0;
-@editor-border-color: @ol-blue-gray-1;
-
-@toolbar-border-color: @ol-blue-gray-1;
-@toolbar-alt-bg-color: #fff;
-@editor-toolbar-bg: @toolbar-alt-bg-color;
-
-@toolbar-header-bg-color: #fff;
-@toolbar-header-btn-border-color: @ol-blue-gray-1;
-@toolbar-btn-color: @ol-blue-gray-3;
-@toolbar-btn-hover-color: @ol-blue-gray-3;
-@toolbar-btn-hover-bg-color: @ol-blue-gray-0;
-@toolbar-icon-btn-color: @ol-blue-gray-3;
-@toolbar-icon-btn-hover-color: @ol-blue-gray-3;
-@editor-header-logo-background: url(../../../public/img/ol-brand/overleaf-o.svg)
-  center / contain no-repeat;
-@project-name-color: @ol-blue-gray-3;
-@project-rename-link-color: @ol-blue-gray-3;
-@project-rename-link-color-hover: @ol-blue-gray-4;
-@pdf-bg: @ol-blue-gray-0;
-@logs-pane-bg: @ol-blue-gray-1;
-
-// Navbar
-@navbar-default-bg: #fff;
-@navbar-default-border: @ol-blue-gray-1;
-@navbar-default-link-bg: @ol-green;
-@navbar-default-link-color: #fff;
-@navbar-default-link-border-color: transparent;
-@navbar-default-link-hover-bg: @ol-green;
-@navbar-default-link-active-bg: @ol-green;
-@navbar-default-link-hover-color: @ol-green;
-
-@navbar-title-color: @ol-blue-gray-1;
-@navbar-title-color-hover: @ol-blue-gray-2;
-@navbar-default-color: @ol-blue-gray-3;
-@navbar-brand-image-url: url(../../../public/img/ol-brand/overleaf.svg);
-
-@navbar-subdued-color: @ol-blue-gray-3;
-@navbar-subdued-hover-bg: @ol-blue-gray-1;
-@navbar-subdued-hover-color: @ol-blue-gray-3;
-
-// v2 History
-@history-toolbar-color: @ol-blue-gray-3;
-@history-base-bg: @ol-blue-gray-0;
-@history-file-badge-bg: rgba(0, 0, 0, 0.25);
-@history-file-badge-color: #fff;
-
-// Formatting buttons
-@formatting-btn-color: @toolbar-icon-btn-color;
-@formatting-btn-bg: transparent;
-@formatting-btn-border: @ol-blue-gray-1;
-@formatting-menu-bg: #fff;
-
-// Chat
-@chat-bg: #fff;
-@chat-instructions-color: @ol-blue-gray-3;
-@chat-message-color: #fff;
-@chat-message-name-color: @ol-blue-gray-3;
-@chat-message-date-color: @ol-blue-gray-3;
-@chat-new-message-bg: @ol-blue-gray-0;
-@chat-new-message-textarea-bg: #fff;
-@chat-new-message-textarea-color: @ol-blue-gray-6;
-@chat-new-message-border-color: @ol-blue-gray-1;
-
-// Symbol Palette
-@symbol-palette-bg: #fff;
-@symbol-palette-color: @ol-blue-gray-3;
-@symbol-palette-header-background: @ol-blue-gray-1;
-@symbol-palette-item-bg: @ol-blue-gray-1;
-@symbol-palette-item-color: @ol-blue-gray-3;
-@symbol-palette-selected-tab-bg: #fff;
-@symbol-palette-selected-tab-color: @ol-blue;
-@symbol-palette-text-shadow-color: @ol-blue-gray-1;
-
-// 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/ieee-style.less

@@ -1,42 +0,0 @@
-@import 'style.less';
-@import 'core/ol-ieee-variables.less';
-
-@is-overleaf-light: false;
-
-@ieee-wedge: 30px;
-
-body > .portal-ieee {
-  padding-top: @header-height;
-}
-
-.portal-ieee {
-  .ieee-header {
-    background-color: @ieee-blue;
-    margin-bottom: @margin-xl;
-    padding-bottom: @padding-sm;
-    padding-top: @padding-sm;
-    h1 {
-      margin: 0;
-    }
-    .ieee-logo {
-      width: @navbar-brand-width;
-    }
-  }
-  .ieee-subheader {
-    background-color: @ieee-blue;
-    color: #ffffff;
-    line-height: 1;
-    padding: @padding-md @ieee-wedge;
-    position: relative;
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      border-style: solid;
-      left: -1px;
-      top: -1px;
-      border-color: @content-alt-bg-color transparent;
-      border-width: @ieee-wedge @ieee-wedge 0 0;
-    }
-  }
-}

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

@@ -1,4 +0,0 @@
-@import 'style.less';
-@import 'core/ol-light-variables.less';
-
-@is-overleaf-light: true;

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

@@ -6,7 +6,6 @@
 @import (less) '../fonts/material-symbols.css';
 
 @is-overleaf-light: false;
-@is-new-css: true;
 
 // Core variables and mixins
 @import 'variables/all.less';

services/web/frontend/stylesheets/style.less

@@ -1,32 +0,0 @@
-@import (less) '../fonts/lato.css';
-@import (less) '../fonts/merriweather.css';
-@import (less) '../fonts/source-code-pro.css';
-@import (less) '../fonts/stix-two-math.css';
-@import (less) '../fonts/noto-serif.css';
-@import (less) '../fonts/material-symbols.css';
-
-@is-overleaf-light: false;
-@is-new-css: false;
-
-// Core variables and mixins
-@import 'core/variables.less';
-@import 'core/css-variables.less';
-@import 'core/page.less';
-@import 'app/ol-style-guide.less';
-@import '_style_includes.less';
-@import '_ol_style_includes.less';
-@import 'components/embed-responsive.less';
-@import 'components/icons.less';
-@import 'components/images.less';
-@import 'components/navs-ol.less';
-@import 'components/pagination.less';
-@import 'components/tabs.less';
-@import 'components/input-switch.less';
-
-// Pages
-@import 'app/about.less';
-@import 'app/blog-posts.less';
-@import 'app/cms-page.less';
-@import 'app/content_page.less';
-@import 'app/plans-ol.less';
-@import 'app/portals.less';

services/web/test/unit/src/Subscription/RecurlyEventHandlerTests.js

@@ -172,11 +172,6 @@ describe('RecurlyEventHandler', function () {
       'canceled_subscription_notification',
       this.eventData
     )
-    sinon.assert.calledWith(
-      this.SplitTestHandler.promises.getAssignmentForUser,
-      this.userId,
-      'design-system-updates'
-    )
     sinon.assert.calledWith(
       this.AnalyticsManager.recordEventForUser,
       this.userId,
@@ -186,7 +181,6 @@ describe('RecurlyEventHandler', function () {
         quantity: 1,
         is_trial: true,
         subscriptionId: this.eventData.subscription.uuid,
-        'split-test-design-system-updates': 'default',
       }
     )
     sinon.assert.calledWith(

services/web/webpack.config.js

@@ -18,9 +18,6 @@ const entryPoints = {
   ide: './frontend/js/ide.js',
   'ide-detached': './frontend/js/ide-detached.js',
   marketing: './frontend/js/marketing.js',
-  style: './frontend/stylesheets/style.less',
-  'ieee-style': './frontend/stylesheets/ieee-style.less',
-  'light-style': './frontend/stylesheets/light-style.less',
   'main-style': './frontend/stylesheets/main-style.less',
   'main-ieee-style': './frontend/stylesheets/main-ieee-style.less',
   'main-light-style': './frontend/stylesheets/main-light-style.less',