From bef3683d03e3b50668be821e99955e38a29f7f7c Mon Sep 17 00:00:00 2001
From: Scott de Jonge <sdejonge@gitlab.com>
Date: Tue, 12 Dec 2023 12:36:57 +0000
Subject: [PATCH] Consolidate SCSS variables for border colors
---
app/assets/stylesheets/framework/awards.scss | 4 +-
app/assets/stylesheets/framework/blocks.scss | 8 ++--
app/assets/stylesheets/framework/buttons.scss | 4 +-
app/assets/stylesheets/framework/common.scss | 2 +-
app/assets/stylesheets/framework/sidebar.scss | 8 ++--
.../stylesheets/framework/typography.scss | 6 +--
.../stylesheets/framework/variables.scss | 11 -----
.../mailers/highlighted_diff_email.scss | 2 +-
.../page_bundles/_ide_monaco_overrides.scss | 2 +-
.../page_bundles/_ide_theme_overrides.scss | 8 ++--
app/assets/stylesheets/page_bundles/ide.scss | 44 +++++++++----------
.../stylesheets/page_bundles/milestone.scss | 2 +-
.../stylesheets/page_bundles/pipelines.scss | 2 +-
app/assets/stylesheets/pages/commits.scss | 4 +-
app/assets/stylesheets/pages/groups.scss | 4 +-
app/assets/stylesheets/pages/issues.scss | 4 +-
app/assets/stylesheets/pages/notes.scss | 2 +-
app/assets/stylesheets/print.scss | 2 +-
app/assets/stylesheets/snippets.scss | 2 +-
app/assets/stylesheets/themes/_dark.scss | 3 --
.../themes/dark_mode_overrides.scss | 1 -
ee/app/assets/stylesheets/pages/issues.scss | 4 +-
22 files changed, 57 insertions(+), 72 deletions(-)
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 28c0c071dc067..fc694e0d37f62 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -24,7 +24,7 @@
width: $award-emoji-width;
font-size: 14px;
background-color: $white;
- border: 1px solid $border-white-light;
+ border: 1px solid $border-color;
border-radius: $border-radius-base;
box-shadow: 0 6px 12px $award-emoji-menu-shadow;
pointer-events: none;
@@ -218,7 +218,7 @@
}
.award-control-icon {
- color: $border-gray-normal;
+ color: $gray-100;
svg {
height: $default-icon-size;
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index cae2ea1716cc6..4249bb372dce6 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -25,8 +25,8 @@
background-color: $gray-light;
padding: $gl-padding;
margin-bottom: 0;
- border-top: 1px solid $white-dark;
- border-bottom: 1px solid $white-dark;
+ border-top: 1px solid $border-color;
+ border-bottom: 1px solid $border-color;
color: $gl-text-color;
&.white {
@@ -76,14 +76,14 @@
.sub-header-block {
background-color: $white;
- border-bottom: 1px solid $white-dark;
+ border-bottom: 1px solid $border-color;
padding: 11px 0;
margin-bottom: 11px;
}
.content-block {
padding: $gl-padding 0;
- border-bottom: 1px solid $white-dark;
+ border-bottom: 1px solid $border-color;
> .controls {
float: right;
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 07539b5957487..709c33a2ad8f7 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -118,7 +118,7 @@
}
@mixin btn-white {
- @include btn-color($white, $border-color, $gray-50, $border-white-normal, $white-dark, $border-white-normal, $gl-text-color);
+ @include btn-color($white, $gray-200, $gray-50, $gray-200, $gray-100, $gray-300, $gl-text-color);
}
@mixin btn-purple {
@@ -276,7 +276,7 @@
.active {
box-shadow: $gl-btn-active-background;
- border: 1px solid $border-white-normal !important;
+ border: 1px solid $gray-100 !important;
background-color: $btn-active-gray-light !important;
}
}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 343e1ebc97d22..874cfa2fe53b6 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -319,7 +319,7 @@ li.note {
.progress {
margin-top: 4px;
box-shadow: none;
- background-color: $border-gray-light;
+ background-color: $gray-100;
}
}
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 30f6d39f70bba..9e453249a794d 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -108,7 +108,7 @@
}
.right-sidebar {
- border-left: 1px solid $gray-50;
+ border-left: 1px solid $border-color;
&.right-sidebar-merge-requests {
@include media-breakpoint-up(lg) {
@@ -411,7 +411,7 @@
.issuable-sidebar-header {
@include clearfix;
padding: $gl-spacing-scale-4 0 $gl-spacing-scale-5;
- border-bottom: 1px solid $border-gray-normal;
+ border-bottom: 1px solid $border-color;
// This prevents the mess when resizing the sidebar
// of elements repositioning themselves..
width: $right-sidebar-inner-width;
@@ -587,7 +587,7 @@
}
.participants {
- border-bottom: 1px solid $border-gray-normal;
+ border-bottom: 1px solid $border-color;
}
.hide-collapsed {
@@ -598,7 +598,7 @@
width: 100%;
height: $sidebar-toggle-height;
margin-left: 0;
- border-bottom: 1px solid $border-white-normal;
+ border-bottom: 1px solid $border-color;
border-radius: 0;
}
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 25542a86e8cf9..eefdbda8f4fe2 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -89,7 +89,7 @@
font-weight: $gl-font-weight-bold;
margin: 24px 0 16px;
padding-bottom: 0.3em;
- border-bottom: 1px solid $white-dark;
+ border-bottom: 1px solid $gray-200;
color: $gl-text-color;
&:first-child {
@@ -102,7 +102,7 @@
font-weight: $gl-font-weight-bold;
margin: 24px 0 16px;
padding-bottom: 0.3em;
- border-bottom: 1px solid $white-dark;
+ border-bottom: 1px solid $gray-200;
color: $gl-text-color;
}
@@ -138,7 +138,7 @@
&:dir(rtl) {
border-left: 0;
- border-right: 3px solid $white-dark;
+ border-right: 3px solid $gray-100;
}
p {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 0df00532fe9f7..31948762972cd 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -87,8 +87,6 @@ $size-scale: (
// Color schema
$darken-normal-factor: 7% !default;
$darken-dark-factor: 10% !default;
-$darken-border-factor: 5% !default;
-$darken-border-dashed-factor: 25% !default;
$purple: #6d49cb !default;
$purple-light: #ede8fb !default;
@@ -116,15 +114,6 @@ $t-gray-a-08: rgba(31, 30, 36, 0.08) !default;
$t-gray-a-16: rgba(31, 30, 36, 0.16) !default;
$t-gray-a-24: rgba(31, 30, 36, 0.24) !default;
-$white-dark: darken($gray-50, 2) !default;
-
-$border-white-light: darken($white, $darken-border-factor) !default;
-$border-white-normal: darken($gray-50, $darken-border-factor) !default;
-
-$border-gray-light: darken($gray-light, $darken-border-factor);
-$border-gray-normal: darken($gray-normal, $darken-border-factor);
-$border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
-
/*
* UI elements
*/
diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
index db8c3d163c06f..c42b7baec39d7 100644
--- a/app/assets/stylesheets/mailers/highlighted_diff_email.scss
+++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
@@ -144,7 +144,7 @@ blockquote,
color: $gl-grayish-blue;
padding: 0 0 0 15px;
margin: 0;
- border-left: 3px solid $white-dark;
+ border-left: 3px solid $gray-100;
}
span.highlight_word {
diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
index 0fb1b3c9c926f..013e9e020fca1 100644
--- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
@@ -75,7 +75,7 @@
.diffOverview {
background-color: $white;
- border-left: 1px solid $white-dark;
+ border-left: 1px solid $border-color;
cursor: ns-resize;
}
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index b6caa845cfa7f..5c8e9bce0e782 100644
--- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -147,7 +147,7 @@
.nav-links,
.gl-tabs-nav,
.common-note-form .md-area.is-focused .nav-links {
- border-color: var(--ide-border-color-alt, $white-dark);
+ border-color: var(--ide-border-color-alt, $border-color);
}
pre {
@@ -291,14 +291,14 @@
&:hover,
&:focus {
- border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
+ border-color: var(--ide-btn-default-hover-border, $border-color) !important;
background-color: var(--ide-btn-default-background, $gray-50) !important;
}
&:active,
.active {
- border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
- background-color: var(--ide-btn-default-background, $white-dark) !important;
+ border-color: var(--ide-btn-default-hover-border, $border-color) !important;
+ background-color: var(--ide-btn-default-background, $border-color) !important;
}
}
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index f7b979c2dac6b..7e2bf4a03a348 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -74,15 +74,15 @@ $ide-commit-header-height: 48px;
display: flex;
flex-direction: column;
flex: 1;
- border-left: 1px solid var(--ide-border-color, $white-dark);
- border-right: 1px solid var(--ide-border-color, $white-dark);
+ border-left: 1px solid var(--ide-border-color, $border-color);
+ border-right: 1px solid var(--ide-border-color, $border-color);
overflow: hidden;
}
.multi-file-tabs {
display: flex;
background-color: var(--ide-background, $gray-light);
- box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
+ box-shadow: inset 0 -1px var(--ide-border-color, $border-color);
> ul {
display: flex;
@@ -94,8 +94,8 @@ $ide-commit-header-height: 48px;
align-items: center;
padding: $grid-size $gl-padding;
background-color: var(--ide-background-hover, $gray-normal);
- border-right: 1px solid var(--ide-border-color, $white-dark);
- border-bottom: 1px solid var(--ide-border-color, $white-dark);
+ border-right: 1px solid var(--ide-border-color, $border-color);
+ border-bottom: 1px solid var(--ide-border-color, $border-color);
&.active,
.gl-tab-nav-item-active {
@@ -136,12 +136,12 @@ $ide-commit-header-height: 48px;
font-weight: normal !important;
background-color: var(--ide-background-hover, $gray-normal);
- border-right: 1px solid var(--ide-border-color, $white-dark);
- border-bottom: 1px solid var(--ide-border-color, $white-dark);
+ border-right: 1px solid var(--ide-border-color, $border-color);
+ border-bottom: 1px solid var(--ide-border-color, $border-color);
&.gl-tab-nav-item-active {
background-color: var(--ide-highlight-background, $white);
- border-color: var(--ide-border-color, $white-dark);
+ border-color: var(--ide-border-color, $border-color);
border-bottom-color: transparent;
}
@@ -245,7 +245,7 @@ $ide-commit-header-height: 48px;
}
.ide-mode-tabs {
- border-bottom: 1px solid var(--ide-border-color, $white-dark);
+ border-bottom: 1px solid var(--ide-border-color, $border-color);
li a {
padding: $gl-padding-8 $gl-padding;
@@ -260,7 +260,7 @@ $ide-commit-header-height: 48px;
.ide-status-bar {
color: var(--ide-text-color, $gl-text-color);
- border-top: 1px solid var(--ide-border-color, $white-dark);
+ border-top: 1px solid var(--ide-border-color, $border-color);
padding: 2px $gl-padding-8 0;
background-color: var(--ide-footer-background, $white);
display: flex;
@@ -358,8 +358,8 @@ $ide-commit-header-height: 48px;
flex: 1;
flex-direction: column;
background-color: var(--ide-highlight-background, $white);
- border-left: 1px solid var(--ide-border-color, $white-dark);
- border-top: 1px solid var(--ide-border-color, $white-dark);
+ border-left: 1px solid var(--ide-border-color, $border-color);
+ border-top: 1px solid var(--ide-border-color, $border-color);
border-top-left-radius: $border-radius-small;
min-height: 0; // firefox fix
}
@@ -384,7 +384,7 @@ $ide-commit-header-height: 48px;
.multi-file-commit-panel-header {
height: $ide-commit-header-height;
- border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
+ border-bottom: 1px solid var(--ide-border-color-alt, $border-color);
padding: 12px 0;
}
@@ -465,7 +465,7 @@ $ide-commit-header-height: 48px;
.multi-file-commit-form {
position: relative;
background-color: var(--ide-highlight-background, $white);
- border-left: 1px solid var(--ide-border-color, $white-dark);
+ border-left: 1px solid var(--ide-border-color, $border-color);
transition: all 0.3s ease;
> form,
@@ -473,7 +473,7 @@ $ide-commit-header-height: 48px;
padding: $gl-padding 0;
margin-left: $gl-padding;
margin-right: $gl-padding;
- border-top: 1px solid var(--ide-border-color-alt, $white-dark);
+ border-top: 1px solid var(--ide-border-color-alt, $border-color);
}
.btn {
@@ -544,7 +544,7 @@ $ide-commit-header-height: 48px;
margin-right: $gl-padding;
&.is-first {
- border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
+ border-bottom: 1px solid var(--ide-border-color-alt, $border-color);
}
}
@@ -603,8 +603,8 @@ $ide-commit-header-height: 48px;
width: calc(100% + 1px);
padding-right: $gl-padding + 1px;
background-color: var(--ide-highlight-background, $white);
- border-top-color: var(--ide-border-color, $white-dark);
- border-bottom-color: var(--ide-border-color, $white-dark);
+ border-top-color: var(--ide-border-color, $border-color);
+ border-bottom-color: var(--ide-border-color, $border-color);
&::after {
content: '';
@@ -714,7 +714,7 @@ $ide-commit-header-height: 48px;
padding: 12px 0;
margin-left: $ide-tree-padding;
margin-right: $ide-tree-padding;
- border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
+ border-bottom: 1px solid var(--ide-border-color-alt, $border-color);
svg {
color: var(--ide-text-color-secondary, $gray-500);
@@ -906,7 +906,7 @@ $ide-commit-header-height: 48px;
.multi-file-commit-panel-inner {
padding: $grid-size 0;
background-color: var(--ide-highlight-background, $white);
- border-right: 1px solid var(--ide-border-color, $white-dark);
+ border-right: 1px solid var(--ide-border-color, $border-color);
}
.ide-right-sidebar-jobs-detail {
@@ -1092,7 +1092,7 @@ $ide-commit-header-height: 48px;
.ide-file-templates {
padding: $grid-size $gl-padding;
background-color: var(--ide-background, $gray-light);
- border-bottom: 1px solid var(--ide-border-color, $white-dark);
+ border-bottom: 1px solid var(--ide-border-color, $border-color);
.dropdown {
min-width: 180px;
@@ -1107,7 +1107,7 @@ $ide-commit-header-height: 48px;
height: 65px;
padding: 8px 16px;
background-color: var(--ide-background, $gray-10);
- box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
+ box-shadow: inset 0 -1px var(--ide-border-color, $border-color);
}
.ide-commit-list-changed-icon {
diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss
index 8dc07715989ea..7a9c7487a7e10 100644
--- a/app/assets/stylesheets/page_bundles/milestone.scss
+++ b/app/assets/stylesheets/page_bundles/milestone.scss
@@ -90,7 +90,7 @@
}
.reference {
- border-top: 1px solid $border-gray-normal;
+ border-top: 1px solid $border-color;
}
}
}
diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss
index 2bd8984c2ead1..d61e3f859959e 100644
--- a/app/assets/stylesheets/page_bundles/pipelines.scss
+++ b/app/assets/stylesheets/page_bundles/pipelines.scss
@@ -43,7 +43,7 @@
.btn-group.open .btn-default {
background-color: $gray-50;
- border-color: $border-white-normal;
+ border-color: $gray-100;
}
.btn .text-center {
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 8511bc22725cd..f1055590539e2 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -7,7 +7,7 @@
background: none;
word-break: normal;
overflow-x: auto;
- border-left: 3px solid $white-dark;
+ border-left: 3px solid $gray-100;
color: $gl-text-color-secondary;
}
@@ -93,7 +93,7 @@
color: $gl-text-color-secondary;
padding: 1px $gl-padding-4;
cursor: pointer;
- border: 1px solid $border-white-normal;
+ border: 1px solid $gray-100;
border-radius: $border-radius-default;
margin-left: 5px;
font-size: 12px;
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index a8f557270baaf..d01286bd20929 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -141,7 +141,7 @@ table.pipeline-project-metrics tr td {
top: 5px;
bottom: 0;
left: -16px;
- border-left: 2px solid $border-white-normal;
+ border-left: 2px solid $border-color;
}
.group-row {
@@ -152,7 +152,7 @@ table.pipeline-project-metrics tr td {
display: block;
width: 10px;
height: 0;
- border-top: 2px solid $border-white-normal;
+ border-top: 2px solid $border-color;
position: absolute;
top: 30px;
left: -16px;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 052e3326318de..9748983d1ae66 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -29,7 +29,7 @@
.issue-token:hover &,
.issue-token-link:focus > & {
- background-color: $border-gray-normal;
+ background-color: $gray-100;
}
}
@@ -41,7 +41,7 @@
&:focus,
.issue-token:hover &,
.issue-token-link:focus + & {
- background-color: $border-gray-normal;
+ background-color: $gray-100;
outline: none;
}
}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index eb2061081ae90..8792c7f9a7206 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -986,7 +986,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
.disabled-comment {
background-color: $gray-light;
border-radius: $border-radius-base;
- border: 1px solid $border-gray-normal;
+ border: 1px solid $border-color;
color: $note-disabled-comment-color;
padding: $gl-padding-8 0;
diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
index 3015cfec34f57..7464946cfc8f8 100644
--- a/app/assets/stylesheets/print.scss
+++ b/app/assets/stylesheets/print.scss
@@ -39,7 +39,7 @@
content: ' ';
height: 100%;
width: 4px;
- background-color: $white-dark;
+ background-color: $gray-100;
}
position: relative;
diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss
index f5787799fce1d..91b381462be09 100644
--- a/app/assets/stylesheets/snippets.scss
+++ b/app/assets/stylesheets/snippets.scss
@@ -159,7 +159,7 @@
&:hover {
background-color: $gray-50;
- border-color: $border-white-normal;
+ border-color: $gray-100;
text-decoration: none;
}
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 5a9f3dd096e6f..cb0da7e782dfd 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -13,12 +13,9 @@ $gray-darkest: $gray-700;
$t-gray-a-08: rgba($gray-950, 0.08);
$black-normal: $gray-900;
-$white-dark: $gray-100;
$border-color: #4f4f4f;
-$border-white-normal: $border-color;
-
$gl-text-color-secondary: $gray-700;
$body-bg: $gray-10;
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
index 708d173ed3eed..3ab3e195b0642 100644
--- a/app/assets/stylesheets/themes/dark_mode_overrides.scss
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -137,7 +137,6 @@
aside.right-sidebar:not(.right-sidebar-merge-requests) {
background-color: $gray-10;
- border-left-color: $gray-50;
}
:root.gl-dark {
diff --git a/ee/app/assets/stylesheets/pages/issues.scss b/ee/app/assets/stylesheets/pages/issues.scss
index fb22368d9c980..7a9146bc74c44 100644
--- a/ee/app/assets/stylesheets/pages/issues.scss
+++ b/ee/app/assets/stylesheets/pages/issues.scss
@@ -21,8 +21,8 @@
background: $white;
margin: 16px -20px -20px;
padding: 16px 20px;
- border-top: 1px solid $border-gray-light;
- border-bottom: 1px solid $border-gray-light;
+ border-top: 1px solid $border-color;
+ border-bottom: 1px solid $border-color;
a:hover {
color: $btn-white-active;
--
GitLab