Skip to content

G
gitlab-ce
Commit 323a4b72 authored by Enrique Alcántara's avatar Enrique Alcántara
Browse files
Options

Merge branch '221301-update-gray-200-value-and-usages' into 'master' 

Resolve "Update $gray-200 value and usages"

Closes #221301

See merge request gitlab-org/gitlab!36128
parents e8f92aed e1e7fb8f
Hide whitespace changes
Inline Side-by-side
Showing with 76 additions and 68 deletions
app/assets/javascripts/alert_management/components/alert_details.vue
View file @ 323a4b72
......@@ -204,7 +204,7 @@ export default {
:class="{ 'pr-sm-8': sidebarStatus }"
>
<div
class="gl-display-flex gl-justify-content-space-between gl-align-items-baseline gl-px-1 py-3 py-md-4 gl-border-b-1 gl-border-b-gray-200 gl-border-b-solid flex-column flex-sm-row"
class="gl-display-flex gl-justify-content-space-between gl-align-items-baseline gl-px-1 py-3 py-md-4 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid flex-column flex-sm-row"
>
<div
data-testid="alert-header"
......
app/assets/javascripts/diffs/components/diff_line_note_form.vue
View file @ 323a4b72
......@@ -148,7 +148,10 @@ export default {
<template>
<div class="content discussion-form discussion-form-container discussion-notes">
<div v-if="glFeatures.multilineComments" class="gl-mb-3 gl-text-gray-700">
<div
v-if="glFeatures.multilineComments"
class="gl-mb-3 gl-text-gray-700 gl-border-gray-100 gl-border-b-solid gl-border-b-1 gl-pb-3"
>
<multiline-comment-form
v-model="commentLineStart"
:line="line"
......
app/assets/javascripts/issue_show/components/app.vue
View file @ 323a4b72
......@@ -420,7 +420,7 @@ export default {
<transition name="issuable-header-slide">
<div
v-if="shouldShowStickyHeader"
class="issue-sticky-header gl-fixed gl-z-index-3 gl-bg-white gl-border-1 gl-border-b-solid gl-border-b-gray-200 gl-py-3"
class="issue-sticky-header gl-fixed gl-z-index-3 gl-bg-white gl-border-1 gl-border-b-solid gl-border-b-gray-100 gl-py-3"
data-testid="issue-sticky-header"
>
<div
......
app/assets/javascripts/notes/components/noteable_note.vue
View file @ 323a4b72
......@@ -340,7 +340,7 @@ export default {
:line="line"
:comment-line-options="commentLineOptions"
:line-range="note.position.line_range"
class="gl-mb-3 gl-text-gray-700"
class="gl-mb-3 gl-text-gray-700 gl-border-gray-100 gl-border-b-solid gl-border-b-1 gl-pb-3"
/>
<div
v-else
......
app/assets/javascripts/registry/explorer/components/list_item.vue
View file @ 323a4b72
......@@ -40,7 +40,7 @@ export default {
'gl-border-b-1': !this.last,
'gl-border-b-2': this.last,
'disabled-content': this.disabled,
'gl-border-gray-200': !this.selected,
'gl-border-gray-100': !this.selected,
'gl-bg-blue-50 gl-border-blue-200': this.selected,
};
},
......@@ -109,14 +109,14 @@ export default {
<div class="gl-w-7"></div>
<div
v-if="isDetailsShown"
class="gl-display-flex gl-flex-direction-column gl-flex-fill-1 gl-bg-gray-10 gl-rounded-base gl-inset-border-1-gray-200 gl-mb-3"
class="gl-display-flex gl-flex-direction-column gl-flex-fill-1 gl-bg-gray-10 gl-rounded-base gl-inset-border-1-gray-100 gl-mb-3"
>
<div
v-for="(row, detailIndex) in detailsSlots"
:key="detailIndex"
class="gl-px-5 gl-py-2"
:class="{
'gl-border-gray-200 gl-border-t-solid gl-border-t-1': detailIndex !== 0,
'gl-border-gray-100 gl-border-t-solid gl-border-t-1': detailIndex !== 0,
}"
>
<slot :name="row"></slot>
......
app/assets/stylesheets/components/design_management/design.scss
View file @ 323a4b72
......@@ -98,7 +98,7 @@
&::before {
content: '';
border-left: 1px solid $gray-200;
border-left: 1px solid $gray-100;
position: absolute;
left: 28px;
top: -18px;
......@@ -146,7 +146,7 @@
}
.design-dropzone-border {
border: 2px dashed $gray-200;
border: 2px dashed $gray-100;
}
.design-dropzone-card {
......
app/assets/stylesheets/components/popover.scss
View file @ 323a4b72
.popover {
max-width: $popover-max-width;
border: 1px solid $gray-200;
border: 1px solid $gray-100;
box-shadow: $popover-box-shadow;
font-size: $gl-font-size-small;
......@@ -50,7 +50,7 @@
* due to the box-shadow include in our custom styles.
*/
> .arrow::before {
border-top-color: $gray-200;
border-top-color: $gray-100;
bottom: 1px;
}
......@@ -61,7 +61,7 @@
.bs-popover-bottom {
> .arrow::before {
border-bottom-color: $gray-200;
border-bottom-color: $gray-100;
}
> .popover-header::before {
......@@ -70,11 +70,11 @@
}
.bs-popover-right > .arrow::before {
border-right-color: $gray-200;
border-right-color: $gray-100;
}
.bs-popover-left > .arrow::before {
border-left-color: $gray-200;
border-left-color: $gray-100;
}
.popover-header {
......
app/assets/stylesheets/framework/awards.scss
View file @ 323a4b72
......@@ -179,7 +179,7 @@
&.user-authored {
cursor: default;
background-color: $gray-light;
border-color: $gray-200;
border-color: $gray-100;
color: $gl-text-color-disabled;
gl-emoji {
......
app/assets/stylesheets/framework/broadcast_messages.scss
View file @ 323a4b72
......@@ -28,7 +28,7 @@
max-width: 300px;
width: auto;
background: $white;
border: 1px solid $gray-200;
border: 1px solid $gray-100;
box-shadow: 0 1px 2px 0 rgba($black, 0.1);
border-radius: $border-radius-default;
z-index: 999;
......
app/assets/stylesheets/framework/buttons.scss
View file @ 323a4b72
......@@ -502,7 +502,7 @@
// All disabled buttons, regardless of color, type, etc
%disabled {
background-color: $gray-light;
border-color: $gray-200;
border-color: $gray-100;
color: $gl-text-color-disabled;
opacity: 1;
text-decoration: none;
......
app/assets/stylesheets/framework/dropdowns.scss
View file @ 323a4b72
......@@ -1087,7 +1087,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
.color-input-container {
.dropdown-label-color-preview {
border: 1px solid $gray-200;
border: 1px solid $gray-100;
border-right: 0;
}
}
......
app/assets/stylesheets/framework/filters.scss
View file @ 323a4b72
......@@ -158,7 +158,7 @@
.filtered-search-token .selected,
.filtered-search-term .selected {
.name {
background-color: $gray-200;
background-color: $gray-100;
}
.operator {
......
app/assets/stylesheets/framework/gitlab_theme.scss
View file @ 323a4b72
......@@ -342,7 +342,7 @@ body {
.navbar-toggler,
.navbar-toggler:hover {
color: $gray-700;
border-left: 1px solid $gray-200;
border-left: 1px solid $gray-100;
}
}
}
......@@ -360,7 +360,7 @@ body {
.search-input-wrap {
.search-icon {
fill: $gray-200;
fill: $gray-100;
}
.search-input {
......
app/assets/stylesheets/framework/memory_graph.scss
View file @ 323a4b72
.memory-graph-container {
background: $white;
border: 1px solid $gray-200;
border: 1px solid $gray-100;
}
app/assets/stylesheets/framework/sidebar.scss
View file @ 323a4b72
......@@ -214,7 +214,7 @@
.health-status {
.dropdown-body {
.health-divider {
border-top-color: $gray-200;
border-top-color: $gray-100;
}
.dropdown-item:not(.health-dropdown-item) {
......
app/assets/stylesheets/framework/stacked_progress_bar.scss
View file @ 323a4b72
......@@ -36,7 +36,7 @@
}
.status-neutral {
background-color: $gray-200;
background-color: $gray-100;
color: $gl-gray-dark;
&:hover {
......
app/assets/stylesheets/framework/typography.scss
View file @ 323a4b72
......@@ -89,7 +89,7 @@
background-color: $gray-10;
border-width: 1px;
border-style: solid;
border-color: $gray-200 $gray-200 $gray-400;
border-color: $gray-100 $gray-100 $gray-400;
border-image: none;
border-radius: 3px;
box-shadow: 0 -1px 0 $gray-400 inset;
......@@ -181,7 +181,7 @@
background-color: $white;
td {
border-color: $gray-200;
border-color: $gray-100;
}
}
......@@ -611,7 +611,7 @@ pre {
word-wrap: break-word;
color: $gl-text-color;
background-color: $gray-light;
border: 1px solid $gray-200;
border: 1px solid $gray-100;
border-radius: $border-radius-small;
}
......
app/assets/stylesheets/framework/variables.scss
View file @ 323a4b72
......@@ -164,7 +164,7 @@ $red-950: #4d0a00 !default;
$gray-10: #fafafa !default;
$gray-50: #f0f0f0 !default;
$gray-100: #dbdbdb !default;
$gray-200: #dfdfdf !default;
$gray-200: #bfbfbf !default;
$gray-300: #ccc !default;
$gray-400: #bababa !default;
$gray-500: #a7a7a7 !default;
......@@ -333,7 +333,7 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
/*
* UI elements
*/
$border-color: $gray-200;
$border-color: $gray-100;
$shadow-color: $t-gray-a-08;
$well-expand-item: #e8f2f7;
$well-inner-border: #eef0f2;
......@@ -867,7 +867,7 @@ $priority-label-empty-state-width: 114px;
Popovers
*/
$popover-max-width: 384px;
$popover-box-shadow: 0 2px 3px 1px $gray-200;
$popover-box-shadow: 0 2px 3px 1px $gray-100;
/*
Issues Analytics
......
app/assets/stylesheets/framework/variables_overrides.scss
View file @ 323a4b72
......@@ -5,14 +5,14 @@
$secondary: $gray-light;
$input-disabled-bg: $gray-light;
$input-border-color: $gray-200;
$input-border-color: $gray-100;
$input-color: $gl-text-color;
$input-font-size: $gl-font-size;
$font-family-sans-serif: $regular-font;
$font-family-monospace: $monospace-font;
$btn-line-height: 20px;
$table-accent-bg: $gray-light;
$table-border-color: $gray-200;
$table-border-color: $gray-100;
$card-border-color: $border-color;
$card-cap-bg: $gray-light !default;
$success: $green-500;
......@@ -21,7 +21,7 @@ $warning: $orange-500;
$danger: $red-500;
$zindex-modal-backdrop: 1040;
$nav-divider-margin-y: ($grid-size / 2);
$dropdown-divider-bg: $gray-200;
$dropdown-divider-bg: $gray-100;
$dropdown-item-padding-y: 8px;
$dropdown-item-padding-x: 12px;
$popover-max-width: 300px;
......
app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
View file @ 323a4b72
......@@ -146,7 +146,7 @@
}
pre {
border-color: var(--ide-border-color-alt, $gray-200);
border-color: var(--ide-border-color-alt, $gray-100);
code {
background-color: var(--ide-border-color, inherit);
......@@ -216,7 +216,7 @@
color: var(--ide-text-color, $gl-text-color);
&:hover {
background-color: var(--ide-input-border, $gray-200);
background-color: var(--ide-input-border, $gray-100);
}
}
......@@ -300,8 +300,8 @@
}
.divider {
background-color: var(--ide-dropdown-hover-background, $gray-200);
border-color: var(--ide-dropdown-hover-background, $gray-200);
background-color: var(--ide-dropdown-hover-background, $gray-100);
border-color: var(--ide-dropdown-hover-background, $gray-100);
}
li > a:not(.disable-hover):hover,
......@@ -316,7 +316,7 @@
.dropdown-title,
.dropdown-input {
border-color: var(--ide-dropdown-hover-background, $gray-200) !important;
border-color: var(--ide-dropdown-hover-background, $gray-100) !important;
}
.btn-primary,
......@@ -356,7 +356,7 @@
.btn[disabled] {
background-color: var(--ide-btn-default-background, $gray-light) !important;
border: 1px solid var(--ide-btn-disabled-border, $gray-200) !important;
border: 1px solid var(--ide-btn-disabled-border, $gray-100) !important;
color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important;
}
......
app/assets/stylesheets/page_bundles/ide.scss
View file @ 323a4b72
......@@ -145,7 +145,7 @@ $ide-commit-header-height: 48px;
}
&:not([disabled]):hover {
background-color: var(--ide-input-border, $gray-200);
background-color: var(--ide-input-border, $gray-100);
}
&:not([disabled]):focus {
......@@ -396,7 +396,7 @@ $ide-commit-header-height: 48px;
}
&:active {
background: var(--ide-background, $gray-200);
background: var(--ide-background, $gray-100);
}
&.is-active {
......@@ -567,7 +567,7 @@ $ide-commit-header-height: 48px;
&:focus {
color: var(--ide-text-color, $gl-text-color);
background-color: var(--ide-background-hover, $gray-200);
background-color: var(--ide-background-hover, $gray-100);
}
&.active {
......@@ -1046,7 +1046,7 @@ $ide-commit-header-height: 48px;
background-color: var(--ide-background, $gray-50);
&:hover {
background-color: var(--ide-file-row-btn-hover-background, $gray-200);
background-color: var(--ide-file-row-btn-hover-background, $gray-100);
}
&:active,
......@@ -1097,7 +1097,7 @@ $ide-commit-header-height: 48px;
&:focus {
outline: 0;
box-shadow: none;
border-color: var(--ide-border-color, $gray-200);
border-color: var(--ide-border-color, $gray-100);
}
}
......@@ -1140,7 +1140,7 @@ $ide-commit-header-height: 48px;
}
.file-row:active {
background: var(--ide-background, $gray-200);
background: var(--ide-background, $gray-100);
}
.file-row.is-active {
......
app/assets/stylesheets/pages/alert_management/details.scss
View file @ 323a4b72
......@@ -61,7 +61,7 @@
&.is-active {
&:last-child {
border-bottom: 1px solid $gray-200;
border-bottom: 1px solid $gray-100;
}
}
}
......
app/assets/stylesheets/pages/branches.scss
View file @ 323a4b72
......@@ -23,7 +23,7 @@
.bar {
height: 4px;
background-color: $gl-gray-200;
background-color: $gl-gray-100;
}
.count {
......@@ -34,7 +34,7 @@
.graph-separator {
width: $graph-separator-width;
height: 18px;
background-color: $gl-gray-200;
background-color: $gl-gray-100;
}
}
......
app/assets/stylesheets/pages/builds.scss
View file @ 323a4b72
......@@ -236,7 +236,7 @@
.trigger-variables-table-cell {
font-size: $gl-font-size-small;
line-height: $gl-line-height;
border: 1px solid $gray-200;
border: 1px solid $gray-100;
padding: $gl-padding-4 6px;
width: 50%;
vertical-align: top;
......
app/assets/stylesheets/pages/issuable.scss
View file @ 323a4b72
......@@ -382,7 +382,7 @@
overflow: hidden;
&:hover {
background-color: $gray-200;
background-color: $gray-100;
}
&.issuable-sidebar-header {
......
app/assets/stylesheets/pages/merge_requests.scss
View file @ 323a4b72
......@@ -64,7 +64,7 @@ $mr-widget-min-height: 69px;
background-color: $gray-light;
&.clickable:hover {
background-color: $gl-gray-200;
background-color: $gl-gray-100;
cursor: pointer;
}
}
......@@ -75,7 +75,7 @@ $mr-widget-min-height: 69px;
&::before {
content: '';
border-left: 1px solid $gray-200;
border-left: 1px solid $gray-100;
position: absolute;
left: 28px;
top: -17px;
......
app/assets/stylesheets/pages/notes.scss
View file @ 323a4b72
......@@ -186,8 +186,8 @@ $note-form-margin-left: 72px;
padding: $gl-padding;
.dummy-avatar {
background-color: $gl-gray-200;
border: 1px solid darken($gl-gray-200, 25%);
background-color: $gl-gray-100;
border: 1px solid darken($gl-gray-100, 25%);
}
.note-headline-light,
......
app/assets/stylesheets/pages/pipelines.scss
View file @ 323a4b72
......@@ -816,7 +816,7 @@
&.ci-status-icon-created,
&.ci-status-icon-skipped {
@include mini-pipeline-graph-color($white, $gray-200, $gray-300, $gray-500, $gray-600, $gray-700);
@include mini-pipeline-graph-color($white, $gray-100, $gray-300, $gray-500, $gray-600, $gray-700);
}
}
......
app/assets/stylesheets/pages/prometheus.scss
View file @ 323a4b72
......@@ -34,7 +34,7 @@
.draggable {
&.draggable-enabled {
.draggable-panel {
border: $gray-200 1px solid;
border: $gray-100 1px solid;
border-radius: $border-radius-default;
margin: -1px;
cursor: grab;
......
app/assets/stylesheets/pages/settings.scss
View file @ 323a4b72
......@@ -347,7 +347,7 @@
.btn-clipboard {
background-color: $white;
border: 1px solid $gray-200;
border: 1px solid $gray-100;
}
.deploy-token-help-block {
......
app/assets/stylesheets/performance_bar.scss
View file @ 323a4b72
......@@ -61,7 +61,7 @@
padding: 4px 6px;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
line-height: 1;
color: $gl-gray-200;
color: $gl-gray-100;
border-radius: 3px;
box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from,
inset 0 1px 2px $perf-bar-bucket-box-shadow-to;
......
changelogs/unreleased/221301-update-gray-200-value-and-usages.yml 0 → 100644
View file @ 323a4b72
---
title: Updating $gray-200 hex value and remapping current instances to $gray-100
merge_request: 36128
author:
type: other
ee/app/assets/javascripts/geo_node_form/components/geo_node_form.vue
View file @ 323a4b72
......@@ -88,7 +88,7 @@ export default {
/>
<geo-node-form-capacities :node-data="nodeData" />
<section
class="gl-display-flex gl-align-items-center gl-p-5 gl-mt-6 gl-bg-gray-10 gl-border-t-solid gl-border-b-solid gl-border-t-1 gl-border-b-1 gl-border-gray-200"
class="gl-display-flex gl-align-items-center gl-p-5 gl-mt-6 gl-bg-gray-10 gl-border-t-solid gl-border-b-solid gl-border-t-1 gl-border-b-1 gl-border-gray-100"
>
<gl-button
id="node-save-button"
......
ee/app/assets/javascripts/geo_settings/components/geo_settings_form.vue
View file @ 323a4b72
......@@ -77,7 +77,7 @@ export default {
/>
</gl-form-group>
<section
class="gl-display-flex gl-align-items-center gl-p-5 gl-mt-6 gl-bg-gray-10 gl-border-t-solid gl-border-b-solid gl-border-t-1 gl-border-b-1 gl-border-gray-200"
class="gl-display-flex gl-align-items-center gl-p-5 gl-mt-6 gl-bg-gray-10 gl-border-t-solid gl-border-b-solid gl-border-t-1 gl-border-b-1 gl-border-gray-100"
>
<gl-button
data-testid="settingsSaveButton"
......
ee/app/assets/javascripts/iterations/components/iteration_report.vue
View file @ 323a4b72
......@@ -128,7 +128,7 @@ export default {
<template v-else>
<div
ref="topbar"
class="gl-display-flex gl-justify-items-center gl-align-items-center gl-py-3 gl-border-1 gl-border-b-solid gl-border-gray-200"
class="gl-display-flex gl-justify-items-center gl-align-items-center gl-py-3 gl-border-1 gl-border-b-solid gl-border-gray-100"
>
<gl-badge :variant="status.variant">
{{ status.text }}
......
ee/app/assets/javascripts/security_dashboard/components/first_class_vulnerability_severities.vue
View file @ 323a4b72
......@@ -111,8 +111,8 @@ export default {
</script>
<template>
<section class="gl-border-solid gl-border-1 gl-border-gray-200 gl-rounded-base">
<header class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-200 gl-p-5">
<section class="gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base">
<header class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5">
<h4 class="gl-my-0">
{{ __('Project security status') }}
<gl-link
......
ee/app/assets/stylesheets/pages/licenses.scss
View file @ 323a4b72
......@@ -27,7 +27,7 @@
}
.license-cell {
border-color: $gray-200;
border-color: $gray-100;
border-style: solid;
border-width: 1px 1px 0 0;
flex-basis: 0;
......
ee/app/assets/stylesheets/pages/subscriptions.scss
View file @ 323a4b72
......@@ -10,7 +10,7 @@ $subscriptions-full-width-lg: 541px;
}
.checkout-pane {
border-bottom: 1px solid $gray-200;
border-bottom: 1px solid $gray-100;
flex-grow: 1;
flex-shrink: 0;
......@@ -44,7 +44,7 @@ $subscriptions-full-width-lg: 541px;
}
.phase {
border-bottom: 5px solid $gray-200;
border-bottom: 5px solid $gray-100;
color: $gray-700;
flex-basis: 100%;
font-size: $gl-font-size-12;
......
spec/frontend/registry/explorer/components/list_item_spec.js
View file @ 323a4b72
......@@ -141,7 +141,7 @@ describe('list item', () => {
expect(wrapper.classes()).toEqual(
expect.arrayContaining(['gl-bg-blue-50', 'gl-border-blue-200']),
);
expect(wrapper.classes()).toEqual(expect.not.arrayContaining(['gl-border-gray-200']));
expect(wrapper.classes()).toEqual(expect.not.arrayContaining(['gl-border-gray-100']));
});
it('when false applies the default border', () => {
......@@ -150,7 +150,7 @@ describe('list item', () => {
expect(wrapper.classes()).toEqual(
expect.not.arrayContaining(['gl-bg-blue-50', 'gl-border-blue-200']),
);
expect(wrapper.classes()).toEqual(expect.arrayContaining(['gl-border-gray-200']));
expect(wrapper.classes()).toEqual(expect.arrayContaining(['gl-border-gray-100']));
});
});
});
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