Commit 9cea7c68 authored by jeldergl's avatar jeldergl

Updating hex and remapping variables

Make GitLab SCSS match GitLab UI SCSS and remap variables to adjust
UI for the updated hex values.
parent f04f4033
......@@ -435,7 +435,7 @@ export default {
data-testid="alert-settings-select"
@change="resetFormValues"
/>
<span class="gl-text-gray-400">
<span class="gl-text-gray-200">
<gl-sprintf :message="$options.i18n.integrationsInfo">
<template #link="{ content }">
<gl-link
......@@ -474,7 +474,7 @@ export default {
:placeholder="baseUrlPlaceholder"
:disabled="!selectedService.active"
/>
<span class="gl-text-gray-400">
<span class="gl-text-gray-200">
{{ $options.i18n.apiBaseUrlHelpText }}
</span>
</gl-form-group>
......@@ -489,7 +489,7 @@ export default {
/>
</template>
</gl-form-input-group>
<span class="gl-text-gray-400">
<span class="gl-text-gray-200">
{{ prometheusInfo }}
</span>
</gl-form-group>
......
......@@ -231,7 +231,7 @@ export default {
<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')
}}</small>
</template>
......
......@@ -99,7 +99,7 @@ export default {
<gl-sprintf v-if="errorFn" :message="__('%{spanStart}in%{spanEnd} %{errorFn}')">
<template #span="{content}">
<span class="gl-text-gray-400">{{ content }}&nbsp;</span>
<span class="gl-text-gray-200">{{ content }}&nbsp;</span>
</template>
<template #errorFn>
<strong>{{ errorFn }}&nbsp;</strong>
......@@ -108,7 +108,7 @@ export default {
<gl-sprintf :message="__('%{spanStart}at line%{spanEnd} %{errorLine}%{errorColumn}')">
<template #span="{content}">
<span class="gl-text-gray-400">{{ content }}&nbsp;</span>
<span class="gl-text-gray-200">{{ content }}&nbsp;</span>
</template>
<template #errorLine>
<strong>{{ errorLine }}</strong>
......
......@@ -135,7 +135,7 @@ export default {
</template>
</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">
<template #docsLink>
<gl-link
......
......@@ -41,7 +41,7 @@
}
&-extra {
background-color: $gray-400;
background-color: $gray-200;
font-size: 10px;
line-height: $gl-line-height;
width: $gl-padding;
......
......@@ -104,7 +104,7 @@ $item-remove-button-space: 42px;
.bullet-separator {
font-size: 9px;
color: $gray-400;
color: $gray-200;
}
}
......
......@@ -20,11 +20,11 @@
.tui-popup-wrapper {
@include gl-overflow-hidden;
@include gl-rounded-base;
@include gl-border-gray-400;
@include gl-border-gray-200;
hr {
@include gl-m-0;
@include gl-bg-gray-400;
@include gl-bg-gray-200;
}
button {
......
......@@ -74,7 +74,7 @@
.hint {
font-style: italic;
color: $gl-gray-400;
color: $gl-gray-200;
}
.light { color: $gl-text-color; }
......@@ -168,7 +168,7 @@ table {
}
p.time {
color: $gl-gray-400;
color: $gl-gray-200;
font-size: 90%;
margin: 30px 3px 3px 2px;
}
......
......@@ -89,10 +89,10 @@
background-color: $gray-10;
border-width: 1px;
border-style: solid;
border-color: $gray-100 $gray-100 $gray-400;
border-color: $gray-100 $gray-100 $gray-200;
border-image: none;
border-radius: 3px;
box-shadow: 0 -1px 0 $gray-400 inset;
box-shadow: 0 -1px 0 $gray-200 inset;
}
h1 {
......
......@@ -166,7 +166,7 @@ $gray-50: #f0f0f0 !default;
$gray-100: #dbdbdb !default;
$gray-200: #bfbfbf !default;
$gray-300: #999 !default;
$gray-400: #bababa !default;
$gray-400: #868686 !default;
$gray-500: #a7a7a7 !default;
$gray-600: #919191 !default;
$gray-700: #707070 !default;
......
......@@ -21,6 +21,6 @@
}
.icon-unknown {
color: $gray-400;
color: $gray-200;
}
}
......@@ -831,7 +831,7 @@
}
.repository-language-bar-tooltip-share {
color: $gray-400;
color: $gray-200;
}
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 {
<gl-dropdown
right
: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
:is-check-item="true"
......
.audit-controls .gl-dropdown-toggle {
border-color: $gray-100;
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;
}
......@@ -84,7 +84,7 @@
.new-epic-form .md-area.gfm-form {
@include gl-rounded-base;
@include gl-border-none;
@include gl-inset-border-1-gray-400;
@include gl-inset-border-1-gray-200;
&.is-focused {
@include gl-focus($gl-border-size-1, $gray-900);
......@@ -92,7 +92,7 @@
}
.markdown-area::placeholder {
@include gl-text-gray-400;
@include gl-text-gray-200;
}
}
......@@ -109,7 +109,7 @@
@include gl-h-auto;
@include gl-text-left;
@include gl-border-none;
@include gl-inset-border-1-gray-400;
@include gl-inset-border-1-gray-200;
@include gl-rounded-base;
@include gl-white-space-nowrap;
......
......@@ -245,7 +245,7 @@
}
.active {
background-color: $gray-400;
background-color: $gray-200;
}
}
......
......@@ -13,14 +13,14 @@ exports[`AlertsSettingsForm with default values renders the initial template 1`]
</div>
<gl-form-stub>
<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 label=\\"Active\\" label-for=\\"activated\\" label-class=\\"label-bold\\">
<toggle-button-stub id=\\"activated\\"></toggle-button-stub>
</gl-form-group-stub>
<!---->
<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>
</gl-form-group-stub>
......
......@@ -35,7 +35,7 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
/>
<div
class="gl-text-gray-400 gl-pt-2"
class="gl-text-gray-200 gl-pt-2"
>
<gl-sprintf-stub
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