Commit 040875fb authored by Andrew Fontaine's avatar Andrew Fontaine

Merge branch '224119-replace-gray-400-value-replace-usages-with-gray-200' into 'master'

Replace $gray-400 value, replace usages with $gray-200

Closes #224119

See merge request gitlab-org/gitlab!37813
parents 673efa75 9cea7c68
...@@ -435,7 +435,7 @@ export default { ...@@ -435,7 +435,7 @@ export default {
data-testid="alert-settings-select" data-testid="alert-settings-select"
@change="resetFormValues" @change="resetFormValues"
/> />
<span class="gl-text-gray-400"> <span class="gl-text-gray-200">
<gl-sprintf :message="$options.i18n.integrationsInfo"> <gl-sprintf :message="$options.i18n.integrationsInfo">
<template #link="{ content }"> <template #link="{ content }">
<gl-link <gl-link
...@@ -474,7 +474,7 @@ export default { ...@@ -474,7 +474,7 @@ export default {
:placeholder="baseUrlPlaceholder" :placeholder="baseUrlPlaceholder"
:disabled="!selectedService.active" :disabled="!selectedService.active"
/> />
<span class="gl-text-gray-400"> <span class="gl-text-gray-200">
{{ $options.i18n.apiBaseUrlHelpText }} {{ $options.i18n.apiBaseUrlHelpText }}
</span> </span>
</gl-form-group> </gl-form-group>
...@@ -489,7 +489,7 @@ export default { ...@@ -489,7 +489,7 @@ export default {
/> />
</template> </template>
</gl-form-input-group> </gl-form-input-group>
<span class="gl-text-gray-400"> <span class="gl-text-gray-200">
{{ prometheusInfo }} {{ prometheusInfo }}
</span> </span>
</gl-form-group> </gl-form-group>
......
...@@ -231,7 +231,7 @@ export default { ...@@ -231,7 +231,7 @@ export default {
<gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" /> <gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" />
<small v-else class="gl-font-sm gl-font-style-italic gl-text-gray-400">{{ <small v-else class="gl-font-sm gl-font-style-italic gl-text-gray-200">{{
__('Unknown') __('Unknown')
}}</small> }}</small>
</template> </template>
......
...@@ -99,7 +99,7 @@ export default { ...@@ -99,7 +99,7 @@ export default {
<gl-sprintf v-if="errorFn" :message="__('%{spanStart}in%{spanEnd} %{errorFn}')"> <gl-sprintf v-if="errorFn" :message="__('%{spanStart}in%{spanEnd} %{errorFn}')">
<template #span="{content}"> <template #span="{content}">
<span class="gl-text-gray-400">{{ content }}&nbsp;</span> <span class="gl-text-gray-200">{{ content }}&nbsp;</span>
</template> </template>
<template #errorFn> <template #errorFn>
<strong>{{ errorFn }}&nbsp;</strong> <strong>{{ errorFn }}&nbsp;</strong>
...@@ -108,7 +108,7 @@ export default { ...@@ -108,7 +108,7 @@ export default {
<gl-sprintf :message="__('%{spanStart}at line%{spanEnd} %{errorLine}%{errorColumn}')"> <gl-sprintf :message="__('%{spanStart}at line%{spanEnd} %{errorLine}%{errorColumn}')">
<template #span="{content}"> <template #span="{content}">
<span class="gl-text-gray-400">{{ content }}&nbsp;</span> <span class="gl-text-gray-200">{{ content }}&nbsp;</span>
</template> </template>
<template #errorLine> <template #errorLine>
<strong>{{ errorLine }}</strong> <strong>{{ errorLine }}</strong>
......
...@@ -135,7 +135,7 @@ export default { ...@@ -135,7 +135,7 @@ export default {
</template> </template>
</gl-form-input-group> </gl-form-input-group>
<div class="gl-text-gray-400 gl-pt-2"> <div class="gl-text-gray-200 gl-pt-2">
<gl-sprintf :message="$options.i18n.webhookUrl.helpText"> <gl-sprintf :message="$options.i18n.webhookUrl.helpText">
<template #docsLink> <template #docsLink>
<gl-link <gl-link
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
} }
&-extra { &-extra {
background-color: $gray-400; background-color: $gray-200;
font-size: 10px; font-size: 10px;
line-height: $gl-line-height; line-height: $gl-line-height;
width: $gl-padding; width: $gl-padding;
......
...@@ -104,7 +104,7 @@ $item-remove-button-space: 42px; ...@@ -104,7 +104,7 @@ $item-remove-button-space: 42px;
.bullet-separator { .bullet-separator {
font-size: 9px; font-size: 9px;
color: $gray-400; color: $gray-200;
} }
} }
......
...@@ -20,11 +20,11 @@ ...@@ -20,11 +20,11 @@
.tui-popup-wrapper { .tui-popup-wrapper {
@include gl-overflow-hidden; @include gl-overflow-hidden;
@include gl-rounded-base; @include gl-rounded-base;
@include gl-border-gray-400; @include gl-border-gray-200;
hr { hr {
@include gl-m-0; @include gl-m-0;
@include gl-bg-gray-400; @include gl-bg-gray-200;
} }
button { button {
......
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
.hint { .hint {
font-style: italic; font-style: italic;
color: $gl-gray-400; color: $gl-gray-200;
} }
.light { color: $gl-text-color; } .light { color: $gl-text-color; }
...@@ -168,7 +168,7 @@ table { ...@@ -168,7 +168,7 @@ table {
} }
p.time { p.time {
color: $gl-gray-400; color: $gl-gray-200;
font-size: 90%; font-size: 90%;
margin: 30px 3px 3px 2px; margin: 30px 3px 3px 2px;
} }
......
...@@ -89,10 +89,10 @@ ...@@ -89,10 +89,10 @@
background-color: $gray-10; background-color: $gray-10;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: $gray-100 $gray-100 $gray-400; border-color: $gray-100 $gray-100 $gray-200;
border-image: none; border-image: none;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 -1px 0 $gray-400 inset; box-shadow: 0 -1px 0 $gray-200 inset;
} }
h1 { h1 {
......
...@@ -166,7 +166,7 @@ $gray-50: #f0f0f0 !default; ...@@ -166,7 +166,7 @@ $gray-50: #f0f0f0 !default;
$gray-100: #dbdbdb !default; $gray-100: #dbdbdb !default;
$gray-200: #bfbfbf !default; $gray-200: #bfbfbf !default;
$gray-300: #999 !default; $gray-300: #999 !default;
$gray-400: #bababa !default; $gray-400: #868686 !default;
$gray-500: #a7a7a7 !default; $gray-500: #a7a7a7 !default;
$gray-600: #919191 !default; $gray-600: #919191 !default;
$gray-700: #707070 !default; $gray-700: #707070 !default;
......
...@@ -21,6 +21,6 @@ ...@@ -21,6 +21,6 @@
} }
.icon-unknown { .icon-unknown {
color: $gray-400; color: $gray-200;
} }
} }
...@@ -825,7 +825,7 @@ ...@@ -825,7 +825,7 @@
} }
.repository-language-bar-tooltip-share { .repository-language-bar-tooltip-share {
color: $gray-400; color: $gray-200;
} }
pre.light-well { pre.light-well {
......
---
title: Update $gray-400 hex and replace instances of $gray-400 with $gray-200
merge_request: 37813
author:
type: other
...@@ -45,7 +45,7 @@ export default { ...@@ -45,7 +45,7 @@ export default {
<gl-dropdown <gl-dropdown
right right
:text="dropdownLabel" :text="dropdownLabel"
toggle-class="gl-ml-2 gl-border-none gl-inset-border-1-gray-400! border-radius-default" toggle-class="gl-ml-2 gl-border-none gl-inset-border-1-gray-200! border-radius-default"
> >
<gl-dropdown-item <gl-dropdown-item
:is-check-item="true" :is-check-item="true"
......
.audit-controls .gl-dropdown-toggle { .audit-controls .gl-dropdown-toggle {
border-color: $gray-100; border-color: $gray-100;
border-radius: 0.25rem; border-radius: 0.25rem;
box-shadow: inset 0 0 0 0.0625rem $gray-400; box-shadow: inset 0 0 0 0.0625rem $gray-200;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
} }
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
.new-epic-form .md-area.gfm-form { .new-epic-form .md-area.gfm-form {
@include gl-rounded-base; @include gl-rounded-base;
@include gl-border-none; @include gl-border-none;
@include gl-inset-border-1-gray-400; @include gl-inset-border-1-gray-200;
&.is-focused { &.is-focused {
@include gl-focus($gl-border-size-1, $gray-900); @include gl-focus($gl-border-size-1, $gray-900);
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
} }
.markdown-area::placeholder { .markdown-area::placeholder {
@include gl-text-gray-400; @include gl-text-gray-200;
} }
} }
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
@include gl-h-auto; @include gl-h-auto;
@include gl-text-left; @include gl-text-left;
@include gl-border-none; @include gl-border-none;
@include gl-inset-border-1-gray-400; @include gl-inset-border-1-gray-200;
@include gl-rounded-base; @include gl-rounded-base;
@include gl-white-space-nowrap; @include gl-white-space-nowrap;
......
...@@ -241,7 +241,7 @@ ...@@ -241,7 +241,7 @@
} }
.active { .active {
background-color: $gray-400; background-color: $gray-200;
} }
} }
......
...@@ -13,14 +13,14 @@ exports[`AlertsSettingsForm with default values renders the initial template 1`] ...@@ -13,14 +13,14 @@ exports[`AlertsSettingsForm with default values renders the initial template 1`]
</div> </div>
<gl-form-stub> <gl-form-stub>
<gl-form-group-stub label=\\"Integrations\\" label-for=\\"integrations\\" label-class=\\"label-bold\\"> <gl-form-group-stub label=\\"Integrations\\" label-for=\\"integrations\\" label-class=\\"label-bold\\">
<gl-form-select-stub options=\\"[object Object],[object Object],[object Object]\\" data-testid=\\"alert-settings-select\\" value=\\"generic\\"></gl-form-select-stub> <span class=\\"gl-text-gray-400\\"><gl-sprintf-stub message=\\"Learn more about our %{linkStart}upcoming integrations%{linkEnd}\\"></gl-sprintf-stub></span> <gl-form-select-stub options=\\"[object Object],[object Object],[object Object]\\" data-testid=\\"alert-settings-select\\" value=\\"generic\\"></gl-form-select-stub> <span class=\\"gl-text-gray-200\\"><gl-sprintf-stub message=\\"Learn more about our %{linkStart}upcoming integrations%{linkEnd}\\"></gl-sprintf-stub></span>
</gl-form-group-stub> </gl-form-group-stub>
<gl-form-group-stub label=\\"Active\\" label-for=\\"activated\\" label-class=\\"label-bold\\"> <gl-form-group-stub label=\\"Active\\" label-for=\\"activated\\" label-class=\\"label-bold\\">
<toggle-button-stub id=\\"activated\\"></toggle-button-stub> <toggle-button-stub id=\\"activated\\"></toggle-button-stub>
</gl-form-group-stub> </gl-form-group-stub>
<!----> <!---->
<gl-form-group-stub label=\\"Webhook URL\\" label-for=\\"url\\" label-class=\\"label-bold\\"> <gl-form-group-stub label=\\"Webhook URL\\" label-for=\\"url\\" label-class=\\"label-bold\\">
<gl-form-input-group-stub value=\\"/alerts/notify.json\\" predefinedoptions=\\"[object Object]\\" id=\\"url\\" readonly=\\"\\"></gl-form-input-group-stub> <span class=\\"gl-text-gray-400\\"> <gl-form-input-group-stub value=\\"/alerts/notify.json\\" predefinedoptions=\\"[object Object]\\" id=\\"url\\" readonly=\\"\\"></gl-form-input-group-stub> <span class=\\"gl-text-gray-200\\">
</span> </span>
</gl-form-group-stub> </gl-form-group-stub>
......
...@@ -35,7 +35,7 @@ exports[`Alert integration settings form should match the default snapshot 1`] = ...@@ -35,7 +35,7 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
/> />
<div <div
class="gl-text-gray-400 gl-pt-2" class="gl-text-gray-200 gl-pt-2"
> >
<gl-sprintf-stub <gl-sprintf-stub
message="Create a GitLab issue for each PagerDuty incident by %{docsLink}" message="Create a GitLab issue for each PagerDuty incident by %{docsLink}"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment