Add latest changes from gitlab-org/gitlab@master

18 files changed, 130 insertions, 463 deletions

diff --git a/.gitlab/merge_request_templates/Deprecations.md b/.gitlab/merge_request_templates/Deprecations.md
index c1321dd9f96..0f6cdf6a1c3 100644
--- a/.gitlab/merge_request_templates/Deprecations.md
+++ b/.gitlab/merge_request_templates/Deprecations.md
@@ -11,7 +11,7 @@ If there is no relevant deprecation issue, hit pause and:
 
 Deprecation announcements can and should be created and merged into Docs at any time, to optimize user awareness and planning. We encourage confirmed deprecations to be merged as soon as the required reviews are complete, even if weeks ahead of the target milestone's release post. For the announcement to be included in a specific release post and that release's documentation packages, this MR must be reviewed/merged per the due dates below:
 
-**By the 10th**: Assign this MR to these team members as Reviewer and for Approval (optional unless noted as required):
+**10 days (Monday) before the Release Date**: Assign this MR to these team members as Reviewer and for Approval (optional unless noted as required):
 
 - Product Marketing: `@PMM`
 - Product Designer(s): `@ProductDesigners`
@@ -19,9 +19,9 @@ Deprecation announcements can and should be created and merged into Docs at any
 - Engineering Manager: `@EM` - Required
 - Technical writer: `@TW` - Required
 
-**By 11:59 AM PDT 15th**: EM/PM assigns this MR to the TW reviewer for final review and merge: `@EM/PM`
+**By 11:59 AM PDT 8 days (Wednesday) before the Release Date**: EM/PM assigns this MR to the TW reviewer for final review and merge: `@EM/PM`
 
-**By 11:59 PM PDT 17th**: TW Reviewer updates Docs by merging this MR to `master`: `@TW`
+**By 11:59 PM PDT 6 days (Friday) before the Release Date**: TW Reviewer updates Docs by merging this MR to `master`: `@TW`
 
 ---
 
diff --git a/Gemfile b/Gemfile
index 444762c5ecf..29bc726e54d 100644
--- a/Gemfile
+++ b/Gemfile
@@ -638,3 +638,5 @@ gem 'net-protocol', '~> 0.1.3' # rubocop:todo Gemfile/MissingFeatureCategory
 gem 'net-http', '= 0.1.1' # rubocop:todo Gemfile/MissingFeatureCategory
 
 gem 'duo_api', '~> 1.3' # rubocop:todo Gemfile/MissingFeatureCategory
+
+gem 'gitlab-sdk', feature_category: :application_instrumentation
diff --git a/Gemfile.checksum b/Gemfile.checksum
index 97a2f334c35..7e85da44f7b 100644
--- a/Gemfile.checksum
+++ b/Gemfile.checksum
@@ -218,6 +218,7 @@
 {"name":"gitlab-mail_room","version":"0.0.23","platform":"ruby","checksum":"23564fa4dab24ec5011d4c64a801fc0228301d5b0f046a26a1d8e96e36c19997"},
 {"name":"gitlab-markup","version":"1.9.0","platform":"ruby","checksum":"7eda045a08ec2d110084252fa13a8c9eac8bdac0e302035ca7db4b82bcbd7ed4"},
 {"name":"gitlab-net-dns","version":"0.9.2","platform":"ruby","checksum":"f726d978479d43810819f12a45c0906d775a07e34df111bbe693fffbbef3059d"},
+{"name":"gitlab-sdk","version":"0.2.3","platform":"ruby","checksum":"e891278a20860ab1f861312813dce5f2e73081bcc10def2ae4ee138b10a2d0d6"},
 {"name":"gitlab-styles","version":"11.0.0","platform":"ruby","checksum":"0dd8ec066ce9955ac51d3616c6bfded30f75bb526f39ff392ece6f43d5b9406b"},
 {"name":"gitlab_chronic_duration","version":"0.12.0","platform":"ruby","checksum":"0d766944d415b5c831f176871ee8625783fc0c5bfbef2d79a3a616f207ffc16d"},
 {"name":"gitlab_omniauth-ldap","version":"2.2.0","platform":"ruby","checksum":"bb4d20acb3b123ed654a8f6a47d3fac673ece7ed0b6992edb92dca14bad2838c"},
