Skip to content

G
gitlab-ce
Commit 9cea7c68 authored by jeldergl's avatar jeldergl
Browse files
Options

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
Show whitespace changes
Inline Side-by-side
Showing with 32 additions and 27 deletions
app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
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
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
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
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
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
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
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
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
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
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
View file @ 9cea7c68
......@@ -21,6 +21,6 @@
}
.icon-unknown {
color: $gray-400;
color: $gray-200;
}
}
app/assets/stylesheets/pages/projects.scss
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
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
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
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
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
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
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
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}"
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7