Skip to content
Snippets Groups Projects
Commit 9cea7c68 authored by Jeremy Elder's avatar Jeremy Elder
Browse files

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
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 32 additions and 27 deletions
app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
+ 3
− 3
View file @ 9cea7c68
@@ -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>
app/assets/javascripts/clusters_list/components/clusters.vue
+ 1
− 1
View file @ 9cea7c68
@@ -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>
app/assets/javascripts/error_tracking/components/stacktrace_entry.vue
+ 2
− 2
View file @ 9cea7c68
@@ -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>
app/assets/javascripts/incidents_settings/components/pagerduty_form.vue
+ 1
− 1
View file @ 9cea7c68
@@ -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
app/assets/stylesheets/components/dashboard_skeleton.scss
+ 1
− 1
View file @ 9cea7c68
@@ -41,7 +41,7 @@
}
 
&-extra {
background-color: $gray-400;
background-color: $gray-200;
font-size: 10px;
line-height: $gl-line-height;
width: $gl-padding;
app/assets/stylesheets/components/related_items_list.scss
+ 1
− 1
View file @ 9cea7c68
@@ -104,7 +104,7 @@ $item-remove-button-space: 42px;
 
.bullet-separator {
font-size: 9px;
color: $gray-400;
color: $gray-200;
}
}
 
app/assets/stylesheets/components/rich_content_editor.scss
+ 2
− 2
View file @ 9cea7c68
@@ -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 {
app/assets/stylesheets/framework/common.scss
+ 2
− 2
View file @ 9cea7c68
@@ -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;
}
app/assets/stylesheets/framework/typography.scss
+ 2
− 2
View file @ 9cea7c68
@@ -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 {
app/assets/stylesheets/framework/variables.scss
+ 1
− 1
View file @ 9cea7c68
@@ -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;
app/assets/stylesheets/pages/alert_management/severity-icons.scss
+ 1
− 1
View file @ 9cea7c68
@@ -21,6 +21,6 @@
}
 
.icon-unknown {
color: $gray-400;
color: $gray-200;
}
}
app/assets/stylesheets/pages/projects.scss
+ 1
− 1
View file @ 9cea7c68
@@ -831,7 +831,7 @@
}
 
.repository-language-bar-tooltip-share {
color: $gray-400;
color: $gray-200;
}
 
pre.light-well {
changelogs/unreleased/224119-replace-gray-400-value-replace-usages-with-gray-200.yml 0 → 100644
+ 5
− 0
View file @ 9cea7c68
---
title: Update $gray-400 hex and replace instances of $gray-400 with $gray-200
merge_request: 37813
author:
type: other
ee/app/assets/javascripts/boards/components/toggle_epics_swimlanes.vue
+ 1
− 1
View file @ 9cea7c68
@@ -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"
ee/app/assets/stylesheets/components/audit_logs/sorting_field.scss
+ 1
− 1
View file @ 9cea7c68
.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;
}
ee/app/assets/stylesheets/pages/epics.scss
+ 3
− 3
View file @ 9cea7c68
@@ -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;
 
ee/app/assets/stylesheets/pages/promotions.scss
+ 1
− 1
View file @ 9cea7c68
@@ -245,7 +245,7 @@
}
 
.active {
background-color: $gray-400;
background-color: $gray-200;
}
}
 
spec/frontend/alert_settings/__snapshots__/alert_settings_form_spec.js.snap
+ 2
− 2
View file @ 9cea7c68
@@ -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>
spec/frontend/incidents_settings/components/__snapshots__/pagerduty_form_spec.js.snap
+ 1
− 1
View file @ 9cea7c68
@@ -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}"
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