Skip to content

G
gitlab-ce
Commit 3b017602 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray
Browse files
Options

Merge branch 'gt-rename-gray-theme-color-variables-ee' into 'master' 

Remove all `$theme-gray-{weight}` variables in favor of `$gray-{weight}`

See merge request gitlab-org/gitlab-ee!9133
parents b4a74ff3 231fdcc5
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 103 deletions
app/assets/stylesheets/bootstrap_migration.scss
View file @ 3b017602
......@@ -225,7 +225,7 @@ h3.popover-header {
}
.info-well {
background: $theme-gray-50;
background: $gray-50;
color: $gl-text-color;
border: 1px solid $border-color;
border-radius: 4px;
......
app/assets/stylesheets/framework/animations.scss
View file @ 3b017602
......@@ -204,7 +204,7 @@ a {
[class^="skeleton-line-"] {
position: relative;
background-color: $theme-gray-100;
background-color: $gray-100;
height: 10px;
overflow: hidden;
......@@ -220,10 +220,10 @@ a {
background-size: cover;
background-image: linear-gradient(
to right,
$theme-gray-100 0%,
$theme-gray-50 20%,
$theme-gray-100 40%,
$theme-gray-100 100%
$gray-100 0%,
$gray-50 20%,
$gray-100 40%,
$gray-100 100%
);
height: 10px;
}
......
app/assets/stylesheets/framework/awards.scss
View file @ 3b017602
......@@ -176,7 +176,7 @@
&.user-authored {
cursor: default;
background-color: $gray-light;
border-color: $theme-gray-200;
border-color: $gray-200;
color: $gl-text-color-disabled;
gl-emoji {
......
app/assets/stylesheets/framework/buttons.scss
View file @ 3b017602
......@@ -483,7 +483,7 @@
// All disabled buttons, regardless of color, type, etc
%disabled {
background-color: $gray-light !important;
border-color: $theme-gray-200 !important;
border-color: $gray-200 !important;
color: $gl-text-color-disabled !important;
opacity: 1 !important;
cursor: default !important;
......
app/assets/stylesheets/framework/forms.scss
View file @ 3b017602
......@@ -261,7 +261,7 @@ label {
right: 0.8em;
top: 50%;
transform: translateY(-50%);
color: $theme-gray-600;
color: $gray-600;
}
}
......
app/assets/stylesheets/framework/gitlab_theme.scss
View file @ 3b017602
......@@ -282,31 +282,31 @@ body {
&.ui-dark {
@include gitlab-theme(
$theme-gray-200,
$theme-gray-500,
$theme-gray-700,
$theme-gray-800,
$theme-gray-900,
$gray-200,
$gray-500,
$gray-700,
$gray-800,
$gray-900,
$white-light
);
}
&.ui-light {
@include gitlab-theme(
$theme-gray-700,
$theme-gray-800,
$theme-gray-700,
$theme-gray-700,
$theme-gray-100,
$theme-gray-700
$gray-700,
$gray-800,
$gray-700,
$gray-700,
$gray-100,
$gray-700
);
.navbar-gitlab {
background-color: $theme-gray-100;
background-color: $gray-100;
box-shadow: 0 1px 0 0 $border-color;
.logo-text svg {
fill: $theme-gray-900;
fill: $gray-900;
}
.navbar-sub-nav,
......@@ -315,7 +315,7 @@ body {
> a:hover,
> a:focus,
> button:hover {
color: $theme-gray-900;
color: $gray-900;
}
&.active > a,
......@@ -329,8 +329,8 @@ body {
.container-fluid {
.navbar-toggler,
.navbar-toggler:hover {
color: $theme-gray-700;
border-left: 1px solid $theme-gray-200;
color: $gray-700;
border-left: 1px solid $gray-200;
}
}
}
......@@ -348,7 +348,7 @@ body {
.search-input-wrap {
.search-icon {
fill: $theme-gray-200;
fill: $gray-200;
}
.search-input {
......@@ -359,16 +359,16 @@ body {
.nav-sidebar li.active {
> a {
color: $theme-gray-900;
color: $gray-900;
}
svg {
fill: $theme-gray-900;
fill: $gray-900;
}
}
.sidebar-top-level-items > li.active .badge.badge-pill {
color: $theme-gray-900;
color: $gray-900;
}
}
}
app/assets/stylesheets/framework/icons.scss
View file @ 3b017602
......@@ -87,8 +87,8 @@
display: flex;
align-items: center;
justify-content: center;
border: $border-size solid $theme-gray-400;
border: $border-size solid $gray-400;
border-radius: 50%;
padding: $gl-padding-8 - $border-size;
color: $theme-gray-700;
color: $gray-700;
}
app/assets/stylesheets/framework/stacked_progress_bar.scss
View file @ 3b017602
......@@ -3,7 +3,7 @@
height: 16px;
border-radius: 10px;
overflow: hidden;
background-color: $theme-gray-100;
background-color: $gray-100;
.status-unavailable,
.status-green,
......@@ -24,7 +24,7 @@
.status-unavailable {
padding: 0 10px;
color: $theme-gray-700;
color: $gray-700;
}
.status-green {
......@@ -36,11 +36,11 @@
}
.status-neutral {
background-color: $theme-gray-200;
background-color: $gray-200;
color: $gl-gray-dark;
&:hover {
background-color: $theme-gray-300;
background-color: $gray-300;
}
}
......
app/assets/stylesheets/framework/variables.scss
View file @ 3b017602
......@@ -98,6 +98,18 @@ $red-800: #8b2615;
$red-900: #711e11;
$red-950: #4b140b;
$gray-50: #fafafa;
$gray-100: #f2f2f2;
$gray-200: #dfdfdf;
$gray-300: #cccccc;
$gray-400: #bababa;
$gray-500: #a7a7a7;
$gray-600: #919191;
$gray-700: #707070;
$gray-800: #4f4f4f;
$gray-900: #2e2e2e;
$gray-950: #1f1f1f;
// GitLab themes
$indigo-50: #f7f7ff;
......@@ -112,18 +124,6 @@ $indigo-800: #393982;
$indigo-900: #292961;
$indigo-950: #1a1a40;
$theme-gray-50: #fafafa;
$theme-gray-100: #f2f2f2;
$theme-gray-200: #dfdfdf;
$theme-gray-300: #cccccc;
$theme-gray-400: #bababa;
$theme-gray-500: #a7a7a7;
$theme-gray-600: #919191;
$theme-gray-700: #707070;
$theme-gray-800: #4f4f4f;
$theme-gray-900: #2e2e2e;
$theme-gray-950: #1f1f1f;
$theme-blue-50: #f4f8fc;
$theme-blue-100: #e6edf5;
$theme-blue-200: #c8d7e6;
......
app/assets/stylesheets/framework/variables_overrides.scss
View file @ 3b017602
......@@ -5,7 +5,7 @@
$secondary: $gray-light;
$input-disabled-bg: $gray-light;
$input-border-color: $theme-gray-200;
$input-border-color: $gray-200;
$input-color: $gl-text-color;
$font-family-sans-serif: $regular-font;
$font-family-monospace: $monospace-font;
......@@ -20,7 +20,7 @@ $warning: $orange-500;
$danger: $red-500;
$zindex-modal-backdrop: 1040;
$nav-divider-margin-y: ($grid-size / 2);
$dropdown-divider-bg: $theme-gray-200;
$dropdown-divider-bg: $gray-200;
$dropdown-item-padding-y: 8px;
$dropdown-item-padding-x: 12px;
$popover-max-width: 300px;
......
app/assets/stylesheets/page_bundles/ide.scss
View file @ 3b017602
......@@ -130,7 +130,7 @@ $ide-commit-header-height: 48px;
background: none;
border: 0;
border-radius: $border-radius-default;
color: $theme-gray-900;
color: $gray-900;
svg {
position: relative;
......@@ -145,7 +145,7 @@ $ide-commit-header-height: 48px;
}
&:not([disabled]):hover {
background-color: $theme-gray-200;
background-color: $gray-200;
}
&:not([disabled]):focus {
......@@ -265,7 +265,7 @@ $ide-commit-header-height: 48px;
.margin {
background-color: $white-light;
border-right: 1px solid $theme-gray-100;
border-right: 1px solid $gray-100;
.line-insert {
border-right: 1px solid $line-added-dark;
......@@ -292,7 +292,7 @@ $ide-commit-header-height: 48px;
.monaco-editor,
.monaco-editor-background,
.monaco-editor .inputarea.ime-input {
background-color: $theme-gray-50;
background-color: $gray-50;
}
}
}
......@@ -527,7 +527,7 @@ $ide-commit-header-height: 48px;
display: block;
margin-left: auto;
margin-right: auto;
color: $theme-gray-700;
color: $gray-700;
}
.file-status-icon {
......@@ -551,7 +551,7 @@ $ide-commit-header-height: 48px;
&:hover,
&:focus {
background: $theme-gray-100;
background: $gray-100;
outline: 0;
......@@ -563,7 +563,7 @@ $ide-commit-header-height: 48px;
}
&:active {
background: $theme-gray-200;
background: $gray-200;
}
&.is-active {
......@@ -767,12 +767,12 @@ $ide-commit-header-height: 48px;
&:hover {
color: $gl-text-color;
background-color: $theme-gray-100;
background-color: $gray-100;
}
&:focus {
color: $gl-text-color;
background-color: $theme-gray-200;
background-color: $gray-200;
}
&.active {
......@@ -1273,10 +1273,10 @@ $ide-commit-header-height: 48px;
.ide-entry-dropdown-toggle {
padding: $gl-padding-4;
color: $gl-text-color;
background-color: $theme-gray-100;
background-color: $gray-100;
&:hover {
background-color: $theme-gray-200;
background-color: $gray-200;
}
&:active,
......@@ -1331,7 +1331,7 @@ $ide-commit-header-height: 48px;
&:focus {
outline: 0;
box-shadow: none;
border-color: $theme-gray-200;
border-color: $gray-200;
}
}
......@@ -1358,7 +1358,7 @@ $ide-commit-header-height: 48px;
.ide-commit-editor-header {
height: 65px;
padding: 8px 16px;
background-color: $theme-gray-50;
background-color: $gray-50;
box-shadow: inset 0 -1px $white-dark;
}
......@@ -1370,7 +1370,7 @@ $ide-commit-header-height: 48px;
.ide-file-icon-holder {
display: flex;
align-items: center;
color: $theme-gray-700;
color: $gray-700;
}
.file-row:hover,
......
app/assets/stylesheets/pages/boards.scss
View file @ 3b017602
......@@ -322,7 +322,7 @@
padding: $gl-padding;
background: $white-light;
border-radius: $border-radius-default;
border: 1px solid $theme-gray-200;
border: 1px solid $gray-200;
box-shadow: 0 1px 2px $issue-boards-card-shadow;
list-style: none;
line-height: $gl-padding;
......@@ -777,7 +777,7 @@
}
.board-card-info-icon {
color: $theme-gray-600;
color: $gray-600;
margin-right: $gl-padding-4;
}
......
app/assets/stylesheets/pages/builds.scss
View file @ 3b017602
......@@ -254,7 +254,7 @@
.trigger-variables-table-cell {
font-size: $gl-font-size-small;
line-height: $gl-line-height;
border: 1px solid $theme-gray-200;
border: 1px solid $gray-200;
padding: $gl-padding-4 6px;
width: 50%;
vertical-align: top;
......
app/assets/stylesheets/pages/environments.scss
View file @ 3b017602
......@@ -427,7 +427,7 @@
.prometheus-graph-cursor {
position: absolute;
background: $theme-gray-600;
background: $gray-600;
width: 1px;
}
......@@ -469,7 +469,7 @@
> .arrow::after {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 4px solid $theme-gray-50;
border-left: 4px solid $gray-50;
}
.arrow-shadow {
......@@ -491,7 +491,7 @@
> .arrow::after {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 4px solid $theme-gray-50;
border-right: 4px solid $gray-50;
}
.arrow-shadow {
......@@ -523,8 +523,8 @@
position: relative;
}
> .popover-header {
background-color: $theme-gray-50;
> .popover-title {
background-color: $gray-50;
border-radius: $border-radius-default $border-radius-default 0 0;
}
}
......@@ -599,7 +599,7 @@
}
> text {
fill: $theme-gray-600;
fill: $gray-600;
font-size: 10px;
}
}
......@@ -642,7 +642,7 @@
}
.prometheus-table-row-highlight {
background-color: $theme-gray-100;
background-color: $gray-100;
}
// EE-only
......
app/assets/stylesheets/pages/graph.scss
View file @ 3b017602
......@@ -44,7 +44,7 @@
}
.x-axis-text {
fill: $theme-gray-900;
fill: $gray-900;
}
.bar-rect {
......@@ -64,7 +64,7 @@
text {
font-weight: bold;
font-size: 12px;
fill: $theme-gray-800;
fill: $gray-800;
}
}
}
......@@ -87,5 +87,5 @@
.animate-flicker {
animation: flickerAnimation 1.5s infinite;
fill: $theme-gray-500;
fill: $gray-500;
}
app/assets/stylesheets/pages/groups.scss
View file @ 3b017602
......@@ -83,7 +83,7 @@
&:hover {
background-color: $gray-darker;
color: $theme-gray-900;
color: $gray-900;
}
}
......
app/assets/stylesheets/pages/issuable.scss
View file @ 3b017602
......@@ -989,7 +989,7 @@
.sidebar-collapsed-divider {
line-height: 5px;
font-size: 12px;
color: $theme-gray-700;
color: $gray-700;
+ .sidebar-collapsed-icon {
padding-top: 0;
......
app/assets/stylesheets/pages/labels.scss
View file @ 3b017602
......@@ -82,7 +82,7 @@
justify-content: space-between;
padding: $gl-padding;
border-radius: $border-radius-default;
border: 1px solid $theme-gray-100;
border: 1px solid $gray-100;
&:last-child {
margin-bottom: 0;
......@@ -257,7 +257,7 @@
}
.label-badge {
color: $theme-gray-900;
color: $gray-900;
font-weight: $gl-font-weight-normal;
padding: $gl-padding-4 $gl-padding-8;
border-radius: $border-radius-default;
......@@ -269,7 +269,7 @@
}
.label-badge-gray {
background-color: $theme-gray-100;
background-color: $gray-100;
}
.label-links {
......@@ -326,11 +326,11 @@
}
.label-action {
color: $theme-gray-800;
color: $gray-800;
cursor: pointer;
svg {
fill: $theme-gray-800;
fill: $gray-800;
}
&:hover {
......
app/assets/stylesheets/pages/merge_requests.scss
View file @ 3b017602
......@@ -64,7 +64,7 @@
&::before {
content: '';
border-left: 1px solid $theme-gray-200;
border-left: 1px solid $gray-200;
position: absolute;
left: 32px;
top: -17px;
......@@ -907,7 +907,7 @@
}
.btn svg {
fill: $theme-gray-700;
fill: $gray-700;
}
.dropdown-menu {
......@@ -951,7 +951,7 @@
.coverage {
font-size: 12px;
color: $theme-gray-700;
color: $gray-700;
line-height: initial;
}
......
app/assets/stylesheets/pages/milestone.scss
View file @ 3b017602
......@@ -8,7 +8,7 @@ $status-box-line-height: 26px;
padding: $gl-padding-8;
margin-top: $gl-padding-8;
border-radius: $border-radius-default;
background-color: $theme-gray-100;
background-color: $gray-100;
.milestone {
border: 0;
......
app/assets/stylesheets/pages/note_form.scss
View file @ 3b017602
......@@ -147,7 +147,7 @@
}
.sidebar-item-value & {
fill: $theme-gray-700;
fill: $gray-700;
}
}
......
app/assets/stylesheets/pages/notes.scss
View file @ 3b017602
......@@ -5,7 +5,7 @@ $note-form-margin-left: 72px;
@mixin vertical-line($left) {
&::before {
content: '';
border-left: 2px solid $theme-gray-100;
border-left: 2px solid $gray-100;
position: absolute;
top: 0;
bottom: 0;
......
app/assets/stylesheets/pages/profiles/preferences.scss
View file @ 3b017602
......@@ -60,11 +60,11 @@
}
&.ui-dark {
background-color: $theme-gray-900;
background-color: $gray-900;
}
&.ui-light {
background-color: $theme-gray-200;
background-color: $gray-200;
}
}
......
app/assets/stylesheets/pages/projects.scss
View file @ 3b017602
......@@ -459,7 +459,7 @@
margin-right: $gl-padding-4;
margin-bottom: $gl-padding-4;
color: $gl-text-color-secondary;
background-color: $theme-gray-100;
background-color: $gray-100;
line-height: $gl-btn-line-height;
&:hover {
......@@ -914,7 +914,7 @@
}
.repository-language-bar-tooltip-share {
color: $theme-gray-400;
color: $gray-400;
}
pre.light-well {
......
app/assets/stylesheets/pages/reports.scss
View file @ 3b017602
......@@ -96,7 +96,7 @@
}
&.neutral svg {
color: $theme-gray-700;
color: $gray-700;
}
.ci-status-icon {
......
app/assets/stylesheets/pages/settings.scss
View file @ 3b017602
......@@ -338,7 +338,7 @@
.btn-clipboard {
background-color: $white-light;
border: 1px solid $theme-gray-200;
border: 1px solid $gray-200;
}
.deploy-token-help-block {
......
changelogs/unreleased/gt-rename-gray-theme-color-variables.yml 0 → 100644
View file @ 3b017602
---
title: Remove all `$theme-gray-{weight}` variables in favor of `$gray-{weight}`
merge_request: 24333
author: George Tsiolis
type: other
ee/app/assets/stylesheets/framework/sortable.scss
View file @ 3b017602
......@@ -27,7 +27,7 @@
&:hover {
cursor: pointer;
background-color: $theme-gray-100;
background-color: $gray-100;
}
&:focus {
......
ee/app/assets/stylesheets/pages/geo_nodes.scss
View file @ 3b017602
......@@ -37,7 +37,7 @@
}
.geo-node-offline {
color: $theme-gray-950;
color: $gray-950;
}
.geo-node-disabled {
......@@ -96,7 +96,7 @@
.detail-section-item,
.section-items-container {
.node-detail-title {
color: $theme-gray-700;
color: $gray-700;
.node-detail-help-text {
color: $blue-600;
......
ee/app/assets/stylesheets/pages/roadmap.scss
View file @ 3b017602
......@@ -141,11 +141,11 @@ $column-right-gradient: linear-gradient(
.item-label,
.item-sublabel .sublabel-value {
color: $theme-gray-600;
color: $gray-600;
font-weight: 400;
&.label-dark {
color: $theme-gray-900;
color: $gray-900;
}
&.label-bold {
......@@ -209,7 +209,7 @@ $column-right-gradient: linear-gradient(
&:hover {
.epic-details-cell,
.epic-timeline-cell {
background-color: $theme-gray-100;
background-color: $gray-100;
}
}
......@@ -258,7 +258,7 @@ $column-right-gradient: linear-gradient(
.epic-url {
display: table-cell;
color: $theme-gray-900;
color: $gray-900;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
......@@ -267,7 +267,7 @@ $column-right-gradient: linear-gradient(
}
.epic-group-timeframe {
color: $theme-gray-700;
color: $gray-700;
width: 100%;
white-space: nowrap;
overflow: hidden;
......
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