diff --git a/Gemfile.lock b/Gemfile.lock
index a9e524b52ff..3fd813c7805 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -703,6 +703,10 @@ GEM
       oauth2 (>= 1.4.4, < 3)
     gitlab-markup (1.9.0)
     gitlab-net-dns (0.9.2)
+    gitlab-sdk (0.2.3)
+      activesupport (>= 5.2.0)
+      rake (~> 13.0)
+      snowplow-tracker (~> 0.8.0)
     gitlab-styles (11.0.0)
       rubocop (~> 1.57.1)
       rubocop-graphql (~> 0.18)
@@ -1880,6 +1884,7 @@ DEPENDENCIES
   gitlab-rspec!
   gitlab-safe_request_store!
   gitlab-schema-validation!
+  gitlab-sdk
   gitlab-secret_detection!
   gitlab-sidekiq-fetcher!
   gitlab-styles (~> 11.0.0)
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 21c252038af..aa5bd4cf098 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -582,7 +582,7 @@ See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
 
 // used in the Markdown rendering of labels
 .scoped-label-tooltip-title {
-  color: var(--indigo-300, $indigo-300);
+  color: var(--theme-indigo-300, $theme-indigo-300);
 }
 
 .gl-label-scoped {
diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss
index 36f1b1f2903..0e76d651b70 100644
--- a/app/assets/stylesheets/framework/feature_highlight.scss
+++ b/app/assets/stylesheets/framework/feature_highlight.scss
@@ -24,7 +24,7 @@
 
 
 .feature-highlight-illustration {
-  background-color: $indigo-50;
+  background-color: $theme-indigo-50;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom: 1px solid darken($gray-normal, 8%);
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 3770a9b68a0..1964487c5e0 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -1,3 +1,5 @@
+@import '@gitlab/ui/dist/tokens/scss/tokens';
+
 /*
  * Layout
  */
@@ -91,79 +93,6 @@ $darken-border-dashed-factor: 25% !default;
 $purple: #6d49cb !default;
 $purple-light: #ede8fb !default;
 
-$green-50: #ecf4ee !default;
-$green-100: #c3e6cd !default;
-$green-200: #91d4a8 !default;
-$green-300: #52b87a !default;
-$green-400: #2da160 !default;
-$green-500: #108548 !default;
-$green-600: #217645 !default;
-$green-700: #24663b !default;
-$green-800: #0d532a !default;
-$green-900: #0a4020 !default;
-$green-950: #072b15 !default;
-
-$blue-50: #e9f3fc !default;
-$blue-100: #cbe2f9 !default;
-$blue-200: #9dc7f1 !default;
-$blue-300: #63a6e9 !default;
-$blue-400: #428fdc !default;
-$blue-500: #1f75cb !default;
-$blue-600: #1068bf !default;
-$blue-700: #0b5cad !default;
-$blue-800: #064787 !default;
-$blue-900: #033464 !default;
-$blue-950: #002850 !default;
-
-$orange-50: #fdf1dd !default;
-$orange-100: #f5d9a8 !default;
-$orange-200: #e9be74 !default;
-$orange-300: #d99530 !default;
-$orange-400: #c17d10 !default;
-$orange-500: #ab6100 !default;
-$orange-600: #9e5400 !default;
-$orange-700: #8f4700 !default;
-$orange-800: #703800 !default;
-$orange-900: #5c2900 !default;
-$orange-950: #421f00 !default;
-
-$red-50: #fcf1ef !default;
-$red-100: #fdd4cd !default;
-$red-200: #fcb5aa !default;
-$red-300: #f57f6c !default;
-$red-400: #ec5941 !default;
-$red-500: #dd2b0e !default;
-$red-600: #c91c00 !default;
-$red-700: #ae1800 !default;
-$red-800: #8d1300 !default;
-$red-900: #660e00 !default;
-$red-950: #4d0a00 !default;
-
-$purple-50: #f4f0ff !default;
-$purple-100: #e1d8f9 !default;
-$purple-200: #cbbbf2 !default;
-$purple-300: #ac93e6 !default;
-$purple-400: #9475db !default;
-$purple-500: #7b58cf !default;
-$purple-600: #694cc0 !default;
-$purple-700: #5943b6 !default;
-$purple-800: #453894 !default;
-$purple-900: #2f2a6b !default;
-$purple-950: #232150 !default;
-
-$gray-10: #fbfafd !default;
-$gray-50: #ececef !default;
-$gray-100: #dcdcde !default;
-$gray-200: #bfbfc3 !default;
-$gray-300: #a4a3a8 !default;
-$gray-400: #89888d !default;
-$gray-500: #737278 !default;
-$gray-600: #626168 !default;
-$gray-700: #535158 !default;
-$gray-800: #434248 !default;
-$gray-900: #333238 !default;
-$gray-950: #1f1e24 !default;
-
 $gray-lightest: lighten($gray-10, 1) !default;
 $gray-light: $gray-10 !default;
 $gray-lighter: lighten($gray-50, 4) !default;
@@ -179,196 +108,14 @@ $t-gray-a-08: rgba($gray-950, 0.08) !default;
 $t-gray-a-16: rgba($gray-950, 0.16) !default;
 $t-gray-a-24: rgba($gray-950, 0.24) !default;
 
-$white: #fff !default;
 $white-normal: $gray-50 !default;
 $white-dark: darken($gray-50, 2) !default;
 
-$black: #000 !default;
 $black-transparent: $t-gray-a-24 !default;
 $almost-black: $gray-950 !default;
 
-$greens: (
-  '50': $green-50,
-  '100': $green-100,
-  '200': $green-200,
-  '300': $green-300,
-  '400': $green-400,
-  '500': $green-500,
-  '600': $green-600,
-  '700': $green-700,
-  '800': $green-800,
-  '900': $green-900,
-  '950': $green-950
-);
-
-$blues: (
-  '50': $blue-50,
-  '100': $blue-100,
-  '200': $blue-200,
-  '300': $blue-300,
-  '400': $blue-400,
-  '500': $blue-500,
-  '600': $blue-600,
-  '700': $blue-700,
-  '800': $blue-800,
-  '900': $blue-900,
-  '950': $blue-950
-);
-
-$oranges: (
-  '50': $orange-50,
-  '100': $orange-100,
-  '200': $orange-200,
-  '300': $orange-300,
-  '400': $orange-400,
-  '500': $orange-500,
-  '600': $orange-600,
-  '700': $orange-700,
-  '800': $orange-800,
-  '900': $orange-900,
-  '950': $orange-950
-);
-
-$reds: (
-  '50': $red-50,
-  '100': $red-100,
-  '200': $red-200,
-  '300': $red-300,
-  '400': $red-400,
-  '500': $red-500,
-  '600': $red-600,
-  '700': $red-700,
-  '800': $red-800,
-  '900': $red-900,
-  '950': $red-950
-);
-
-$purples: (
-  '50': $purple-50,
-  '100': $purple-100,
-  '200': $purple-200,
-  '300': $purple-300,
-  '400': $purple-400,
-  '500': $purple-500,
-  '600': $purple-600,
-  '700': $purple-700,
-  '800': $purple-800,
-  '900': $purple-900,
-  '950': $purple-950
-);
-
-$grays: (
-  '10': $gray-10,
-  '50': $gray-50,
-  '100': $gray-100,
-  '200': $gray-200,
-  '300': $gray-300,
-  '400': $gray-400,
-  '500': $gray-500,
-  '600': $gray-600,
-  '700': $gray-700,
-  '800': $gray-800,
-  '900': $gray-900,
-  '950': $gray-950
-);
-
-$color-ranges: (
-  'primary': $blues,
-  'secondary': $grays,
-  'success': $greens,
-  'warning': $oranges,
-  'danger': $reds
-);
-
-// GitLab themes
-
-$indigo-50: #f1f1ff;
-$indigo-100: #dbdbf8;
-$indigo-200: #c7c7f2;
-$indigo-300: #a2a2e6;
-$indigo-400: #8181d7;
-$indigo-500: #6666c4;
-$indigo-600: #5252b5;
-$indigo-700: #41419f;
-$indigo-800: #303083;
-$indigo-900: #222261;
-$indigo-950: #14143d;
 // To do this variant right for darkmode, we need to create a variable for it.
-$indigo-900-alpha-008: rgba($indigo-900, 0.08);
-
-$theme-blue-50: #cdd8e3;
-$theme-blue-100: #b9cadc;
-$theme-blue-200: #a6bdd5;
-$theme-blue-300: #81a5c9;
-$theme-blue-400: #628eb9;
-$theme-blue-500: #4977a5;
-$theme-blue-600: #346596;
-$theme-blue-700: #235180;
-$theme-blue-800: #153c63;
-$theme-blue-900: #0b2640;
-$theme-blue-950: #04101c;
-
-$theme-light-blue-50: #dde6ee;
-$theme-light-blue-100: #c1d4e6;
-$theme-light-blue-200: #a0bedc;
-$theme-light-blue-300: #74a3d3;
-$theme-light-blue-400: #4f8bc7;
-$theme-light-blue-500: #3476b9;
-$theme-light-blue-600: #2268ae;
-$theme-light-blue-700: #145aa1;
-$theme-light-blue-800: #0e4d8d;
-$theme-light-blue-900: #0c4277;
-$theme-light-blue-950: #0a3764;
-
-$theme-green-50: #dde9de;
-$theme-green-100: #b1d6b5;
-$theme-green-200: #8cc497;
-$theme-green-300: #69af7d;
-$theme-green-400: #499767;
-$theme-green-500: #308258;
-$theme-green-600: #25744c;
-$theme-green-700: #1b653f;
-$theme-green-800: #155635;
-$theme-green-900: #0e4328;
-$theme-green-950: #052e19;
-
-$theme-red-50: #f4e9e7;
-$theme-red-100: #ecd3d0;
-$theme-red-200: #e3bab5;
-$theme-red-300: #d59086;
-$theme-red-400: #c66e60;
-$theme-red-500: #ad4a3b;
-$theme-red-600: #a13322;
-$theme-red-700: #8f2110;
-$theme-red-800: #761405;
-$theme-red-900: #580d02;
-$theme-red-950: #380700;
-
-$theme-light-red-50: #faf2f1;
-$theme-light-red-100: #f6d9d5;
-$theme-light-red-200: #ebada2;
-$theme-light-red-300: #e07f6f;
-$theme-light-red-400: #d36250;
-$theme-light-red-500: #c24b38;
-$theme-light-red-600: #b53a26;
-$theme-light-red-700: #a02e1c;
-$theme-light-red-800: #8b2212;
-$theme-light-red-900: #751709;
-$theme-light-red-950: #5c1105;
-
-// Data visualization color palette
-
-$data-viz-blue-50: #e9ebff !default;
-$data-viz-blue-100: #d2dcff !default;
-$data-viz-blue-200: #b7c6ff !default;
-$data-viz-blue-300: #97acff !default;
-$data-viz-blue-400: #7992f5 !default;
-$data-viz-blue-500: #617ae2 !default;
-$data-viz-blue-600: #4e65cd !default;
-$data-viz-blue-700: #3f51ae !default;
-$data-viz-blue-800: #374291 !default;
-$data-viz-blue-900: #303470 !default;
-$data-viz-blue-950: #2a2b59 !default;
+$indigo-900-alpha-008: rgba($theme-indigo-900, 0.08);
 
 $border-white-light: darken($white, $darken-border-factor) !default;
 $border-white-normal: darken($white-normal, $darken-border-factor) !default;
@@ -834,7 +581,7 @@ $linked-project-column-margin: 60px;
 Performance Bar
 */
 $perf-bar-production: $gray-950;
-$perf-bar-staging: $indigo-950;
+$perf-bar-staging: $theme-indigo-950;
 $perf-bar-development: $red-900;
 $perf-bar-bucket-bg: $black;
 $perf-bar-bucket-box-shadow-from: rgba($white, 0.2);
diff --git a/app/assets/stylesheets/page_bundles/profiles/preferences.scss b/app/assets/stylesheets/page_bundles/profiles/preferences.scss
index d09ad42a722..502674deec8 100644
--- a/app/assets/stylesheets/page_bundles/profiles/preferences.scss
+++ b/app/assets/stylesheets/page_bundles/profiles/preferences.scss
@@ -13,11 +13,11 @@
     margin-bottom: $gl-padding-8;
 
     &.ui-indigo {
-      background-color: $indigo-900;
+      background-color: $theme-indigo-900;
     }
 
     &.ui-light-indigo {
-      background-color: $indigo-700;
+      background-color: $theme-indigo-700;
     }
 
     &.ui-blue {
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 36fa457f244..69d0431c9a8 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -1,15 +1,4 @@
-$gray-10: #1f1e24;
-$gray-50: #333238;
-$gray-100: #434248;
-$gray-200: #535158;
-$gray-300: #626168;
-$gray-400: #737278;
-$gray-500: #89888d;
-$gray-600: #a4a3a8;
-$gray-700: #bfbfc3;
-$gray-800: #dcdcde;
-$gray-900: #ececef;
-$gray-950: #fbfafd;
+@import '@gitlab/ui/dist/tokens/scss/tokens.dark';
 
 $gray-lightest: lighten($gray-10, 1);
 $gray-light: lighten($gray-10, 2);
@@ -25,100 +14,14 @@ $gray-darkest: $gray-700;
 $t-gray-a-16: rgba($gray-10, 0.16);
 $t-gray-a-24: rgba($gray-10, 0.24);
 
-$black: #fff;
 $black-normal: $gray-900;
-$white: $gray-50;
 $white-normal: $gray-50;
 $white-dark: $gray-100;
 
-$green-50: #0a4020;
-$green-100: #0d532a;
-$green-200: #24663b;
-$green-300: #217645;
-$green-400: #108548;
-$green-500: #2da160;
-$green-600: #52b87a;
-$green-700: #91d4a8;
-$green-800: #c3e6cd;
-$green-900: #ecf4ee;
-$green-950: #f1fdf6;
-
-$blue-50: #033464;
-$blue-100: #064787;
-$blue-200: #0b5cad;
-$blue-300: #1068bf;
-$blue-400: #1f75cb;
-$blue-500: #428fdc;
-$blue-600: #63a6e9;
-$blue-700: #9dc7f1;
-$blue-800: #cbe2f9;
-$blue-900: #e9f3fc;
-$blue-950: #f2f9ff;
-
-$orange-50: #5c2900;
-$orange-100: #703800;
-$orange-200: #8f4700;
-$orange-300: #9e5400;
-$orange-400: #ab6100;
-$orange-500: #c17d10;
-$orange-600: #d99530;
-$orange-700: #e9be74;
-$orange-800: #f5d9a8;
-$orange-900: #fdf1dd;
-$orange-950: #fff4e1;
-
-$red-50: #660e00;
-$red-100: #8d1300;
-$red-200: #ae1800;
-$red-300: #c91c00;
-$red-400: #dd2b0e;
-$red-500: #ec5941;
-$red-600: #f57f6c;
-$red-700: #fcb5aa;
-$red-800: #fdd4cd;
-$red-900: #fcf1ef;
-$red-950: #fff4f3;
-
-$indigo-50: #1a1a40;
-$indigo-100: #292961;
-$indigo-200: #393982;
-$indigo-300: #4b4ba3;
-$indigo-400: #5b5bbd;
-$indigo-500: #6666c4;
-$indigo-600: #7c7ccc;
-$indigo-700: #a6a6de;
-$indigo-800: #d1d1f0;
-$indigo-900: #ebebfa;
-$indigo-950: #f7f7ff;
-
-$purple-50: #232150;
-$purple-100: #2f2a6b;
-$purple-200: #453894;
-$purple-300: #5943b6;
-$purple-400: #694cc0;
-$purple-500: #7b58cf;
-$purple-600: #9475db;
-$purple-700: #ac93e6;
-$purple-800: #cbbbf2;
-$purple-900: #e1d8f9;
-$purple-950: #f4f0ff;
-
 $theme-indigo-50: #1a1a40;
 
 $border-color: #4f4f4f;
 
-$data-viz-blue-50: #2a2b59;
-$data-viz-blue-100: #303470;
-$data-viz-blue-200: #374291;
-$data-viz-blue-300: #3f51ae;
-$data-viz-blue-400: #4e65cd;
-$data-viz-blue-500: #617ae2;
-$data-viz-blue-600: #7992f5;
-$data-viz-blue-700: #97acff;
-$data-viz-blue-800: #b7c6ff;
-$data-viz-blue-900: #d2dcff;
-$data-viz-blue-950: #e9ebff;
-
 $border-white-normal: $border-color;
 
 $gl-text-color-secondary: $gray-700;
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
index c0eced48171..be2c791644a 100644
--- a/app/assets/stylesheets/themes/dark_mode_overrides.scss
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -1,93 +1,10 @@
 @import './themes/dark';
+@import '@gitlab/ui/dist/tokens/css/tokens.dark';
 @import 'page_bundles/mixins_and_variables_and_functions';
 @import './themes/theme_helper';
 
 :root {
   color-scheme: dark;
-  --gray-10: #{$gray-10};
-  --gray-50: #{$gray-50};
-  --gray-100: #{$gray-100};
-  --gray-200: #{$gray-200};
-  --gray-300: #{$gray-300};
-  --gray-400: #{$gray-400};
-  --gray-500: #{$gray-500};
-  --gray-600: #{$gray-600};
-  --gray-700: #{$gray-700};
-  --gray-800: #{$gray-800};
-  --gray-900: #{$gray-900};
-  --gray-950: #{$gray-950};
-
-  --green-50: #{$green-50};
-  --green-100: #{$green-100};
-  --green-200: #{$green-200};
-  --green-300: #{$green-300};
-  --green-400: #{$green-400};
-  --green-500: #{$green-500};
-  --green-600: #{$green-600};
-  --green-700: #{$green-700};
-  --green-800: #{$green-800};
-  --green-900: #{$green-900};
-  --green-950: #{$green-950};
-
-  --blue-50: #{$blue-50};
-  --blue-100: #{$blue-100};
-  --blue-200: #{$blue-200};
-  --blue-300: #{$blue-300};
-  --blue-400: #{$blue-400};
-  --blue-500: #{$blue-500};
-  --blue-600: #{$blue-600};
-  --blue-700: #{$blue-700};
-  --blue-800: #{$blue-800};
-  --blue-900: #{$blue-900};
-  --blue-950: #{$blue-950};
-
-  --orange-50: #{$orange-50};
-  --orange-100: #{$orange-100};
-  --orange-200: #{$orange-200};
-  --orange-300: #{$orange-300};
-  --orange-400: #{$orange-400};
-  --orange-500: #{$orange-500};
-  --orange-600: #{$orange-600};
-  --orange-700: #{$orange-700};
-  --orange-800: #{$orange-800};
-  --orange-900: #{$orange-900};
-  --orange-950: #{$orange-950};
-
-  --red-50: #{$red-50};
-  --red-100: #{$red-100};
-  --red-200: #{$red-200};
-  --red-300: #{$red-300};
-  --red-400: #{$red-400};
-  --red-500: #{$red-500};
-  --red-600: #{$red-600};
-  --red-700: #{$red-700};
-  --red-800: #{$red-800};
-  --red-900: #{$red-900};
-  --red-950: #{$red-950};
-
-  --indigo-50: #{$indigo-50};
-  --indigo-100: #{$indigo-100};
-  --indigo-200: #{$indigo-200};
-  --indigo-300: #{$indigo-300};
-  --indigo-400: #{$indigo-400};
-  --indigo-500: #{$indigo-500};
-  --indigo-600: #{$indigo-600};
-  --indigo-700: #{$indigo-700};
-  --indigo-800: #{$indigo-800};
-  --indigo-900: #{$indigo-900};
-  --indigo-950: #{$indigo-950};
-
-  --purple-50: #{$purple-50};
-  --purple-100: #{$purple-100};
-  --purple-200: #{$purple-200};
-  --purple-300: #{$purple-300};
-  --purple-400: #{$purple-400};
-  --purple-500: #{$purple-500};
-  --purple-600: #{$purple-600};
-  --purple-700: #{$purple-700};
-  --purple-800: #{$purple-800};
-  --purple-900: #{$purple-900};
-  --purple-950: #{$purple-950};
 
   --dark-icon-color-purple-1: #524a68;
   --dark-icon-color-purple-2: #715bae;
@@ -98,8 +15,6 @@
   --gl-text-color: #{$gray-900};
   --border-color: #{$border-color};
 
-  --white: #{$white};
-  --black: #{$black};
   --gray-light: #{$gray-50};
 
   --svg-status-bg: #{$white};
diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss
index d7e8ddadf46..d82fb7b748c 100644
--- a/app/assets/stylesheets/themes/theme_indigo.scss
+++ b/app/assets/stylesheets/themes/theme_indigo.scss
@@ -3,10 +3,10 @@
 :root {
   &.ui-indigo {
     @include gitlab-theme(
-      $indigo-200,
-      $indigo-500,
-      $indigo-700,
-      $indigo-900,
+      $theme-indigo-200,
+      $theme-indigo-500,
+      $theme-indigo-700,
+      $theme-indigo-900,
       $white
     );
 
diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss
index 04bcfaf8366..89e8fbc8a60 100644
--- a/app/assets/stylesheets/themes/theme_light_indigo.scss
+++ b/app/assets/stylesheets/themes/theme_light_indigo.scss
@@ -3,10 +3,10 @@
 :root {
   &.ui-light-indigo {
     @include gitlab-theme(
-      $indigo-200,
-      $indigo-500,
-      $indigo-500,
-      $indigo-700,
+      $theme-indigo-200,
+      $theme-indigo-500,
+      $theme-indigo-500,
+      $theme-indigo-700,
       $white
     );
 
diff --git a/config/feature_flags/development/internal_events_for_product_analytics.yml b/config/feature_flags/development/internal_events_for_product_analytics.yml
new file mode 100644
index 00000000000..0ed4f0cf744
--- /dev/null
+++ b/config/feature_flags/development/internal_events_for_product_analytics.yml
@@ -0,0 +1,8 @@
+---
+name: internal_events_for_product_analytics
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/136154
+rollout_issue_url: 
+milestone: '16.7'
+type: development
+group: group::analytics instrumentation
+default_enabled: false
diff --git a/lib/gitlab/internal_events.rb b/lib/gitlab/internal_events.rb
index c775182fb40..c4fddede4b8 100644
--- a/lib/gitlab/internal_events.rb
+++ b/lib/gitlab/internal_events.rb
@@ -8,6 +8,7 @@ module Gitlab
 
     class << self
       include Gitlab::Tracking::Helpers
+      include Gitlab::Utils::StrongMemoize
 
       def track_event(event_name, send_snowplow_event: true, **kwargs)
         raise UnknownEventError, "Unknown event: #{event_name}" unless EventDefinitions.known_event?(event_name)
@@ -23,6 +24,10 @@ module Gitlab
         increase_weekly_total_counter(event_name)
         update_unique_counter(event_name, kwargs)
         trigger_snowplow_event(event_name, kwargs) if send_snowplow_event
+
+        if Feature.enabled?(:internal_events_for_product_analytics)
+          send_application_instrumentation_event(event_name, kwargs)
+        end
       rescue StandardError => e
         Gitlab::ErrorTracking.track_and_raise_for_dev_exception(e, event_name: event_name, kwargs: kwargs)
         nil
@@ -93,6 +98,25 @@ module Gitlab
         Gitlab::ErrorTracking
           .track_and_raise_for_dev_exception(error, snowplow_category: category, snowplow_action: event_name)
       end
+
+      def send_application_instrumentation_event(event_name, kwargs)
+        return if gitlab_sdk_client.nil?
+
+        user = kwargs[:user]
+
+        gitlab_sdk_client.identify(user&.id)
+        gitlab_sdk_client.track(event_name)
+      end
+
+      def gitlab_sdk_client
+        app_id = ENV['GITLAB_ANALYTICS_ID']
+        host = ENV['GITLAB_ANALYTICS_URL']
+
+        return unless app_id.present? && host.present?
+
+        GitlabSDK::Client.new(app_id: app_id, host: host)
+      end
+      strong_memoize_attr :gitlab_sdk_client
     end
   end
 end
diff --git a/qa/qa/specs/features/browser_ui/8_monitor/alert_management/automatically_creates_incident_for_alert_spec.rb b/qa/qa/specs/features/browser_ui/8_monitor/alert_management/automatically_creates_incident_for_alert_spec.rb
index dff130a5793..192a08dc5ab 100644
--- a/qa/qa/specs/features/browser_ui/8_monitor/alert_management/automatically_creates_incident_for_alert_spec.rb
+++ b/qa/qa/specs/features/browser_ui/8_monitor/alert_management/automatically_creates_incident_for_alert_spec.rb
@@ -22,7 +22,7 @@ module QA
       end
 
       context(
-        'when using HTTP endpoint integration',
+        'when using HTTP endpoint integration', :reliable,
         testcase: 'https://gitlab.com/gitlab-org/gitlab/-/quality/test_cases/388469'
       ) do
         before do
@@ -34,7 +34,7 @@ module QA
       end
 
       context(
-        'when using Prometheus integration',
+        'when using Prometheus integration', :reliable,
         testcase: 'https://gitlab.com/gitlab-org/gitlab/-/quality/test_cases/390123'
       ) do
         before do
diff --git a/qa/qa/specs/features/browser_ui/8_monitor/alert_management/recovery_alert_resolves_correct_alert_spec.rb b/qa/qa/specs/features/browser_ui/8_monitor/alert_management/recovery_alert_resolves_correct_alert_spec.rb
index af088d2978a..373d6be4407 100644
--- a/qa/qa/specs/features/browser_ui/8_monitor/alert_management/recovery_alert_resolves_correct_alert_spec.rb
+++ b/qa/qa/specs/features/browser_ui/8_monitor/alert_management/recovery_alert_resolves_correct_alert_spec.rb
@@ -39,7 +39,7 @@ module QA
       end
 
       context(
-        'when using Prometheus integration',
+        'when using Prometheus integration', :reliable,
         testcase: 'https://gitlab.com/gitlab-org/gitlab/-/quality/test_cases/393590'
       ) do
         include_context 'sends and resolves test alerts'
diff --git a/spec/lib/gitlab/internal_events_spec.rb b/spec/lib/gitlab/internal_events_spec.rb
index 68d6f3700af..26c2421e649 100644
--- a/spec/lib/gitlab/internal_events_spec.rb
+++ b/spec/lib/gitlab/internal_events_spec.rb
@@ -267,4 +267,64 @@ RSpec.describe Gitlab::InternalEvents, :snowplow, feature_category: :product_ana
       expect(Gitlab::UsageDataCounters::HLLRedisCounter).not_to have_received(:track_event)
     end
   end
+
+  describe 'Product Analytics tracking' do
+    let(:app_id) { 'foobar' }
+    let(:url) { 'http://localhost:4000' }
+
+    before do
+      described_class.clear_memoization(:gitlab_sdk_client)
+
+      stub_env('GITLAB_ANALYTICS_ID', app_id)
+      stub_env('GITLAB_ANALYTICS_URL', url)
+    end
+
+    subject(:track_event) { described_class.track_event(event_name, user: user) }
+
+    shared_examples 'does not send a Product Analytics event' do
+      it 'does not call the Product Analytics Ruby SDK' do
+        expect(GitlabSDK::Client).not_to receive(:new)
+
+        track_event
+      end
+    end
+
+    context 'when internal_events_for_product_analytics FF is enabled' do
+      before do
+        stub_feature_flags(internal_events_for_product_analytics: true)
+      end
+
+      it 'calls Product Analytics Ruby SDK', :aggregate_failures do
+        expect_next_instance_of(GitlabSDK::Client) do |sdk_client|
+          expect(sdk_client).to receive(:identify).with(user.id)
+          expect(sdk_client).to receive(:track).with(event_name)
+        end
+
+        track_event
+      end
+
+      context 'when GITLAB_ANALYTICS_ID is nil' do
+        let(:app_id) { nil }
+
+        it_behaves_like 'does not send a Product Analytics event'
+      end
+
+      context 'when GITLAB_ANALYTICS_URL is nil' do
+        let(:url) { nil }
+
+        it_behaves_like 'does not send a Product Analytics event'
+      end
+    end
+
+    context 'when internal_events_for_product_analytics FF is disabled' do
+      let(:app_id) { 'foobar' }
+      let(:url) { 'http://localhost:4000' }
+
+      before do
+        stub_feature_flags(internal_events_for_product_analytics: false)
+      end
+
+      it_behaves_like 'does not send a Product Analytics event'
+    end
+  end
 end
diff --git a/spec/lib/gitlab/usage_data_counters/editor_unique_counter_spec.rb b/spec/lib/gitlab/usage_data_counters/editor_unique_counter_spec.rb
index 71e9e7a8e7d..cbf4d3c8261 100644
--- a/spec/lib/gitlab/usage_data_counters/editor_unique_counter_spec.rb
+++ b/spec/lib/gitlab/usage_data_counters/editor_unique_counter_spec.rb
@@ -19,9 +19,9 @@ RSpec.describe Gitlab::UsageDataCounters::EditorUniqueCounter, :clean_gitlab_red
 
     specify do
       aggregate_failures do
-        expect(track_action(author: user, project: project)).to be_truthy
-        expect(track_action(author: user2, project: project)).to be_truthy
-        expect(track_action(author: user3, project: project)).to be_truthy
+        track_action(author: user, project: project)
+        track_action(author: user2, project: project)
+        track_action(author: user3, project: project)
 
         expect(count_unique(date_from: time.beginning_of_week, date_to: 1.week.from_now)).to eq(3)
       end
@@ -30,7 +30,9 @@ RSpec.describe Gitlab::UsageDataCounters::EditorUniqueCounter, :clean_gitlab_red
     it_behaves_like 'internal event tracking'
 
     it 'does not track edit actions if author is not present' do
-      expect(track_action(author: nil, project: project)).to be_nil
+      track_action(author: nil, project: project)
+
+      expect(count_unique(date_from: time.beginning_of_week, date_to: 1.week.from_now)).to eq(0)
     end
   end