Add latest changes from gitlab-org/gitlab@master

GITALY_SERVER_VERSION

@@ -1 +1 @@
-25020130cc7c734d56bc729cba1134f7de89cb7c
+96b154da1923b73abd2c3f8fa9a932e5c371e75c

GITLAB_KAS_VERSION

@@ -1 +1 @@
-4fe9bfd64a3a6ed177743db3f0905aaffb2c10c2
+7d833696b8717ca3de55d1bf7fd8db0fd1415c52

app/assets/javascripts/analytics/cycle_analytics/components/value_stream_filters.vue

@@ -130,7 +130,7 @@ export default {
 </script>
 <template>
   <div
-    class="gl-mt-3 gl-border-b-1 gl-border-t-1 gl-border-gray-100 gl-bg-gray-10 gl-px-3 gl-py-5 gl-border-b-solid gl-border-t-solid"
+    class="gl-mt-3 gl-border-b-1 gl-border-t-1 gl-border-default gl-bg-gray-10 gl-px-3 gl-py-5 gl-border-b-solid gl-border-t-solid"
   >
     <filter-bar
       data-testid="vsa-filter-bar"

app/assets/javascripts/analytics/devops_reports/components/devops_score.vue

@@ -97,7 +97,7 @@ export default {
       <gl-table-lite
         :fields="$options.tableHeaderFields"
         :items="devopsScoreMetrics.cards"
-        thead-class="gl-border-t-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
+        thead-class="gl-border-t-0 gl-border-b-solid gl-border-b-1 gl-border-b-default"
         stacked="sm"
       >
         <template #cell(usage)="{ item }">

app/assets/javascripts/ci/admin/jobs_table/admin_jobs_table_app.vue

@@ -35,7 +35,7 @@ export default {
     cancelableJobsErrorMsg: CANCELABLE_JOBS_ERROR_MSG,
   },
   filterSearchBoxStyles:
-    'gl-my-0 gl-p-5 gl-bg-gray-10 gl-text-default gl-border-b gl-border-gray-100',
+    'gl-my-0 gl-p-5 gl-bg-gray-10 gl-text-default gl-border-b gl-border-default',
   components: {
     JobsSkeletonLoader,
     JobsTableEmptyState,

app/assets/javascripts/ci/artifacts/components/artifact_row.vue

@@ -81,10 +81,7 @@ export default {
 };
 </script>
 <template>
-  <div
-    class="gl-py-4"
-    :class="{ 'gl-border-b-1 gl-border-gray-100 gl-border-b-solid': !isLastRow }"
-  >
+  <div class="gl-py-4" :class="{ 'gl-border-b-1 gl-border-default gl-border-b-solid': !isLastRow }">
     <div class="gl-inline-flex gl-w-full gl-items-center">
       <span v-if="canBulkDestroyArtifacts" class="gl-pl-5">
         <gl-form-checkbox

app/assets/javascripts/ci/artifacts/components/artifacts_bulk_delete.vue

@@ -45,7 +45,7 @@ export default {
 
     <div
       v-if="selectedArtifacts.length > 0"
-      class="gl-my-4 gl-border-1 gl-border-solid gl-border-gray-100 gl-p-4"
+      class="gl-my-4 gl-border-1 gl-border-solid gl-border-default gl-p-4"
       data-testid="bulk-delete-container"
     >
       <div class="gl-flex gl-items-center">

app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue

@@ -150,7 +150,7 @@ export default {
 </script>
 <template>
   <li
-    class="gl-flex gl-items-center gl-border-b-1 gl-border-gray-100 gl-py-3 gl-text-subtle gl-border-b-solid"
+    class="gl-flex gl-items-center gl-border-b-1 gl-border-default gl-py-3 gl-text-subtle gl-border-b-solid"
     data-testid="catalog-resource-item"
   >
     <gl-avatar

app/assets/javascripts/ci/jobs_page/jobs_page_app.vue

@@ -23,7 +23,7 @@ export default {
     loadingAriaLabel: __('Loading'),
   },
   filterSearchBoxStyles:
-    'gl-my-0 gl-p-5 gl-bg-gray-10 gl-text-default gl-border-b gl-border-gray-100',
+    'gl-my-0 gl-p-5 gl-bg-gray-10 gl-text-default gl-border-b gl-border-default',
   components: {
     GlAlert,
     GlKeysetPagination,

app/assets/javascripts/ci/pipeline_editor/components/editor/ci_config_merged_preview.vue

@@ -40,7 +40,7 @@ export default {
       <gl-icon class="gl-mr-3" :size="16" name="lock" variant="subtle" />
       {{ $options.i18n.viewOnlyMessage }}
     </div>
-    <div class="gl-mt-3 gl-border-1 gl-border-solid gl-border-gray-100">
+    <div class="gl-mt-3 gl-border-1 gl-border-solid gl-border-default">
       <source-editor
         ref="editor"
         :value="mergedYaml"

app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue

@@ -61,7 +61,7 @@ export default {
 
 <template>
   <div
-    class="gl-flex gl-flex-col gl-gap-3 gl-border-1 gl-border-solid gl-border-gray-100 gl-p-3 md:gl-flex-row"
+    class="gl-flex gl-flex-col gl-gap-3 gl-border-1 gl-border-solid gl-border-default gl-p-3 md:gl-flex-row"
   >
     <slot></slot>
     <gl-button

app/assets/javascripts/ci/pipeline_editor/components/editor/text_editor.vue

@@ -40,7 +40,7 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-border-1 !gl-border-t-0 gl-border-solid gl-border-gray-100">
+  <div class="gl-border-1 !gl-border-t-0 gl-border-solid gl-border-default">
     <source-editor
       ref="editor"
       :debounce-value="$options.debounceValue"

app/assets/javascripts/ci/pipeline_editor/components/lint/ci_lint_results.vue

@@ -5,7 +5,7 @@ import CiLintResultsParam from './ci_lint_results_param.vue';
 import CiLintResultsValue from './ci_lint_results_value.vue';
 import CiLintWarnings from './ci_lint_warnings.vue';
 
-const thBorderColor = '!gl-border-gray-100';
+const thBorderColor = '!gl-border-default';
 
 export default {
   correct: {

app/assets/javascripts/ci/pipelines_page/components/empty_state/ci_templates.vue

@@ -66,7 +66,7 @@ export default {
   <ul class="gl-list-none gl-pl-0">
     <li v-for="template in templates" :key="template.name">
       <div
-        class="gl-flex gl-items-center gl-justify-between gl-border-b-1 gl-border-b-gray-100 gl-pb-3 gl-pt-3 gl-border-b-solid"
+        class="gl-flex gl-items-center gl-justify-between gl-border-b-1 gl-border-b-default gl-pb-3 gl-pt-3 gl-border-b-solid"
       >
         <div class="gl-flex gl-flex-row gl-items-center">
           <gl-avatar

app/assets/javascripts/ci/runner/components/runner_bulk_delete.vue

@@ -166,7 +166,7 @@ export default {
     <div
       v-if="checkedCount"
       data-testid="runner-bulk-delete-banner"
-      class="gl-my-4 gl-border-1 gl-border-solid gl-border-gray-100 gl-p-4"
+      class="gl-my-4 gl-border-1 gl-border-solid gl-border-default gl-p-4"
     >
       <div class="gl-flex gl-items-center">
         <div>

app/assets/javascripts/ci/runner/components/runner_details.vue

@@ -137,7 +137,7 @@ export default {
         </runner-detail>
 
         <runner-maintenance-note-detail
-          class="gl-border-t-1 gl-border-t-gray-100 gl-pt-4 gl-border-t-solid"
+          class="gl-border-t-1 gl-border-t-default gl-pt-4 gl-border-t-solid"
           :value="runner.maintenanceNoteHtml"
         />
 

app/assets/javascripts/ci/runner/components/runner_groups.vue

@@ -20,7 +20,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-border-t-1 gl-border-t-gray-100 gl-border-t-solid">
+  <div class="gl-border-t-1 gl-border-t-default gl-border-t-solid">
     <h3 class="gl-mb-0 gl-mt-5 gl-text-lg">{{ s__('Runners|Assigned Group') }}</h3>
     <template v-if="groups.length">
       <runner-assigned-item

app/assets/javascripts/ci/runner/components/runner_projects.vue

@@ -104,7 +104,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-border-t-1 gl-border-t-gray-100 gl-border-t-solid">
+  <div class="gl-border-t-1 gl-border-t-default gl-border-t-solid">
     <h3 class="gl-mt-5 gl-text-lg">
       {{ heading }}
     </h3>
@@ -125,7 +125,7 @@ export default {
       <runner-assigned-item
         v-for="(project, i) in projects.items"
         :key="project.id"
-        :class="{ 'gl-border-t-1 gl-border-t-gray-100 gl-border-t-solid': i !== 0 }"
+        :class="{ 'gl-border-t-1 gl-border-t-default gl-border-t-solid': i !== 0 }"
         :href="project.webUrl"
         :name="project.name"
         :full-name="project.nameWithNamespace"

app/assets/javascripts/ci/runner/constants.js

@@ -15,7 +15,7 @@ export const I18N_CREATE_ERROR = s__(
 );
 
 export const FILTER_CSS_CLASSES =
-  'gl-bg-gray-10 gl-p-5 gl-border-solid gl-border-gray-100 gl-border-0 gl-border-t-1';
+  'gl-bg-gray-10 gl-p-5 gl-border-solid gl-border-default gl-border-0 gl-border-t-1';
 
 // Type
 

app/assets/javascripts/clusters/agents/components/activity_events_list.vue

@@ -40,7 +40,7 @@ export default {
   emptyHelpLink: helpPagePath('user/clusters/agent/work_with_agent', {
     anchor: 'view-an-agents-activity-information',
   }),
-  borderClasses: 'gl-border-b-1 gl-border-b-solid gl-border-b-gray-100',
+  borderClasses: 'gl-border-b-1 gl-border-b-solid gl-border-b-default',
   apollo: {
     // eslint-disable-next-line @gitlab/vue-no-undef-apollo-properties
     agentEvents: {

app/assets/javascripts/clusters/agents/components/show.vue

@@ -153,13 +153,13 @@ export default {
 
       <integration-status
         :tokens="tokens"
-        class="gl-border-t-1 gl-border-t-gray-100 gl-py-5 gl-border-t-solid"
+        class="gl-border-t-1 gl-border-t-default gl-py-5 gl-border-t-solid"
       />
 
       <gl-tabs
         sync-active-tab-with-query-params
         lazy
-        class="gl-border-t-1 gl-border-t-gray-100 gl-border-t-solid"
+        class="gl-border-t-1 gl-border-t-default gl-border-t-solid"
       >
         <gl-tab :title="$options.i18n.activity" query-param-value="activity">
           <activity-events :agent-name="agentName" :project-path="projectPath" />

app/assets/javascripts/clusters/agents/components/token_table.vue

@@ -104,7 +104,7 @@ export default {
         fixed
         stacked="md"
         head-variant="white"
-        thead-class="gl-border-b-solid gl-border-b-2 gl-border-b-gray-100"
+        thead-class="gl-border-b-solid gl-border-b-2 gl-border-b-default"
       >
         <template #cell(lastUsed)="{ item }">
           <time-ago-tooltip v-if="item.lastUsedAt" :time="item.lastUsedAt" />

app/assets/javascripts/content_editor/components/content_editor.vue

@@ -282,7 +282,7 @@ export default {
         <reference-bubble-menu />
       </div>
       <div
-        class="gl-border-t gl-flex gl-flex-row gl-items-center gl-justify-between gl-rounded-bl-base gl-rounded-br-base gl-border-gray-100 gl-px-2 gl-text-subtle"
+        class="gl-border-t gl-flex gl-flex-row gl-items-center gl-justify-between gl-rounded-bl-base gl-rounded-br-base gl-border-default gl-px-2 gl-text-subtle"
       >
         <editor-mode-switcher size="small" value="richText" @switch="handleEditorModeChanged" />
         <slot name="toolbar"></slot>

app/assets/javascripts/content_editor/components/formatting_toolbar.vue

@@ -78,7 +78,7 @@ export default {
 </script>
 <template>
   <div
-    class="gl-border-b gl-flex gl-w-full gl-flex-wrap gl-items-center gl-gap-y-2 gl-rounded-t-base gl-border-gray-100 gl-px-3 gl-py-3"
+    class="gl-border-b gl-flex gl-w-full gl-flex-wrap gl-items-center gl-gap-y-2 gl-rounded-t-base gl-border-default gl-px-3 gl-py-3"
     data-testid="formatting-toolbar"
   >
     <div class="gl-flex">

app/assets/javascripts/content_editor/components/wrappers/code_block.vue

@@ -175,7 +175,7 @@ export default {
         v-if="node.attrs.showPreview"
         :contenteditable="false"
         data-testid="sandbox-preview"
-        class="!-gl-ml-4 !-gl-mr-4 !-gl-mt-3 gl-mb-3 gl-border-b-1 gl-border-b-gray-100 !gl-bg-white gl-p-4 gl-border-b-solid"
+        class="!-gl-ml-4 !-gl-mr-4 !-gl-mt-3 gl-mb-3 gl-border-b-1 gl-border-b-default !gl-bg-white gl-p-4 gl-border-b-solid"
       >
         <sandboxed-mermaid v-if="node.attrs.language === 'mermaid'" :source="diagramSource" />
         <img v-else ref="diagramContainer" :src="diagramUrl" />

app/assets/javascripts/content_editor/components/wrappers/html_comment.vue

@@ -25,7 +25,7 @@ export default {
     class="content-editor-placeholder-container gl-relative !gl-cursor-pointer gl-rounded-base gl-border-1 gl-p-3"
     :class="{
       'gl-border-solid gl-border-blue-400': selected,
-      'gl-border-dashed gl-border-gray-100': !selected,
+      'gl-border-dashed gl-border-default': !selected,
     }"
   >
     <span contenteditable="false" class="!gl-whitespace-pre-wrap gl-italic gl-text-subtle">{{

app/assets/javascripts/content_editor/components/wrappers/table_of_contents.vue

@@ -42,7 +42,7 @@ export default {
 <template>
   <node-view-wrapper
     as="ul"
-    class="table-of-contents gl-mb-5 gl-border-1 gl-border-solid gl-border-gray-100 !gl-p-4"
+    class="table-of-contents gl-mb-5 gl-border-1 gl-border-solid gl-border-default !gl-p-4"
     data-testid="table-of-contents"
   >
     {{ __('Table of contents') }}

app/assets/javascripts/content_editor/extensions/table_of_contents.js

@@ -25,7 +25,7 @@ export default Node.create({
       'div',
       {
         class:
-          'table-of-contents gl-border-1 gl-border-solid gl-text-center gl-border-gray-100 gl-mb-5',
+          'table-of-contents gl-border-1 gl-border-solid gl-text-center gl-border-default gl-mb-5',
       },
       __('Table of contents'),
     ];

app/assets/javascripts/deploy_keys/components/key.vue

@@ -115,7 +115,7 @@ export default {
 
 <template>
   <div
-    class="gl-responsive-table-row deploy-key gl-items-start !gl-border-gray-100 gl-bg-gray-10 md:gl-pl-5 md:gl-pr-5"
+    class="gl-responsive-table-row deploy-key gl-items-start !gl-border-default gl-bg-gray-10 md:gl-pl-5 md:gl-pr-5"
   >
     <div class="table-section section-40">
       <div role="rowheader" class="table-mobile-header gl-self-start gl-font-bold gl-text-gray-700">

app/assets/javascripts/deploy_keys/components/keys_panel.vue

@@ -24,7 +24,7 @@ export default {
     <template v-if="keys.length > 0">
       <div
         role="row"
-        class="gl-responsive-table-row table-row-header !gl-border-gray-100 gl-bg-gray-10 gl-text-base gl-font-bold gl-text-strong md:gl-pl-5 md:gl-pr-5"
+        class="gl-responsive-table-row table-row-header !gl-border-default gl-bg-gray-10 gl-text-base gl-font-bold gl-text-strong md:gl-pl-5 md:gl-pr-5"
       >
         <div role="rowheader" class="table-section section-40">
           {{ s__('DeployKeys|Deploy key') }}

app/assets/javascripts/emoji/components/picker.vue

@@ -189,7 +189,7 @@ export default {
       <div
         v-if="isVisible"
         v-show="!searchValue"
-        class="gl-flex gl-border-b-1 gl-border-gray-100 gl-border-b-solid"
+        class="gl-flex gl-border-b-1 gl-border-default gl-border-b-solid"
       >
         <gl-button
           v-for="(category, index) in categoryNames"

app/assets/javascripts/environments/components/environment_folder.vue

@@ -104,7 +104,7 @@ export default {
 <template>
   <div
     :class="{ 'gl-pb-5': !visible }"
-    class="gl-border-1 gl-border-gray-100 gl-pt-3 gl-border-b-solid"
+    class="gl-border-1 gl-border-default gl-pt-3 gl-border-b-solid"
   >
     <div class="gl-flex gl-w-full gl-items-center gl-px-3">
       <gl-button
@@ -127,12 +127,12 @@ export default {
         :key="environment.name"
         :environment="environment"
         :class="{ 'gl-mt-5': isFirstEnvironment(index) }"
-        class="gl-border-1 gl-border-gray-100 gl-pt-3 gl-border-t-solid"
+        class="gl-border-1 gl-border-default gl-pt-3 gl-border-t-solid"
         in-folder
       />
       <div
         v-if="isMessageShowing"
-        class="gl-border-1 gl-border-gray-100 gl-bg-gray-10 gl-py-5 gl-text-center gl-border-t-solid"
+        class="gl-border-1 gl-border-default gl-bg-gray-10 gl-py-5 gl-text-center gl-border-t-solid"
         data-testid="environment-folder-message-element"
       >
         <gl-sprintf :message="$options.i18n.message">

app/assets/javascripts/environments/components/environments_app.vue

@@ -328,7 +328,7 @@ export default {
       <environment-item
         v-for="environment in environments"
         :key="environment.name"
-        class="gl-mb-3 gl-border-1 gl-border-gray-100 gl-border-b-solid"
+        class="gl-mb-3 gl-border-1 gl-border-default gl-border-b-solid"
         :environment="environment.latest"
         @change="refetchEnvironments"
     /></template>

app/assets/javascripts/environments/components/new_environment_item.vue

@@ -169,7 +169,7 @@ export default {
     },
   },
   deploymentClasses: [
-    'gl-border-gray-100',
+    'gl-border-default',
     'gl-border-t-solid',
     'gl-border-1',
     'gl-py-5',
@@ -177,7 +177,7 @@ export default {
     'gl-bg-gray-10',
   ],
   deployBoardClasses: [
-    'gl-border-gray-100',
+    'gl-border-default',
     'gl-border-t-solid',
     'gl-border-1',
     'gl-py-4',

app/assets/javascripts/environments/folder/environments_folder_app.vue

@@ -224,7 +224,7 @@ export default {
       <div
         v-for="n in lastRowCount"
         :key="`skeleton-box-${n}`"
-        class="gl-border-1 gl-border-gray-100 gl-py-5 gl-border-t-solid md:gl-pl-7"
+        class="gl-border-1 gl-border-default gl-py-5 gl-border-t-solid md:gl-pl-7"
       >
         <gl-skeleton-loader :lines="2" />
       </div>
@@ -243,7 +243,7 @@ export default {
         :id="environment.name"
         :key="index"
         :environment="environment"
-        class="gl-border-1 gl-border-gray-100 gl-pt-3 gl-border-t-solid"
+        class="gl-border-1 gl-border-default gl-pt-3 gl-border-t-solid"
         in-folder
       />
     </div>

app/assets/javascripts/feature_flags/components/strategy.vue

@@ -132,7 +132,7 @@ export default {
       {{ $options.i18n.considerFlexibleRollout }}
     </gl-alert>
 
-    <div class="gl-border-t-1 gl-border-t-gray-100 gl-py-6 gl-border-t-solid">
+    <div class="gl-border-t-1 gl-border-t-default gl-py-6 gl-border-t-solid">
       <div class="flex-md-wrap gl-flex gl-flex-col md:gl-flex-row">
         <div class="mr-5">
           <gl-form-group :label="$options.i18n.strategyTypeLabel" :label-for="strategyTypeId">

app/assets/javascripts/google_cloud/databases/cloudsql/create_instance_form.vue

@@ -44,7 +44,7 @@ export default {
 </script>
 <template>
   <div>
-    <header class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
+    <header class="gl-my-5 gl-border-b-1 gl-border-b-default gl-border-b-solid">
       <h2 class="gl-text-size-h1">{{ formTitle }}</h2>
       <p>{{ formDescription }}</p>
     </header>

app/assets/javascripts/google_cloud/gcp_regions/form.vue

@@ -24,7 +24,7 @@ export default {
 
 <template>
   <div>
-    <header class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
+    <header class="gl-my-5 gl-border-b-1 gl-border-b-default gl-border-b-solid">
       <h1 class="gl-text-size-h1">{{ $options.i18n.title }}</h1>
     </header>
 

app/assets/javascripts/google_cloud/service_accounts/form.vue

@@ -32,7 +32,7 @@ export default {
 
 <template>
   <div>
-    <header class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
+    <header class="gl-my-5 gl-border-b-1 gl-border-b-default gl-border-b-solid">
       <h2 class="gl-text-size-h1">{{ $options.i18n.title }}</h2>
     </header>
     <gl-form-group

app/assets/javascripts/import_entities/import_groups/components/import_table.vue

@@ -664,7 +664,7 @@ export default {
 <template>
   <div>
     <div
-      class="gl-flex gl-items-center gl-border-0 gl-border-b-1 gl-border-solid gl-border-gray-100"
+      class="gl-flex gl-items-center gl-border-0 gl-border-b-1 gl-border-solid gl-border-default"
     >
       <h1 class="gl-my-0 gl-flex gl-items-center gl-gap-3 gl-py-4 gl-text-size-h1">
         <img :src="$options.gitlabLogo" class="gl-h-6 gl-w-6" />

app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue

@@ -71,7 +71,7 @@ export default {
       <div
         class="gl-flex gl-h-7 gl-items-center gl-border-0 gl-border-b-1 gl-border-t-1 gl-border-solid gl-bg-gray-10 gl-px-3"
         :class="{
-          'gl-border-gray-100 gl-text-gray-400': !isPathSelectionAvailable,
+          'gl-border-default gl-text-gray-400': !isPathSelectionAvailable,
           'gl-border-gray-200': isPathSelectionAvailable,
         }"
       >

app/assets/javascripts/import_entities/import_projects/components/github_status_table.vue

@@ -68,7 +68,7 @@ export default {
       <gl-tabs v-model="selectedRelationTypeTabIdx" content-class="!gl-py-0 gl-mb-3">
         <gl-tab v-for="tab in $options.relationTypes" :key="tab.title" :title="tab.title">
           <div
-            class="gl-flex gl-flex-wrap gl-justify-between gl-gap-3 gl-border-0 gl-border-b-1 gl-border-solid gl-border-b-gray-100 gl-bg-gray-10 gl-p-5"
+            class="gl-flex gl-flex-wrap gl-justify-between gl-gap-3 gl-border-0 gl-border-b-1 gl-border-solid gl-border-b-default gl-bg-gray-10 gl-p-5"
           >
             <form class="gl-mr-3 gl-flex gl-grow" novalidate @submit.prevent>
               <github-organizations-box

app/assets/javascripts/integrations/edit/components/override_dropdown.vue

@@ -67,7 +67,7 @@ export default {
 
 <template>
   <div
-    class="gl-mb-6 gl-mt-5 gl-flex gl-items-baseline gl-justify-between gl-border-b-1 gl-border-t-1 gl-border-gray-100 gl-py-4 gl-border-b-solid gl-border-t-solid"
+    class="gl-mb-6 gl-mt-5 gl-flex gl-items-baseline gl-justify-between gl-border-b-1 gl-border-t-1 gl-border-default gl-py-4 gl-border-b-solid gl-border-t-solid"
   >
     <span
       >{{ description }}

app/assets/javascripts/issues/show/components/app.vue

@@ -295,7 +295,7 @@ export default {
 
     pinnedLinkClasses() {
       return this.showTitleBorder
-        ? 'gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-mb-6'
+        ? 'gl-border-b-1 gl-border-b-default gl-border-b-solid gl-mb-6'
         : '';
     },
 

app/assets/javascripts/issues/show/components/incidents/create_timeline_event.vue

@@ -110,7 +110,7 @@ export default {
   <div class="create-timeline-event gl-relative gl-flex gl-items-start">
     <div
       v-if="hasTimelineEvents"
-      class="gl-z-1 gl-mt-2 gl-flex gl-h-8 gl-w-8 gl-shrink-0 gl-items-center gl-justify-center gl-self-start gl-rounded-full gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-white gl-p-3 gl-text-gray-200"
+      class="gl-z-1 gl-mt-2 gl-flex gl-h-8 gl-w-8 gl-shrink-0 gl-items-center gl-justify-center gl-self-start gl-rounded-full gl-border-1 gl-border-solid gl-border-default gl-bg-white gl-p-3 gl-text-gray-200"
     >
       <gl-icon name="comment" class="note-icon" />
     </div>

app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue

@@ -30,7 +30,7 @@ export default {
 <template>
   <div class="edit-timeline-event gl-relative gl-flex gl-items-center">
     <div
-      class="gl-z-1 gl-mt-2 gl-flex gl-h-8 gl-w-8 gl-items-center gl-justify-center gl-self-start gl-rounded-full gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-white gl-text-gray-200"
+      class="gl-z-1 gl-mt-2 gl-flex gl-h-8 gl-w-8 gl-items-center gl-justify-center gl-self-start gl-rounded-full gl-border-1 gl-border-solid gl-border-default gl-bg-white gl-text-gray-200"
     >
       <gl-icon name="comment" class="note-icon" />
     </div>

app/assets/javascripts/issues/show/components/incidents/highlight_bar.vue

@@ -39,7 +39,7 @@ export default {
 <template>
   <div
     v-show="showHighlightBar"
-    class="gl-mb-3 gl-flex gl-flex-col gl-justify-between gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-p-5 sm:gl-flex-row"
+    class="gl-mb-3 gl-flex gl-flex-col gl-justify-between gl-rounded-base gl-border-1 gl-border-solid gl-border-default gl-p-5 sm:gl-flex-row"
   >
     <div v-if="alert" class="gl-mr-3">
       <span class="gl-font-bold">{{ s__('HighlightBar|Original alert:') }}</span>

app/assets/javascripts/jira_connect/branches/pages/index.vue

@@ -46,7 +46,7 @@ export default {
 </script>
 <template>
   <div>
-    <div class="gl-mb-5 gl-mt-7 gl-border-1 gl-border-gray-100 gl-border-b-solid">
+    <div class="gl-mb-5 gl-mt-7 gl-border-1 gl-border-default gl-border-b-solid">
       <h1 data-testid="page-title" class="page-title gl-text-size-h-display">{{ pageTitle }}</h1>
     </div>
 

app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue

@@ -133,7 +133,7 @@ export default {
     </div>
     <ul
       v-else
-      class="gl-list-none gl-border-t-1 gl-border-t-gray-100 gl-pl-0 gl-border-t-solid"
+      class="gl-list-none gl-border-t-1 gl-border-t-default gl-pl-0 gl-border-t-solid"
       :class="{ 'gl-opacity-5': isLoadingMore }"
       data-testid="groups-list"
     >

app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item.vue

@@ -50,7 +50,7 @@ export default {
 </script>
 
 <template>
-  <li class="gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
+  <li class="gl-border-b-1 gl-border-b-default gl-border-b-solid">
     <div class="gl-flex gl-items-center gl-py-3">
       <div class="gl-flex-shrink-1 gl-flex gl-min-w-0 gl-grow gl-items-center">
         <div class="gl-flex-shrink-1 gl-min-w-0 gl-grow">

app/assets/javascripts/jira_connect/subscriptions/components/app.vue

@@ -98,7 +98,7 @@ export default {
 <template>
   <div>
     <header
-      class="jira-connect-header gl-flex gl-items-center gl-justify-center gl-border-b-1 gl-border-b-gray-100 gl-bg-white gl-px-5 gl-border-b-solid"
+      class="jira-connect-header gl-flex gl-items-center gl-justify-center gl-border-b-1 gl-border-b-default gl-bg-white gl-px-5 gl-border-b-solid"
     >
       <gl-link :href="gitlabUrl" target="_blank">
         <img :src="gitlabLogo" class="gl-h-6" :alt="__('GitLab')" />

app/assets/javascripts/kubernetes_dashboard/components/workload_details.vue

@@ -195,7 +195,7 @@ export default {
         :key="index"
         class="gl-flex gl-items-center gl-justify-between gl-px-5 gl-py-3"
         :class="{
-          'gl-border-t-1 gl-border-t-gray-100 gl-border-t-solid': index > 0,
+          'gl-border-t-1 gl-border-t-default gl-border-t-solid': index > 0,
         }"
       >
         {{ container.name }}

app/assets/javascripts/kubernetes_dashboard/components/workload_details_item.vue

@@ -44,7 +44,7 @@ export default {
 </script>
 
 <template>
-  <li class="gl-border-b-2 gl-border-b-gray-100 gl-py-3 gl-leading-20 gl-border-b-solid">
+  <li class="gl-border-b-2 gl-border-b-default gl-py-3 gl-leading-20 gl-border-b-solid">
     <div
       :class="{
         'gl-flex gl-flex-wrap gl-items-center gl-justify-between': collapsible,

app/assets/javascripts/language_switcher/components/app.vue

@@ -58,7 +58,7 @@ export default {
     </template>
     <template #footer>
       <div
-        class="gl-flex gl-justify-center gl-border-t-1 gl-border-t-gray-100 gl-p-3 gl-border-t-solid"
+        class="gl-flex gl-justify-center gl-border-t-1 gl-border-t-default gl-p-3 gl-border-t-solid"
         data-testid="footer"
       >
         <gl-link :href="$options.HELP_TRANSLATE_HREF">{{ $options.HELP_TRANSLATE_MSG }}</gl-link>

app/assets/javascripts/ml/model_registry/apps/show_ml_model.vue

@@ -13,12 +13,14 @@ import getModelQuery from '~/ml/model_registry/graphql/queries/get_model.query.g
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
+import CandidateList from '~/ml/model_registry/components/candidate_list.vue';
 import DeleteModelDisclosureDropdownItem from '../components/delete_model_disclosure_dropdown_item.vue';
 import LoadOrErrorOrShow from '../components/load_or_error_or_show.vue';
 import DeleteModel from '../components/functional/delete_model.vue';
 
 const ROUTE_DETAILS = 'details';
 const ROUTE_VERSIONS = 'versions';
+const ROUTE_CANDIDATES = 'candidates';
 
 const deletionSuccessfulAlert = {
   id: 'ml-model-deleted-successfully',
@@ -37,6 +39,11 @@ const routes = [
     name: ROUTE_VERSIONS,
     component: ModelVersionList,
   },
+  {
+    path: '/candidates',
+    name: ROUTE_CANDIDATES,
+    component: CandidateList,
+  },
   { path: '*', redirect: { name: ROUTE_DETAILS } },
 ];
 
@@ -149,6 +156,9 @@ export default {
     versionCount() {
       return this.model?.versionCount || 0;
     },
+    candidateCount() {
+      return this.model?.candidateCount || 0;
+    },
     tabIndex() {
       return routes.findIndex(({ name }) => name === this.$route.name);
     },
@@ -213,6 +223,7 @@ export default {
   modelVersionEntity: MODEL_ENTITIES.modelVersion,
   ROUTE_DETAILS,
   ROUTE_VERSIONS,
+  ROUTE_CANDIDATES,
 };
 </script>
 
@@ -286,6 +297,12 @@ export default {
                     }}</gl-badge>
                   </template>
                 </gl-tab>
+                <gl-tab @click="goTo($options.ROUTE_CANDIDATES)">
+                  <template #title>
+                    {{ s__('MlModelRegistry|Version candidates') }}
+                    <gl-badge class="gl-tab-counter-badge">{{ candidateCount }}</gl-badge>
+                  </template>
+                </gl-tab>
 
                 <router-view :model-id="model.id" :model="model" />
               </gl-tabs>

app/assets/javascripts/notes/components/discussion_notes_replies_wrapper.vue

@@ -21,7 +21,7 @@ export default {
         'li',
         {
           class:
-            'discussion-collapsible gl-border-solid gl-border-gray-100 gl-border-1 gl-rounded-base gl-border-t-0',
+            'discussion-collapsible gl-border-solid gl-border-default gl-border-1 gl-rounded-base gl-border-t-0',
         },
         [h('ul', { class: 'notes' }, children)],
       );

app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifests_list.vue

@@ -42,7 +42,7 @@ export default {
 
 <template>
   <div class="gl-mt-6">
-    <h3 class="gl-mb-0 gl-border-b-1 gl-border-gray-100 gl-pb-3 gl-text-base gl-border-b-solid">
+    <h3 class="gl-mb-0 gl-border-b-1 gl-border-default gl-pb-3 gl-text-base gl-border-b-solid">
       {{ $options.i18n.listTitle }}
     </h3>
 

app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata_loader.vue

@@ -18,7 +18,7 @@ export default {
     <div
       v-for="index in $options.loader.repeat"
       :key="index"
-      class="gl-flex gl-items-center gl-border-b-1 gl-border-gray-100 gl-p-4"
+      class="gl-flex gl-items-center gl-border-b-1 gl-border-default gl-p-4"
     >
       <div class="md:gl-max-w-3/10">
         <gl-skeleton-loader :width="$options.loader.width" :height="$options.loader.height">

app/assets/javascripts/packages_and_registries/settings/project/components/expiration_input.vue

@@ -70,7 +70,7 @@ export default {
     },
     inputGroupTextClass() {
       return {
-        'gl-border-gray-100 gl-text-gray-400': this.disabled,
+        'gl-border-default gl-text-gray-400': this.disabled,
       };
     },
   },

app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue

@@ -623,7 +623,7 @@ export default {
 <template>
   <div>
     <div
-      class="project-visibility-setting gl-border-1 gl-border-solid gl-border-gray-100 gl-px-5 gl-py-3"
+      class="project-visibility-setting gl-border-1 gl-border-solid gl-border-default gl-px-5 gl-py-3"
     >
       <project-setting-row
         ref="project-visibility-settings"
@@ -705,7 +705,7 @@ export default {
       </project-setting-row>
     </div>
     <div
-      class="gl-mb-5 gl-flex gl-flex-col gl-gap-6 gl-border-1 gl-border-t-0 gl-border-solid gl-border-gray-100 gl-bg-gray-10 gl-px-5 gl-py-3"
+      class="gl-mb-5 gl-flex gl-flex-col gl-gap-6 gl-border-1 gl-border-t-0 gl-border-solid gl-border-default gl-bg-gray-10 gl-px-5 gl-py-3"
     >
       <project-setting-row
         ref="issues-settings"

app/assets/javascripts/pages/shared/wikis/components/table_of_contents.vue

@@ -16,7 +16,7 @@ export default {
 <template>
   <div
     ref="toc"
-    class="gl-m-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-gray-10 gl-p-3"
+    class="gl-m-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-default gl-bg-gray-10 gl-p-3"
   >
     <strong class="gl-py-3 gl-text-sm">{{ __('On this page') }}</strong>
     <ul class="wiki-pages gl-text-sm">

app/assets/javascripts/pipeline_wizard/components/wrapper.vue

@@ -205,7 +205,7 @@ export default {
       </section>
     </main>
     <aside class="col-md-6 gl-pt-3">
-      <div class="gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-gray-10">
+      <div class="gl-rounded-base gl-border-1 gl-border-solid gl-border-default gl-bg-gray-10">
         <h6 class="text-secondary gl-p-2 gl-px-4" data-testid="editor-header">
           {{ sprintf($options.i18n.draft, { filename }) }}
         </h6>

app/assets/javascripts/profile/components/overview_tab.vue

@@ -56,7 +56,7 @@ export default {
   <gl-tab :title="$options.i18n.title">
     <div class="gl-mt-5 gl-flex gl-flex-wrap">
       <div class="gl-w-full" data-testid="activity-section">
-        <div class="gl-flex gl-items-center gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
+        <div class="gl-flex gl-items-center gl-border-b-1 gl-border-b-default gl-border-b-solid">
           <h4 class="gl-grow">{{ $options.i18n.activity }}</h4>
           <gl-link href="">{{ $options.i18n.viewAll }}</gl-link>
         </div>
@@ -65,7 +65,7 @@ export default {
         <contribution-events v-else :events="events" />
       </div>
       <div class="gl-w-full" data-testid="personal-projects-section">
-        <div class="gl-flex gl-items-center gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
+        <div class="gl-flex gl-items-center gl-border-b-1 gl-border-b-default gl-border-b-solid">
           <h4 class="gl-grow">{{ $options.i18n.personalProjects }}</h4>
           <gl-link href="">{{ $options.i18n.viewAll }}</gl-link>
         </div>

app/assets/javascripts/projects/settings/branch_rules/components/view/protection_row.vue

@@ -86,7 +86,7 @@ export default {
 
 <template>
   <div
-    class="gl-mb-4 gl-flex gl-items-center gl-gap-7 gl-border-t-1 gl-border-gray-100"
+    class="gl-mb-4 gl-flex gl-items-center gl-gap-7 gl-border-t-1 gl-border-default"
     :class="{ 'gl-pt-4 gl-border-t-solid': showDivider }"
   >
     <div class="gl-flex gl-w-full gl-items-center">

app/assets/javascripts/releases/components/release_block.vue

@@ -139,7 +139,7 @@ export default {
     <div class="gl-flex gl-flex-col gl-gap-5">
       <div
         v-if="shouldRenderMilestoneInfo"
-        class="gl-border-b-1 gl-border-gray-100 gl-border-b-solid"
+        class="gl-border-b-1 gl-border-default gl-border-b-solid"
       >
         <!-- TODO: Switch open* links to opened* once fields have been updated in GraphQL -->
         <release-block-milestone-info
@@ -156,7 +156,7 @@ export default {
         v-if="shouldRenderAssets"
         :assets="assets"
         :class="{
-          'gl-border-b-1 gl-border-gray-100 gl-pb-5 gl-border-b-solid':
+          'gl-border-b-1 gl-border-default gl-pb-5 gl-border-b-solid':
             hasEvidence || release.descriptionHtml,
         }"
       />

app/assets/javascripts/repository/components/fork_suggestion.vue

@@ -24,7 +24,7 @@ export default {
 
 <template>
   <div
-    class="gl-flex gl-items-center gl-justify-end gl-border-1 gl-border-gray-100 gl-bg-gray-10 gl-px-5 gl-py-2 gl-border-b-solid"
+    class="gl-flex gl-items-center gl-justify-end gl-border-1 gl-border-default gl-bg-gray-10 gl-px-5 gl-py-2 gl-border-b-solid"
   >
     <span class="gl-mr-6" data-testid="message">{{ $options.i18n.message }}</span>
 

app/assets/javascripts/security_configuration/components/training_provider_list.vue

@@ -231,7 +231,7 @@ export default {
     </gl-alert>
     <div
       v-if="isLoading"
-      class="gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-white gl-py-6"
+      class="gl-rounded-base gl-border-1 gl-border-solid gl-border-default gl-bg-white gl-py-6"
     >
       <gl-skeleton-loader :width="350" :height="44">
         <rect width="200" height="8" x="10" y="0" rx="4" />

app/assets/javascripts/sidebar/components/time_tracking/help_state.vue

@@ -41,7 +41,7 @@ export default {
 <template>
   <div
     data-testid="helpPane"
-    class="sidebar-help-state gl-border-1 gl-border-gray-100 gl-bg-white gl-border-b-solid gl-border-t-solid"
+    class="sidebar-help-state gl-border-1 gl-border-default gl-bg-white gl-border-b-solid gl-border-t-solid"
   >
     <div class="time-tracking-info">
       <h4>{{ __('Track time with quick actions') }}</h4>

app/assets/javascripts/super_sidebar/components/counter.vue

@@ -48,7 +48,7 @@ export default {
     :is="component"
     :aria-label="ariaLabel"
     :href="href"
-    class="user-bar-button gl-block gl-grow gl-rounded-base gl-border-none gl-py-3 gl-text-center gl-text-sm gl-leading-1 hover:gl-no-underline"
+    class="user-bar-button gl-block gl-grow gl-rounded-base gl-py-3 gl-text-center gl-text-sm gl-leading-1 hover:gl-no-underline"
   >
     <gl-icon aria-hidden="true" :name="icon" />
     <span v-if="count" aria-hidden="true" class="gl-ml-1">{{ formattedCount }}</span>

app/assets/javascripts/super_sidebar/components/flyout_menu.vue

@@ -158,7 +158,7 @@ export default {
     @mouseleave="$emit('mouseleave')"
   >
     <ul
-      class="gl-min-w-20 gl-max-w-34 gl-list-none gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-white gl-p-2 gl-pb-1 gl-shadow-md"
+      class="gl-min-w-20 gl-max-w-34 gl-list-none gl-rounded-base gl-border-1 gl-border-solid gl-border-default gl-bg-white gl-p-2 gl-pb-1 gl-shadow-md"
       @mouseenter="showSVG = false"
     >
       <nav-item

app/assets/javascripts/todos/components/todos_app.vue

@@ -246,7 +246,7 @@ export default {
 
 <template>
   <div>
-    <div class="gl-flex gl-justify-between gl-border-b-1 gl-border-gray-100 gl-border-b-solid">
+    <div class="gl-flex gl-justify-between gl-border-b-1 gl-border-default gl-border-b-solid">
       <gl-tabs
         :value="currentTab"
         content-class="gl-p-0"

app/assets/javascripts/user_lists/components/edit_user_list.vue

@@ -59,7 +59,7 @@ export default {
     <template v-else-if="hasUserList">
       <h3
         data-testid="user-list-title"
-        class="gl-border-1 gl-border-gray-100 gl-pb-5 gl-font-bold gl-border-b-solid"
+        class="gl-border-1 gl-border-default gl-pb-5 gl-font-bold gl-border-b-solid"
       >
         {{ title }}
       </h3>

app/assets/javascripts/user_lists/components/new_user_list.vue

@@ -36,7 +36,7 @@ export default {
       </ul>
     </gl-alert>
 
-    <h3 class="gl-border-1 gl-border-gray-100 gl-pb-5 gl-font-bold gl-border-b-solid">
+    <h3 class="gl-border-1 gl-border-default gl-pb-5 gl-font-bold gl-border-b-solid">
       {{ $options.translations.pageTitle }}
     </h3>
 

app/assets/javascripts/user_lists/components/user_list.vue

@@ -12,7 +12,7 @@ import { s__, __ } from '~/locale';
 import { states, ADD_USER_MODAL_ID } from '../constants/show';
 import AddUserModal from './add_user_modal.vue';
 
-const commonTableClasses = ['gl-py-5', 'gl-border-b-1', 'gl-border-b-solid', 'gl-border-gray-100'];
+const commonTableClasses = ['gl-py-5', 'gl-border-b-1', 'gl-border-b-solid', 'gl-border-default'];
 
 export default {
   components: {
@@ -49,7 +49,7 @@ export default {
       'gl-pb-5',
       'gl-border-b-1',
       'gl-border-b-solid',
-      'gl-border-gray-100',
+      'gl-border-default',
     ].join(' '),
     tableHeaderClasses: commonTableClasses.join(' '),
     tableRowClasses: [

app/assets/javascripts/user_lists/components/user_list_form.vue

@@ -35,7 +35,7 @@ export default {
       'gl-justify-between',
       'gl-px-4',
       'gl-border-t-solid',
-      'gl-border-gray-100',
+      'gl-border-default',
       'gl-border-1',
       'gl-bg-gray-10',
     ],

app/assets/javascripts/user_lists/components/user_lists_table.vue

@@ -77,7 +77,7 @@ export default {
       v-for="list in userLists"
       :key="list.id"
       data-testid="ffUserList"
-      class="gl-flex gl-w-full gl-justify-between gl-border-b-1 gl-border-gray-100 gl-py-4 gl-border-b-solid"
+      class="gl-flex gl-w-full gl-justify-between gl-border-b-1 gl-border-default gl-py-4 gl-border-b-solid"
     >
       <div class="gl-flex gl-grow gl-flex-col">
         <span data-testid="ffUserListName" class="gl-mb-2 gl-font-bold">

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue

@@ -196,7 +196,7 @@ export default {
 <template>
   <div
     class="alert-assignees gl-w-7/10 gl-py-5"
-    :class="{ 'gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid': !sidebarCollapsed }"
+    :class="{ 'gl-border-b-1 gl-border-b-default gl-border-b-solid': !sidebarCollapsed }"
   >
     <template v-if="sidebarCollapsed">
       <div

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_header.vue

@@ -25,7 +25,7 @@ export default {
 </script>
 
 <template>
-  <div class="block gl-flex gl-justify-between !gl-border-b-gray-100">
+  <div class="block gl-flex gl-justify-between !gl-border-b-default">
     <sidebar-todo
       v-if="!sidebarCollapsed"
       :project-path="projectPath"

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue

@@ -77,7 +77,7 @@ export default {
 <template>
   <div
     class="alert-status gl-py-5"
-    :class="{ 'gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid': !sidebarCollapsed }"
+    :class="{ 'gl-border-b-1 gl-border-b-default gl-border-b-solid': !sidebarCollapsed }"
   >
     <template v-if="sidebarCollapsed">
       <div ref="status" class="gl-ml-6" data-testid="status-icon" @click="$emit('toggle-sidebar')">

app/assets/javascripts/vue_shared/alert_details/components/system_notes/system_note.vue

@@ -40,7 +40,7 @@ export default {
   >
     <div class="gl-relative gl-inline-flex gl-items-center">
       <div
-        class="gl-box-sizing-content-box -gl-mt-2 gl-mr-6 gl-inline gl-rounded-full gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-white gl-p-3 gl-text-gray-200"
+        class="gl-box-sizing-content-box -gl-mt-2 gl-mr-6 gl-inline gl-rounded-full gl-border-1 gl-border-solid gl-border-default gl-bg-white gl-p-3 gl-text-gray-200"
       >
         <gl-icon :name="note.systemNoteIconName" />
       </div>

app/assets/javascripts/vue_shared/components/paginated_table_with_search_and_tabs/constants.js

@@ -1,6 +1,6 @@
 export const tdClass = 'table-col gl-flex d-md-table-cell gl-items-center gl-whitespace-nowrap';
 export const bodyTrClass =
-  'gl-border-1 gl-border-t-solid gl-border-gray-100 hover:gl-cursor-pointer hover:gl-bg-gray-50 hover:gl-border-b-solid';
+  'gl-border-1 gl-border-t-solid gl-border-default hover:gl-cursor-pointer hover:gl-bg-gray-50 hover:gl-border-b-solid';
 
 export const defaultPageSize = 20;
 

app/assets/javascripts/vue_shared/components/registry/details_row.vue

@@ -24,7 +24,7 @@ export default {
   },
   computed: {
     borderClass() {
-      return this.dashed ? 'gl-border-b-solid gl-border-gray-100 gl-border-b-1' : '';
+      return this.dashed ? 'gl-border-b-solid gl-border-default gl-border-b-1' : '';
     },
   },
 };

app/assets/javascripts/vue_shared/components/registry/list_item.vue

@@ -35,8 +35,8 @@ export default {
     optionalClasses() {
       return {
         'gl-border-t-transparent': !this.first && !this.selected,
-        'gl-border-t-gray-100': this.first && !this.selected,
-        'gl-border-b-gray-100': !this.selected,
+        'gl-border-t-default': this.first && !this.selected,
+        'gl-border-b-default': !this.selected,
         '!gl-border-t-transparent': this.selected && !this.first,
         'gl-bg-blue-50 gl-border-blue-200': this.selected,
       };
@@ -150,7 +150,7 @@ export default {
           :key="detailIndex"
           class="gl-px-5 gl-py-2"
           :class="{
-            'gl-border-t-1 gl-border-gray-100 gl-border-t-solid': detailIndex !== 0,
+            'gl-border-t-1 gl-border-default gl-border-t-solid': detailIndex !== 0,
           }"
         >
           <slot :name="row"></slot>

app/assets/javascripts/vue_shared/components/settings/settings_block.vue

@@ -79,17 +79,19 @@ export default {
         </gl-button>
       </div>
       <div class="gl-grow">
-        <h2
-          role="button"
+        <button
+          class="gl-w-full gl-border-0 gl-bg-transparent gl-p-0 gl-text-left"
           tabindex="-1"
-          class="gl-heading-2 !gl-mb-2 gl-cursor-pointer"
+          type="button"
           :aria-expanded="ariaExpanded"
           :aria-controls="collapseId"
           data-testid="settings-block-title"
           @click="toggleExpanded"
         >
-          {{ title }}
-        </h2>
+          <h2 class="gl-heading-2 !gl-mb-2">
+            {{ title }}
+          </h2>
+        </button>
         <p class="gl-m-0 gl-text-subtle"><slot name="description"></slot></p>
       </div>
     </div>

app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue

@@ -31,7 +31,7 @@ export default {
           :href="`#${panel.name}`"
           data-testid="panel-link"
           :data-qa-panel-name="panel.name"
-          class="new-namespace-panel gl-flex gl-w-full gl-shrink-0 gl-flex-col gl-items-center gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-px-3 gl-py-6 hover:!gl-no-underline lg:gl-flex-row"
+          class="new-namespace-panel gl-flex gl-w-full gl-shrink-0 gl-flex-col gl-items-center gl-rounded-base gl-border-1 gl-border-solid gl-border-default gl-px-3 gl-py-6 hover:!gl-no-underline lg:gl-flex-row"
           @click="track('click_tab', { label: panel.name })"
         >
           <div class="new-namespace-panel-illustration gl-flex gl-shrink-0 gl-justify-center">

app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue

@@ -138,7 +138,7 @@ export default {
   <div>
     <div class="top-bar-fixed container-fluid" data-testid="top-bar">
       <div
-        class="top-bar-container gl-flex gl-items-center gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"
+        class="top-bar-container gl-flex gl-items-center gl-border-b-1 gl-border-b-default gl-border-b-solid"
       >
         <super-sidebar-toggle
           v-if="showSuperSidebarToggle"

app/assets/javascripts/whats_new/components/feature.vue

@@ -32,7 +32,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-border-b-1 gl-border-b-gray-100 gl-px-6 gl-py-6 gl-border-b-solid">
+  <div class="gl-border-b-1 gl-border-b-default gl-px-6 gl-py-6 gl-border-b-solid">
     <gl-link
       v-if="feature.image_url"
       :href="feature.documentation_link"

app/assets/stylesheets/framework/super_sidebar.scss

@@ -30,7 +30,7 @@ $command-palette-spacing: px-to-rem(14px);
 
   --super-sidebar-user-bar-button-bg: var(--gl-background-color-subtle);
   --super-sidebar-user-bar-button-color: var(--gl-text-color-default);
-  --super-sidebar-user-bar-button-border-color: var(--gl-color-alpha-dark-8);
+  --super-sidebar-user-bar-button-border-color: var(--gl-color-alpha-dark-16);
   --super-sidebar-user-bar-button-hover-bg: var(--gl-color-alpha-dark-8);
   --super-sidebar-user-bar-button-hover-color: var(--gl-text-color-default);
   --super-sidebar-user-bar-button-active-bg: var(--gl-color-alpha-dark-16);
@@ -46,7 +46,7 @@ $command-palette-spacing: px-to-rem(14px);
     --super-sidebar-user-bar-bg: var(--gl-color-alpha-light-4);
 
     --super-sidebar-user-bar-button-bg: var(--gl-color-alpha-light-16);
-    --super-sidebar-user-bar-button-border-color: var(--gl-color-alpha-light-16);
+    --super-sidebar-user-bar-button-border-color: transparent;
     --super-sidebar-user-bar-button-hover-bg: var(--gl-color-alpha-light-24);
     --super-sidebar-user-bar-button-active-bg: var(--gl-color-alpha-light-36);
 
@@ -73,7 +73,7 @@ $command-palette-spacing: px-to-rem(14px);
 
     --super-sidebar-user-bar-button-bg: var(--gl-color-alpha-light-16);
     --super-sidebar-user-bar-button-color: #{$user-bar-button-color};
-    --super-sidebar-user-bar-button-border-color: var(--gl-color-alpha-light-16);
+    --super-sidebar-user-bar-button-border-color: transparent;
     --super-sidebar-user-bar-button-hover-bg: var(--gl-color-alpha-light-24);
     --super-sidebar-user-bar-button-hover-color: #{$user-bar-button-color};
     --super-sidebar-user-bar-button-active-bg: var(--gl-color-alpha-light-36);
@@ -294,6 +294,8 @@ $command-palette-spacing: px-to-rem(14px);
     }
 
     .organization-switcher-button {
+      border: 0 !important;
+
       &:not(:active),
       &:not(:hover),
       &:not(:focus) {
@@ -351,7 +353,7 @@ $command-palette-spacing: px-to-rem(14px);
 
     .user-bar-button {
       background-color: var(--super-sidebar-user-bar-button-bg);
-      border-color: var(--super-sidebar-user-bar-button-border-color);
+      border: 1px solid var(--super-sidebar-user-bar-button-border-color);
 
       &[aria-expanded='true'] {
         background-color: var(--super-sidebar-user-bar-button-hover-bg);

app/views/explore/projects/topic.html.haml

@@ -20,7 +20,7 @@
         = markdown(@topic.description)
 
 %div{ class: container_class }
-  .gl-py-5.gl-border-gray-100.gl-border-b-solid.gl-border-b-1
+  .gl-py-5.gl-border-default.gl-border-b-solid.gl-border-b-1
     %h3.gl-m-0= _('Projects with this topic')
   .top-area.gl-pt-2.gl-pb-2.gl-justify-between
     .nav-controls

app/views/groups/_import_group_from_another_instance_panel.html.haml

@@ -1,7 +1,7 @@
 - bulk_imports_enabled = Gitlab::CurrentSettings.bulk_import_enabled? || Feature.enabled?(:override_bulk_import_disabled, current_user, type: :ops)
 
 = gitlab_ui_form_with url: configure_import_bulk_imports_path(namespace_id: params[:parent_id]), class: 'gl-show-field-errors' do |f|
-  .gl-border-l-solid.gl-border-r-solid.gl-border-t-solid.gl-border-gray-100.gl-border-1.gl-p-5.gl-mt-4
+  .gl-border-l-solid.gl-border-r-solid.gl-border-t-solid.gl-border-default.gl-border-1.gl-p-5.gl-mt-4
     .gl-flex.gl-items-center.gl-justify-between
       %h4.gl-flex
         = s_('GroupsNew|Import groups by direct transfer')
@@ -53,5 +53,5 @@
         title: s_('GroupsNew|Please fill in your personal access token.'),
         id: 'import_gitlab_token',
         data: { testid: 'import-gitlab-token' }
-  .gl-border-gray-100.gl-border-solid.gl-border-1.gl-bg-gray-10.gl-p-5
+  .gl-border-default.gl-border-solid.gl-border-1.gl-bg-gray-10.gl-p-5
     = f.submit s_('GroupsNew|Connect instance'), disabled: !bulk_imports_enabled, pajamas_button: true, data: { testid: 'connect-instance-button' }

app/views/groups/_import_group_from_file_panel.html.haml

@@ -3,7 +3,7 @@
 - group_path << parent.full_path + '/' if parent
 
 = gitlab_ui_form_for '', url: import_gitlab_group_path, namespace: 'import_group', class: 'group-form gl-show-field-errors', multipart: true do |f|
-  .gl-border-l-solid.gl-border-r-solid.gl-border-gray-100.gl-border-1.gl-p-5
+  .gl-border-l-solid.gl-border-r-solid.gl-border-default.gl-border-1.gl-p-5
     %h4
       = _('Import group from file')
     = render Pajamas::AlertComponent.new(variant: :warning,
@@ -21,5 +21,5 @@
         = s_('GroupsNew|To import a group, navigate to the group settings for the GitLab source instance, %{link_start}generate an export file%{link_end}, and upload it here.').html_safe % { link_start: import_export_link_start, link_end: '</a>'.html_safe }
       .gl-mt-3
         = render 'shared/file_picker_button', f: f, field: :file, help_text: nil
-  .gl-border-gray-100.gl-border-solid.gl-border-1.gl-bg-gray-10.gl-p-5
+  .gl-border-default.gl-border-solid.gl-border-1.gl-bg-gray-10.gl-p-5
     = f.submit _('Import'), pajamas_button: true

app/views/groups/new.html.haml

@@ -17,5 +17,5 @@
 
     #import-group-pane.tab-pane
       = render 'import_group_from_another_instance_panel'
-      .gl-mt-7.gl-border-b-solid.gl-border-gray-100.gl-border-1
+      .gl-mt-7.gl-border-b-solid.gl-border-default.gl-border-1
       = render 'import_group_from_file_panel'

app/views/groups/settings/_advanced.html.haml

@@ -3,7 +3,7 @@
 .gl-flex.gl-gap-5.gl-flex-col
   = render 'groups/settings/export', group: @group
 
-  = render Pajamas::CardComponent.new(header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-gray-100' }, body_options: { class: 'gl-px-5 gl-py-4' }) do |c|
+  = render Pajamas::CardComponent.new(header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-default' }, body_options: { class: 'gl-px-5 gl-py-4' }) do |c|
     - c.with_header do
       .gl-flex.gl-grow
         %h4.gl-text-base.gl-leading-24.gl-m-0= s_('GroupSettings|Change group URL')

app/views/groups/settings/_transfer.html.haml

@@ -1,7 +1,7 @@
 - form_id = "transfer-group-form"
 - initial_data = { button_text: s_('GroupSettings|Transfer group'), group_full_path: @group.full_path, group_name: @group.name, group_id: @group.id, target_form_id: form_id, is_paid_group: group.paid?.to_s }
 
-= render Pajamas::CardComponent.new(card_options: { data: { testid: 'transfer-group-content' } }, header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-gray-100' }, body_options: { class: 'gl-px-5 gl-py-4' }) do |c|
+= render Pajamas::CardComponent.new(card_options: { data: { testid: 'transfer-group-content' } }, header_options: { class: 'gl-px-5 gl-py-4 gl-border-b-1 gl-border-b-solid gl-border-default' }, body_options: { class: 'gl-px-5 gl-py-4' }) do |c|
   - c.with_header do
     .gl-flex.gl-grow
       %h4.gl-text-base.gl-leading-24.gl-m-0= s_('GroupSettings|Transfer group')

app/views/import/github/new.html.haml

@@ -3,7 +3,7 @@
 - header_title _("New project"), new_project_path
 - add_to_breadcrumbs s_('ProjectsNew|Import project'), new_project_path(anchor: 'import_project')
 
-.gl-border-solid.gl-border-gray-100.gl-border-0.gl-border-b-1
+.gl-border-solid.gl-border-default.gl-border-0.gl-border-b-1
   %h1.gl-text-size-h1.gl-my-0.gl-py-4.gl-flex.gl-items-center.gl-gap-3
     = sprite_icon('github', size: 24)
     %span= title

app/views/import/github/status.html.haml

@@ -1,7 +1,7 @@
 - title = has_ci_cd_only_params? ? _('Connect repositories from GitHub') : _('GitHub import')
 - page_title title
 
-.gl-border-solid.gl-border-gray-100.gl-border-0.gl-border-b-1
+.gl-border-solid.gl-border-default.gl-border-0.gl-border-b-1
   %h1.gl-text-size-h1.gl-my-0.gl-py-4.gl-flex.gl-items-center.gl-gap-3
     = sprite_icon('github', size: 24)
     %span= _('Import repositories from GitHub')

app/views/projects/blame/show.html.haml

@@ -42,7 +42,7 @@
           #blame-stream-container.blame-stream-container
 
     - if @blame_mode.pagination? && @blame_pagination.total_pages > 1
-      .gl-flex.gl-justify-center.gl-flex-col.gl-items-center.gl-p-3.gl-bg-gray-50.gl-border-t-solid.gl-border-t-1.gl-border-gray-100
+      .gl-flex.gl-justify-center.gl-flex-col.gl-items-center.gl-p-3.gl-bg-gray-50.gl-border-t-solid.gl-border-t-1.gl-border-default
         = render Pajamas::ButtonComponent.new(href: entire_blame_path(@id, @project), size: :small, button_options: { class: 'gl-mt-3' }) do |c|
           = _('Show full blame')
 

app/views/projects/issues/_design_management.html.haml

@@ -15,5 +15,5 @@
     sign_in_path: new_session_path(:user, redirect_to_referer: 'yes'),
     new_comment_template_paths: new_comment_template_paths(@project.group, @project).to_json } }
 - else
-  .gl-border-solid.gl-border-1.gl-border-gray-100.gl-rounded-base.gl-mt-5.gl-p-3.gl-text-center
+  .gl-border-solid.gl-border-1.gl-border-default.gl-rounded-base.gl-mt-5.gl-p-3.gl-text-center
     = enable_lfs_message

app/views/shared/_divider.html.haml

@@ -1,4 +1,4 @@
 .gl-flex.gl-items-center.gl-gap-5{ data: { testid: 'divider' } }
-  %hr.gl-grow.gl-border-gray-100
+  %hr.gl-grow.gl-border-default
   = local_assigns[:text]
-  %hr.gl-grow.gl-border-gray-100
+  %hr.gl-grow.gl-border-default

app/views/shared/_md_preview.html.haml

@@ -9,7 +9,7 @@
       = _('Only project members can comment.')
 
 .md-area.position-relative
-  .md-header.gl-px-3.gl-rounded-t-base.gl-border-b.gl-border-gray-100
+  .md-header.gl-px-3.gl-rounded-t-base.gl-border-b.gl-border-default
     .gl-flex.gl-items-top.gl-flex-nowrap.gl-justify-between
       .md-header-toolbar.gl-flex.gl-py-3.gl-flex-wrap.gl-gap-y-3
         = render Pajamas::ButtonComponent.new(category: :tertiary, size: :small, button_options: { class: 'js-md-preview-button', value: 'preview' }) do