Merge branch 'use-gitlab-ui-utility-classes-for-billing' into 'master'

Use gitlab-ui settings instead for billing page

See merge request gitlab-org/gitlab!87116

app/assets/stylesheets/utilities.scss

@@ -367,29 +367,3 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709
   -webkit-backdrop-filter: blur(2px); // still required by Safari
 }
-/*
- * The below style will be moved to @gitlab/ui by
- * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1792
- */
-.gl-text-purple-800 {
-  color: $purple-800;
-}
-
-.gl-bg-theme-indigo-800 {
-  background-color: $theme-indigo-800;
-}
-
-.gl-border-indigo-700 {
-  border-color: $theme-indigo-700;
-}
-
-.gl-border-gray-75 {
-  border-color: $gl-text-color-quaternary;
-}
-
-.gl-min-h-8 {
-  min-height: $gl-spacing-scale-8;
-}
-
-/* End gitlab-ui#1751 */
-

ee/app/components/billing/plan_component.rb

@@ -130,9 +130,9 @@ def plans_data
           }
         },
         'premium' => {
-          "card_border_classes": "gl-border-indigo-700",
+          "card_border_classes": "gl-border-purple-700",
           "header_text": s_("BillingPlans|Recommended"),
-          "header_classes": "gl-line-height-normal gl-font-weight-bold gl-py-4 gl-h-8 gl-bg-theme-indigo-800 " \
+          "header_classes": "gl-line-height-normal gl-font-weight-bold gl-py-4 gl-h-8 gl-bg-purple-800 " \
                             "gl-text-white",
           "elevator_pitch": s_("BillingPlans|Enhance team productivity and collaboration"),
           "features": [

ee/app/views/groups/billings/_free_plan_billing_index.html.haml

@@ -16,7 +16,7 @@
         new_trial_path,
         class: ["gl-mb-6 btn gl-button btn-confirm-secondary"],
         data: { track_action: 'click_button', track_label: 'start_trial', track_experiment: :promote_premium_billing_page }
-  .billing-plan-divider.gl-m-auto.gl-border-b-solid.gl-border-1.gl-border-gray-75.gl-mb-7
+  .billing-plan-divider.gl-m-auto.gl-border-b.gl-mb-7
   - image_alt = s_('InProductMarketing|Team members collaborating')
   = image_tag 'marketing/free-trial-team-members.png', alt: image_alt, title: image_alt, width: 280, height: 125, class: 'gl-mb-6'
   .gl-font-size-h1.gl-font-weight-bold.gl-line-height-24.gl-mb-4

ee/spec/components/billing/plan_component_spec.rb

@@ -51,7 +51,7 @@
     it 'has header for the current plan' do
       expect(rendered_component).to have_content('Recommended')
-      expect(rendered_component).to have_selector('.gl-bg-theme-indigo-800')
+      expect(rendered_component).to have_selector('.gl-bg-purple-800')
     end
     it 'has pricing info' do