diff --git a/app/assets/javascripts/analytics/cycle_analytics/components/path_navigation.vue b/app/assets/javascripts/analytics/cycle_analytics/components/path_navigation.vue
index 2d666f5a35f83f730fdc31199adff8201cd3e833..2593da5ec3734021ff46cbaacd9e55e70e66a276 100644
--- a/app/assets/javascripts/analytics/cycle_analytics/components/path_navigation.vue
+++ b/app/assets/javascripts/analytics/cycle_analytics/components/path_navigation.vue
@@ -87,7 +87,7 @@ export default {
{{ s__('ValueStreamEvent|Only items that reached their stop event.') }}
</div>
</div>
- <div class="gl-border-t-1 gl-border-gray-50 gl-px-4 gl-pt-4 gl-border-t-solid">
+ <div class="gl-border-t-1 gl-border-subtle gl-px-4 gl-pt-4 gl-border-t-solid">
<div v-if="pathItem.startEventHtmlDescription" class="gl-flex gl-flex-row">
<div class="metric-label gl-flex gl-flex-col gl-pb-3 gl-pr-4">
{{ s__('ValueStreamEvent|Start') }}
diff --git a/app/assets/javascripts/boards/components/board_card_loading_skeleton.vue b/app/assets/javascripts/boards/components/board_card_loading_skeleton.vue
index 927710fc66beb3220aa11cf602e562d86a76bda0..19be59cdb5c048cef4f77aaec64345f0375d859d 100644
--- a/app/assets/javascripts/boards/components/board_card_loading_skeleton.vue
+++ b/app/assets/javascripts/boards/components/board_card_loading_skeleton.vue
@@ -11,7 +11,7 @@ export default {
<template>
<div
- class="board-card-skeleton gl-mb-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-50 gl-bg-white gl-p-5"
+ class="board-card-skeleton gl-mb-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-subtle gl-bg-white gl-p-5"
>
<div class="board-card-skeleton-inner">
<gl-skeleton-loader :width="340" :height="100">
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar.vue b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar.vue
index abd4bc18e05e131b13d69457a2a67605e74dcb8f..ae42e3a75d820bd374f7bbab91867c9b2e17979a 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar.vue
@@ -95,36 +95,36 @@ export default {
@updateVariables="$emit('updateVariables')"
/>
- <job-sidebar-details-container class="gl-border-b gl-border-gray-50 gl-py-4" />
+ <job-sidebar-details-container class="gl-border-b gl-border-subtle gl-py-4" />
<artifacts-block
v-if="hasArtifact"
- class="gl-border-b gl-border-gray-50 gl-py-4"
+ class="gl-border-b gl-border-subtle gl-py-4"
:artifact="artifact"
:help-url="artifactHelpUrl"
/>
<external-links-block
v-if="hasExternalLinks"
- class="gl-border-b gl-border-gray-50 gl-py-4"
+ class="gl-border-b gl-border-subtle gl-py-4"
:external-links="externalLinks"
/>
<trigger-block
v-if="hasTriggers"
- class="gl-border-b gl-border-gray-50 gl-py-4"
+ class="gl-border-b gl-border-subtle gl-py-4"
:trigger="job.trigger"
/>
<commit-block
- class="gl-border-b gl-border-gray-50 gl-py-4"
+ class="gl-border-b gl-border-subtle gl-py-4"
:commit="commit"
:merge-request="job.merge_request"
/>
<stages-dropdown
v-if="job.pipeline"
- class="gl-border-b gl-border-gray-50 gl-py-4"
+ class="gl-border-b gl-border-subtle gl-py-4"
:pipeline="job.pipeline"
:selected-stage="selectedStage"
:stages="stages"
diff --git a/app/assets/javascripts/issuable/components/csv_export_modal.vue b/app/assets/javascripts/issuable/components/csv_export_modal.vue
index 8c3d3cbfdf7acd245188d20a7b2dacb19f1726da..e793dad90cfab7731203d9a52eaca1fb28259810 100644
--- a/app/assets/javascripts/issuable/components/csv_export_modal.vue
+++ b/app/assets/javascripts/issuable/components/csv_export_modal.vue
@@ -81,7 +81,7 @@ export default {
data-testid="export-issuable-modal"
>
<div
- class="gl-items-center gl-justify-start gl-border-1 gl-border-gray-50 gl-p-4 gl-border-b-solid"
+ class="gl-items-center gl-justify-start gl-border-1 gl-border-subtle gl-p-4 gl-border-b-solid"
>
<gl-icon name="check" class="gl-color-green-400" />
<strong class="gl-m-3">{{ issuableCountText }}</strong>
diff --git a/app/assets/javascripts/issues/show/components/incidents/create_timeline_event.vue b/app/assets/javascripts/issues/show/components/incidents/create_timeline_event.vue
index 5f059b2591c46680c2b1188b50242e7403eb5c34..32887391eca2a0c970db4d5976efe81b1fc7d21b 100644
--- a/app/assets/javascripts/issues/show/components/incidents/create_timeline_event.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/create_timeline_event.vue
@@ -116,7 +116,7 @@ export default {
</div>
<timeline-events-form
ref="eventForm"
- :class="{ 'gl-border-t gl-border-gray-50 gl-pt-3': hasTimelineEvents }"
+ :class="{ 'gl-border-t gl-border-subtle gl-pt-3': hasTimelineEvents }"
:is-event-processed="createTimelineEventActive"
show-save-and-add
@save-event="createIncidentTimelineEvent"
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
index c533d06c235bb452aff0174e5526783e06e41e70..15c0a55ff7f1d0cd1ada083e7ad7a45921e92c54 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
@@ -173,7 +173,7 @@ export default {
</script>
<template>
- <form class="gl-grow gl-border-gray-50">
+ <form class="gl-grow gl-border-subtle">
<div class="gl-mt-3 gl-flex gl-flex-col sm:gl-flex-row">
<gl-form-group :label="__('Date')" class="gl-mr-5">
<gl-datepicker id="incident-date" ref="datepicker" v-model="datePickerInput" />
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue
index 1d0ed053a00f2edc4516edbd607375229ac4a439..d70d94e0ae8ada1035e48e934d21a1d4c229ef1e 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue
@@ -138,7 +138,7 @@ export default {
class="timeline-group"
>
<h2
- class="gl-my-0 gl-border-1 gl-border-gray-50 gl-py-5 gl-text-size-h2 gl-border-b-solid"
+ class="gl-my-0 gl-border-1 gl-border-subtle gl-py-5 gl-text-size-h2 gl-border-b-solid"
data-testid="event-date"
>
{{ eventDate }}
diff --git a/app/assets/javascripts/pages/dashboard/todos/index/todos.js b/app/assets/javascripts/pages/dashboard/todos/index/todos.js
index aed3e332724e629a08ee74e29a1743e30b18d174..e13dbff3980b48356934ca0d721ac9472e7e5885 100644
--- a/app/assets/javascripts/pages/dashboard/todos/index/todos.js
+++ b/app/assets/javascripts/pages/dashboard/todos/index/todos.js
@@ -138,10 +138,10 @@ export default class Todos {
restoreBtn.classList.add('hidden');
doneBtn.classList.remove('hidden');
} else if (target === doneBtn) {
- row.classList.add('done-reversible', 'gl-bg-gray-10', 'gl-border-gray-50');
+ row.classList.add('done-reversible', 'gl-bg-gray-10', 'gl-border-subtle');
restoreBtn.classList.remove('hidden');
} else if (target === restoreBtn) {
- row.classList.remove('done-reversible', 'gl-bg-gray-10', 'gl-border-gray-50');
+ row.classList.remove('done-reversible', 'gl-bg-gray-10', 'gl-border-subtle');
doneBtn.classList.remove('hidden');
} else {
row.parentNode.removeChild(row);
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index f18871561f6292314bfada9fe7505b402fad7587..f831cdc9a7cede135bb7009769fe87505f327ef7 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -158,7 +158,7 @@ export default {
iconBgClass,
{
'system-note-icon -gl-mt-1 gl-ml-2 gl-h-6 gl-w-6': isAllowedIcon,
- 'system-note-dot -gl-top-1 gl-ml-4 gl-mt-3 gl-h-3 gl-w-3 gl-border-2 gl-border-solid gl-border-gray-50 gl-bg-gray-900':
+ 'system-note-dot -gl-top-1 gl-ml-4 gl-mt-3 gl-h-3 gl-w-3 gl-border-2 gl-border-solid gl-border-subtle gl-bg-gray-900':
!isAllowedIcon,
},
]"
diff --git a/app/assets/javascripts/work_items/components/notes/system_note.vue b/app/assets/javascripts/work_items/components/notes/system_note.vue
index a3dd19fd73bbdabd71f26c0e1c98c0dd2dd978fe..0f4c8732636ac0828b3cfa0806d901cc9ca351cb 100644
--- a/app/assets/javascripts/work_items/components/notes/system_note.vue
+++ b/app/assets/javascripts/work_items/components/notes/system_note.vue
@@ -126,7 +126,7 @@ export default {
getIconColor,
{
'system-note-icon -gl-mt-1 gl-ml-2 gl-h-6 gl-w-6': isAllowedIcon,
- 'system-note-dot -gl-top-1 gl-ml-4 gl-mt-3 gl-h-3 gl-w-3 gl-border-2 gl-border-solid gl-border-gray-50 gl-bg-gray-900':
+ 'system-note-dot -gl-top-1 gl-ml-4 gl-mt-3 gl-h-3 gl-w-3 gl-border-2 gl-border-solid gl-border-subtle gl-bg-gray-900':
!isAllowedIcon,
},
]"
diff --git a/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue b/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue
index e84d41c9fb032723b7645c7d9176c9f9dae2b15b..4069ecab502815441088e9790b6f79fa0dfe16c1 100644
--- a/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue
+++ b/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue
@@ -340,7 +340,7 @@ export default {
/>
<template v-if="workItemCrmContacts">
<work-item-crm-contacts
- class="gl-border-t gl-mb-5 gl-border-gray-50 gl-pt-5"
+ class="gl-border-t gl-mb-5 gl-border-subtle gl-pt-5"
:full-path="fullPath"
:work-item-id="workItem.id"
:work-item-iid="workItem.iid"
diff --git a/app/assets/stylesheets/page_bundles/incidents.scss b/app/assets/stylesheets/page_bundles/incidents.scss
index c83019d3368de8b4123e6228c33b3e114d49efcb..633648ba18dc686bfff8db722c7f0ac4591cad40 100644
--- a/app/assets/stylesheets/page_bundles/incidents.scss
+++ b/app/assets/stylesheets/page_bundles/incidents.scss
@@ -83,7 +83,7 @@
&::after {
content: '';
position: absolute;
- @apply gl-border-gray-50;
+ @apply gl-border-subtle;
@apply gl-border-1;
@apply gl-border-b-solid;
// Border spans the whole container minus icon width and grid gap
diff --git a/app/views/dashboard/todos/_todo.html.haml b/app/views/dashboard/todos/_todo.html.haml
index 11cb63e975973fdae5a73ae5000f0e0094dc4cdd..4b40697bde74ddfd014d9c5c6c5c6a617c4793a0 100644
--- a/app/views/dashboard/todos/_todo.html.haml
+++ b/app/views/dashboard/todos/_todo.html.haml
@@ -1,4 +1,4 @@
-%li.todo.gl-border-t.gl-border-gray-50.hover:gl-border-blue-200.hover:gl-bg-blue-50.hover:gl-cursor-pointer.gl-relative{ class: "hover:gl-z-1 todo-#{todo.done? ? 'done' : 'pending'}", id: dom_id(todo) }
+%li.todo.gl-border-t.gl-border-subtle.hover:gl-border-blue-200.hover:gl-bg-blue-50.hover:gl-cursor-pointer.gl-relative{ class: "hover:gl-z-1 todo-#{todo.done? ? 'done' : 'pending'}", id: dom_id(todo) }
.gl-flex.gl-flex-col.sm:gl-flex-row.sm:gl-items-center
.todo-item.gl-overflow-hidden.gl-overflow-x-auto.gl-self-center.gl-w-full{ data: { testid: "todo-item-container" } }
.todo-title.gl-pt-2.gl-pb-3.gl-px-2.gl-md-mb-1.gl-text-sm.gl-text-subtle
diff --git a/ee/app/assets/javascripts/analytics/analytics_dashboards/components/dashboards_list.vue b/ee/app/assets/javascripts/analytics/analytics_dashboards/components/dashboards_list.vue
index e26d386276a83e334db8931c83558e20391a23ba..c8dd684eacb4fcf5c85f5ea7269ed5ec38d51f87 100644
--- a/ee/app/assets/javascripts/analytics/analytics_dashboards/components/dashboards_list.vue
+++ b/ee/app/assets/javascripts/analytics/analytics_dashboards/components/dashboards_list.vue
@@ -289,7 +289,7 @@ export default {
)
}}</gl-alert
>
- <ul class="content-list gl-border-t gl-border-gray-50">
+ <ul class="content-list gl-border-t gl-border-subtle">
<component
:is="setupComponent"
v-for="(setupComponent, feature) in activeOnboardingComponents"
diff --git a/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue b/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue
index 687a3e15faf1357abbc8231435dee6f6a62c0356..51491795c3ba57bc92ab29064858f33d6493de61 100644
--- a/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue
+++ b/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue
@@ -319,7 +319,7 @@ export default {
@cancel="hideEditor"
/>
</div>
- <ul class="content-list gl-border-t gl-border-gray-50" data-testid="stream-destinations">
+ <ul class="content-list gl-border-t gl-border-subtle" data-testid="stream-destinations">
<stream-item
v-for="item in externalAuditEventDestinations"
:key="item.id"
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue b/ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue
index fadc480cd0c82240214066c9622c93d9121b6466..515b941c857285e2896b15100c9ab1a6d40ab55c 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue
@@ -198,7 +198,7 @@ export default {
:action-buttons="actionButtons"
icon-name="comment"
icon-class="timeline-icon m-0"
- class="gl-border-t gl-border-gray-50 gl-p-5"
+ class="gl-border-t gl-border-subtle gl-p-5"
>
<div v-safe-html="noteHtml" class="md">
<gl-loading-icon size="sm" />