diff --git a/app/assets/javascripts/issues/create_merge_request_dropdown.js b/app/assets/javascripts/issues/create_merge_request_dropdown.js
index 614e076ec5a92a3db17a8d7ea061d2ee5054baeb..3675cd5a1bb3a4b1472d55a9f59fafade6dc4d2e 100644
--- a/app/assets/javascripts/issues/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/issues/create_merge_request_dropdown.js
@@ -497,7 +497,7 @@ export default class CreateMergeRequestDropdown {
removeMessage(target) {
const { input, message } = this.getTargetData(target);
const inputClasses = ['gl-field-error-outline', 'gl-field-success-outline'];
- const messageClasses = ['gl-text-subtle', 'gl-text-red-500', 'gl-text-green-500'];
+ const messageClasses = ['gl-text-subtle', 'gl-text-red-500', 'gl-text-success'];
inputClasses.forEach((cssClass) => input.classList.remove(cssClass));
messageClasses.forEach((cssClass) => message.classList.remove(cssClass));
@@ -520,7 +520,7 @@ export default class CreateMergeRequestDropdown {
this.removeMessage(target);
input.classList.add('gl-field-success-outline');
- message.classList.add('gl-text-green-500');
+ message.classList.add('gl-text-success');
message.textContent = sprintf(__('%{text} is available'), { text });
message.style.display = 'inline-block';
}
diff --git a/app/helpers/ci/runners_helper.rb b/app/helpers/ci/runners_helper.rb
index 5dca6eb1e65bb8cb524daefe9f8f14584ac6453a..f651d254411171a8059a97582e3c647d00a87c9e 100644
--- a/app/helpers/ci/runners_helper.rb
+++ b/app/helpers/ci/runners_helper.rb
@@ -16,7 +16,7 @@ def runner_status_icon(runner, size: 16, icon_class: '')
when :online
title = s_("Runners|Runner is online; last contact was %{runner_contact} ago") % { runner_contact: time_ago_in_words(contacted_at) }
icon = 'status-active'
- span_class = 'gl-text-green-500'
+ span_class = 'gl-text-success'
when :never_contacted
title = s_("Runners|Runner has never contacted this instance")
icon = 'warning-solid'
diff --git a/ee/app/assets/javascripts/analytics/dashboards/components/trend_indicator.vue b/ee/app/assets/javascripts/analytics/dashboards/components/trend_indicator.vue
index 629034a9d9f23d118df25b058a7fef3caaabe59a..b5df531067805e366dd3ffb5fc4af37d59c0eeaa 100644
--- a/ee/app/assets/javascripts/analytics/dashboards/components/trend_indicator.vue
+++ b/ee/app/assets/javascripts/analytics/dashboards/components/trend_indicator.vue
@@ -27,7 +27,7 @@ export default {
return this.change > 0;
},
textColor() {
- return this.trendingUp !== this.invertColor ? 'gl-text-green-500' : 'gl-text-red-500';
+ return this.trendingUp !== this.invertColor ? 'gl-text-success' : 'gl-text-red-500';
},
iconName() {
return this.trendingUp ? 'trend-up' : 'trend-down';
diff --git a/ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_table.vue b/ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_table.vue
index b66c8892026f70176b9b2a8b12e457a990ae7ef8..c4722d52806fc95cb0d1391c6a4454c26c4d5360 100644
--- a/ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_table.vue
+++ b/ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_table.vue
@@ -309,10 +309,10 @@ export default {
</li>
<li
v-if="item.approvedBy.nodes.length"
- class="gl-text-green-500"
+ class="gl-text-success"
:data-testid="$options.testIds.APPROVED"
>
- <gl-icon name="approval" class="gl-mr-2" /><span>{{
+ <gl-icon name="approval" class="gl-mr-2" variant="success" /><span>{{
formatApprovalText(item.approvedBy.nodes.length)
}}</span>
</li>
@@ -349,7 +349,7 @@ export default {
<template #cell(line_changes)="{ item }">
<div :data-testid="$options.testIds.LINE_CHANGES">
- <span class="gl-font-bold gl-text-green-500">{{
+ <span class="gl-font-bold gl-text-success">{{
formatLineChangeAdditions(item.diffStatsSummary.additions)
}}</span>
<span class="gl-font-bold gl-text-red-500">{{
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/base_table.vue b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/base_table.vue
index d6a777181aebeae2b759c1cbef778d86c55a1451..bf55d13445bfe2780757fe8a63ad57db577ebdce 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/base_table.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/base_table.vue
@@ -297,8 +297,8 @@ export default {
<span v-if="isFailedStatus(status)" class="gl-text-red-500">
<gl-icon name="status_failed" /> {{ __('Fail') }}
</span>
- <span v-else class="gl-text-green-500">
- <gl-icon name="status_success" /> {{ __('Success') }}
+ <span v-else class="gl-text-success">
+ <gl-icon name="status_success" variant="success" /> {{ __('Success') }}
</span>
</template>
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/fix_suggestions_sidebar.vue b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/fix_suggestions_sidebar.vue
index d2f98716ca4436e213c2274be9fb61f222be27a1..ea0c3ee5c405800b7d98f792f56ecf031669f3f1 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/fix_suggestions_sidebar.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/fix_suggestions_sidebar.vue
@@ -109,8 +109,8 @@ export default {
<span v-if="isFailedStatus" class="gl-font-bold gl-text-red-500">
<gl-icon name="status_failed" /> {{ __('Fail') }}
</span>
- <span v-else class="gl-font-bold gl-text-green-500">
- <gl-icon name="status_success" /> {{ __('Success') }}
+ <span v-else class="gl-font-bold gl-text-success">
+ <gl-icon name="status_success" variant="success" /> {{ __('Success') }}
</span>
<gl-link class="gl-mx-3" :href="project.webUrl"> {{ project.name }} </gl-link>
diff --git a/ee/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue b/ee/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
index b9dcff8b9f6b2834836906560f7aa362419c5d9c..0ba34e3b7538fb662244922fcdb3422ec341538a 100644
--- a/ee/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
+++ b/ee/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
@@ -61,8 +61,13 @@ export default {
<template>
<div class="gl-mb-2">
<div class="gl-flex gl-items-center">
- <span v-if="value.completed" class="gl-text-green-500">
- <gl-icon name="check-circle-filled" :size="16" data-testid="completed-icon" />
+ <span v-if="value.completed" class="gl-text-success">
+ <gl-icon
+ name="check-circle-filled"
+ :size="16"
+ data-testid="completed-icon"
+ variant="success"
+ />
{{ actionLabelValue('title') }}
<included-in-trial-indicator v-if="actionLabelValue('trialRequired')" />
</span>
diff --git a/ee/app/assets/javascripts/password/constants.js b/ee/app/assets/javascripts/password/constants.js
index c30ced1cbfb2e78581fec08ac9c6043afeeed749..37faf95a433485b036a76afce5ac5bf556d56d27 100644
--- a/ee/app/assets/javascripts/password/constants.js
+++ b/ee/app/assets/javascripts/password/constants.js
@@ -11,7 +11,7 @@ export const INVALID_FORM_CLASS = 'show-password-complexity-errors';
export const INVALID_INPUT_CLASS = 'password-complexity-error-outline';
export const PASSWORD_REQUIREMENTS_ID = 'password-requirements';
export const RED_TEXT_CLASS = 'gl-text-red-500';
-export const GREEN_TEXT_CLASS = 'gl-text-green-500';
+export const GREEN_TEXT_CLASS = 'gl-text-success';
export const HIDDEN_ELEMENT_CLASS = 'gl-invisible';
export const I18N = {
diff --git a/ee/app/assets/javascripts/security_configuration/dast_profiles/dast_profile_selector/dast_profile_summary_card.vue b/ee/app/assets/javascripts/security_configuration/dast_profiles/dast_profile_selector/dast_profile_summary_card.vue
index f007ab92db8c616e2fc7f8a828a1f13f759e7345..973fe4f531a68f09a6862f3472bdd55e181a6086 100644
--- a/ee/app/assets/javascripts/security_configuration/dast_profiles/dast_profile_selector/dast_profile_summary_card.vue
+++ b/ee/app/assets/javascripts/security_configuration/dast_profiles/dast_profile_selector/dast_profile_summary_card.vue
@@ -72,9 +72,9 @@ export default {
v-if="isProfileInUse"
v-gl-tooltip="$options.i18n.selectedProfileTooltip"
data-testid="in-use-label"
- class="gl-pl-2 gl-text-green-500"
+ class="gl-pl-2 gl-text-success"
>
- <gl-icon name="check-circle-filled" :size="16" />
+ <gl-icon name="check-circle-filled" :size="16" variant="success" />
{{ $options.i18n.selectedProfileLabel }}
</span>
</div>
diff --git a/ee/app/assets/javascripts/security_configuration/dast_site_validation/constants.js b/ee/app/assets/javascripts/security_configuration/dast_site_validation/constants.js
index e03f6d0cd7603c11a6e8067d450608485a3b0204..029dbce915998c13205794635c401ed33c708782 100644
--- a/ee/app/assets/javascripts/security_configuration/dast_site_validation/constants.js
+++ b/ee/app/assets/javascripts/security_configuration/dast_site_validation/constants.js
@@ -57,7 +57,7 @@ export const DAST_SITE_VALIDATION_STATUS_PROPS = {
[DAST_SITE_VALIDATION_STATUS.PASSED]: {
labelText: s__('DastSiteValidation|Validated'),
name: 'status-success',
- class: 'gl-text-green-500',
+ class: 'gl-text-success',
title: s__(
'DastSiteValidation|Validation succeeded. Both active and passive scans can be run against the target site.',
),
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_status_chart.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_status_chart.vue
index 48c491e2b2ba34a93ac6c3683e2974af1b058c8b..1f1b96a286cb1649548f075bdc3e01423af2d0a3 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_status_chart.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_status_chart.vue
@@ -35,7 +35,7 @@ export default {
[SEVERITY_GROUP_D]: 'gl-text-red-700',
[SEVERITY_GROUP_C]: 'gl-text-orange-600',
[SEVERITY_GROUP_B]: 'gl-text-orange-400',
- [SEVERITY_GROUP_A]: 'gl-text-green-500',
+ [SEVERITY_GROUP_A]: 'gl-text-success',
},
severityLevels: {
[SEVERITY_LEVEL_CRITICAL]: 'gl-text-red-800',
diff --git a/ee/app/assets/javascripts/security_orchestration/components/policy_drawer/drawer_layout.vue b/ee/app/assets/javascripts/security_orchestration/components/policy_drawer/drawer_layout.vue
index e4320329393db1e3e41d6b976a2765e044ea9dd9..7277947c429c710bb15d44b00c6e22f5d1b0ddd5 100644
--- a/ee/app/assets/javascripts/security_orchestration/components/policy_drawer/drawer_layout.vue
+++ b/ee/app/assets/javascripts/security_orchestration/components/policy_drawer/drawer_layout.vue
@@ -133,8 +133,8 @@ export default {
<slot name="additional-details"></slot>
<info-row v-if="showStatus" :label="$options.i18n.statusTitle">
- <div v-if="policy.enabled" class="gl-text-green-500" data-testid="enabled-status-text">
- <gl-icon name="check-circle-filled" class="gl-mr-3" />{{ statusLabel }}
+ <div v-if="policy.enabled" class="gl-text-success" data-testid="enabled-status-text">
+ <gl-icon name="check-circle-filled" class="gl-mr-3" variant="success" />{{ statusLabel }}
</div>
<div v-else class="gl-text-subtle" data-testid="not-enabled-status-text">
{{ statusLabel }}
diff --git a/ee/app/assets/javascripts/sidebar/constants.js b/ee/app/assets/javascripts/sidebar/constants.js
index 941089667eeebf784b1a66b408a8c908caea531c..ccaa4cf48f5a666e88b7181375e1e6da7fbb17c3 100644
--- a/ee/app/assets/javascripts/sidebar/constants.js
+++ b/ee/app/assets/javascripts/sidebar/constants.js
@@ -54,7 +54,7 @@ export const healthStatusIconMap = {
};
export const healthStatusColorMap = {
- [HEALTH_STATUS_ON_TRACK]: 'gl-text-green-500',
+ [HEALTH_STATUS_ON_TRACK]: 'gl-text-success',
[HEALTH_STATUS_NEEDS_ATTENTION]: 'gl-text-orange-500',
[HEALTH_STATUS_AT_RISK]: 'gl-text-red-500',
};
diff --git a/ee/spec/features/learn_gitlab_spec.rb b/ee/spec/features/learn_gitlab_spec.rb
index 93302b166ff12a413b1b80cfc4628d07ff153fe4..80a81010d1865938a21d2a856086879a92ba2073 100644
--- a/ee/spec/features/learn_gitlab_spec.rb
+++ b/ee/spec/features/learn_gitlab_spec.rb
@@ -137,7 +137,7 @@
def expect_completed_section(text)
expect(page).to have_no_link(text)
- expect(page).to have_css('.gl-text-green-500', text: text)
+ expect(page).to have_css('.gl-text-success', text: text)
end
def expect_correct_candidate_link(link, path)
diff --git a/ee/spec/frontend/analytics/dashboards/components/trend_indicator_spec.js b/ee/spec/frontend/analytics/dashboards/components/trend_indicator_spec.js
index 2128b78b399ae0408bbd307ec6c5505788ea3f4d..af3efa975cc4d191865bdeec4dbf0dc8e3f0b1e3 100644
--- a/ee/spec/frontend/analytics/dashboards/components/trend_indicator_spec.js
+++ b/ee/spec/frontend/analytics/dashboards/components/trend_indicator_spec.js
@@ -10,7 +10,7 @@ describe('Analytics trend indicator', () => {
it('renders a positive change with green text', () => {
createComponent({ change: 100 });
- expect(wrapper.classes('gl-text-green-500')).toBe(true);
+ expect(wrapper.classes('gl-text-success')).toBe(true);
});
it('renders a negative change with red text', () => {
@@ -25,6 +25,6 @@ describe('Analytics trend indicator', () => {
it('renders a negative change with green text when invertColor = true', () => {
createComponent({ change: -100, invertColor: true });
- expect(wrapper.classes('gl-text-green-500')).toBe(true);
+ expect(wrapper.classes('gl-text-success')).toBe(true);
});
});
diff --git a/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap b/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
index ca54b4876a58f0eec002c903a8f32040b145b91a..59c072a252a4e25d826e2e2acaef84e5bcacb1d2 100644
--- a/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
+++ b/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
@@ -94,11 +94,11 @@ exports[`Learn GitLab Initial rendering concerns renders correctly 1`] = `
class="gl-flex gl-items-center"
>
<span
- class="gl-text-green-500"
+ class="gl-text-success"
>
<svg
aria-hidden="true"
- class="gl-fill-current gl-icon s16"
+ class="gl-fill-icon-success gl-icon s16"
data-testid="completed-icon"
role="img"
>
@@ -117,11 +117,11 @@ exports[`Learn GitLab Initial rendering concerns renders correctly 1`] = `
class="gl-flex gl-items-center"
>
<span
- class="gl-text-green-500"
+ class="gl-text-success"
>
<svg
aria-hidden="true"
- class="gl-fill-current gl-icon s16"
+ class="gl-fill-icon-success gl-icon s16"
data-testid="completed-icon"
role="img"
>
@@ -182,11 +182,11 @@ exports[`Learn GitLab Initial rendering concerns renders correctly 1`] = `
class="gl-flex gl-items-center"
>
<span
- class="gl-text-green-500"
+ class="gl-text-success"
>
<svg
aria-hidden="true"
- class="gl-fill-current gl-icon s16"
+ class="gl-fill-icon-success gl-icon s16"
data-testid="completed-icon"
role="img"
>
diff --git a/ee/spec/frontend/security_orchestration/components/policy_drawer/__snapshots__/drawer_layout_spec.js.snap b/ee/spec/frontend/security_orchestration/components/policy_drawer/__snapshots__/drawer_layout_spec.js.snap
index 8c147b45944e76ce102431a5e35e8beebbe80ba2..e01f8e50c2a04f3bdfbe678ead000fdf951cbaf1 100644
--- a/ee/spec/frontend/security_orchestration/components/policy_drawer/__snapshots__/drawer_layout_spec.js.snap
+++ b/ee/spec/frontend/security_orchestration/components/policy_drawer/__snapshots__/drawer_layout_spec.js.snap
@@ -40,14 +40,14 @@ exports[`DrawerLayout component enabled policy matches the snapshots 1`] = `
label="Status"
>
<div
- class="gl-text-green-500"
+ class="gl-text-success"
data-testid="enabled-status-text"
>
<gl-icon-stub
class="gl-mr-3"
name="check-circle-filled"
size="16"
- variant="current"
+ variant="success"
/>
Enabled
</div>