Commit 3e834e9f authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

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

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

Closes #56266

See merge request gitlab-org/gitlab-ce!24333
parents 1a5de895 d62fc709
...@@ -225,7 +225,7 @@ h3.popover-header { ...@@ -225,7 +225,7 @@ h3.popover-header {
} }
.info-well { .info-well {
background: $theme-gray-50; background: $gray-50;
color: $gl-text-color; color: $gl-text-color;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 4px; border-radius: 4px;
......
...@@ -204,7 +204,7 @@ a { ...@@ -204,7 +204,7 @@ a {
[class^="skeleton-line-"] { [class^="skeleton-line-"] {
position: relative; position: relative;
background-color: $theme-gray-100; background-color: $gray-100;
height: 10px; height: 10px;
overflow: hidden; overflow: hidden;
...@@ -220,10 +220,10 @@ a { ...@@ -220,10 +220,10 @@ a {
background-size: cover; background-size: cover;
background-image: linear-gradient( background-image: linear-gradient(
to right, to right,
$theme-gray-100 0%, $gray-100 0%,
$theme-gray-50 20%, $gray-50 20%,
$theme-gray-100 40%, $gray-100 40%,
$theme-gray-100 100% $gray-100 100%
); );
height: 10px; height: 10px;
} }
......
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
&.user-authored { &.user-authored {
cursor: default; cursor: default;
background-color: $gray-light; background-color: $gray-light;
border-color: $theme-gray-200; border-color: $gray-200;
color: $gl-text-color-disabled; color: $gl-text-color-disabled;
gl-emoji { gl-emoji {
......
...@@ -483,7 +483,7 @@ ...@@ -483,7 +483,7 @@
// All disabled buttons, regardless of color, type, etc // All disabled buttons, regardless of color, type, etc
%disabled { %disabled {
background-color: $gray-light !important; background-color: $gray-light !important;
border-color: $theme-gray-200 !important; border-color: $gray-200 !important;
color: $gl-text-color-disabled !important; color: $gl-text-color-disabled !important;
opacity: 1 !important; opacity: 1 !important;
cursor: default !important; cursor: default !important;
......
...@@ -261,7 +261,7 @@ label { ...@@ -261,7 +261,7 @@ label {
right: 0.8em; right: 0.8em;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
color: $theme-gray-600; color: $gray-600;
} }
} }
......
...@@ -282,31 +282,31 @@ body { ...@@ -282,31 +282,31 @@ body {
&.ui-dark { &.ui-dark {
@include gitlab-theme( @include gitlab-theme(
$theme-gray-200, $gray-200,
$theme-gray-500, $gray-500,
$theme-gray-700, $gray-700,
$theme-gray-800, $gray-800,
$theme-gray-900, $gray-900,
$white-light $white-light
); );
} }
&.ui-light { &.ui-light {
@include gitlab-theme( @include gitlab-theme(
$theme-gray-700, $gray-700,
$theme-gray-800, $gray-800,
$theme-gray-700, $gray-700,
$theme-gray-700, $gray-700,
$theme-gray-100, $gray-100,
$theme-gray-700 $gray-700
); );
.navbar-gitlab { .navbar-gitlab {
background-color: $theme-gray-100; background-color: $gray-100;
box-shadow: 0 1px 0 0 $border-color; box-shadow: 0 1px 0 0 $border-color;
.logo-text svg { .logo-text svg {
fill: $theme-gray-900; fill: $gray-900;
} }
.navbar-sub-nav, .navbar-sub-nav,
...@@ -315,7 +315,7 @@ body { ...@@ -315,7 +315,7 @@ body {
> a:hover, > a:hover,
> a:focus, > a:focus,
> button:hover { > button:hover {
color: $theme-gray-900; color: $gray-900;
} }
&.active > a, &.active > a,
...@@ -329,8 +329,8 @@ body { ...@@ -329,8 +329,8 @@ body {
.container-fluid { .container-fluid {
.navbar-toggler, .navbar-toggler,
.navbar-toggler:hover { .navbar-toggler:hover {
color: $theme-gray-700; color: $gray-700;
border-left: 1px solid $theme-gray-200; border-left: 1px solid $gray-200;
} }
} }
} }
...@@ -348,7 +348,7 @@ body { ...@@ -348,7 +348,7 @@ body {
.search-input-wrap { .search-input-wrap {
.search-icon { .search-icon {
fill: $theme-gray-200; fill: $gray-200;
} }
.search-input { .search-input {
...@@ -359,16 +359,16 @@ body { ...@@ -359,16 +359,16 @@ body {
.nav-sidebar li.active { .nav-sidebar li.active {
> a { > a {
color: $theme-gray-900; color: $gray-900;
} }
svg { svg {
fill: $theme-gray-900; fill: $gray-900;
} }
} }
.sidebar-top-level-items > li.active .badge.badge-pill { .sidebar-top-level-items > li.active .badge.badge-pill {
color: $theme-gray-900; color: $gray-900;
} }
} }
} }
...@@ -87,8 +87,8 @@ ...@@ -87,8 +87,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: $border-size solid $theme-gray-400; border: $border-size solid $gray-400;
border-radius: 50%; border-radius: 50%;
padding: $gl-padding-8 - $border-size; padding: $gl-padding-8 - $border-size;
color: $theme-gray-700; color: $gray-700;
} }
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
height: 16px; height: 16px;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
background-color: $theme-gray-100; background-color: $gray-100;
.status-unavailable, .status-unavailable,
.status-green, .status-green,
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
.status-unavailable { .status-unavailable {
padding: 0 10px; padding: 0 10px;
color: $theme-gray-700; color: $gray-700;
} }
.status-green { .status-green {
...@@ -36,11 +36,11 @@ ...@@ -36,11 +36,11 @@
} }
.status-neutral { .status-neutral {
background-color: $theme-gray-200; background-color: $gray-200;
color: $gl-gray-dark; color: $gl-gray-dark;
&:hover { &:hover {
background-color: $theme-gray-300; background-color: $gray-300;
} }
} }
......
...@@ -97,6 +97,18 @@ $red-800: #8b2615; ...@@ -97,6 +97,18 @@ $red-800: #8b2615;
$red-900: #711e11; $red-900: #711e11;
$red-950: #4b140b; $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 // GitLab themes
$indigo-50: #f7f7ff; $indigo-50: #f7f7ff;
...@@ -111,18 +123,6 @@ $indigo-800: #393982; ...@@ -111,18 +123,6 @@ $indigo-800: #393982;
$indigo-900: #292961; $indigo-900: #292961;
$indigo-950: #1a1a40; $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-50: #f4f8fc;
$theme-blue-100: #e6edf5; $theme-blue-100: #e6edf5;
$theme-blue-200: #c8d7e6; $theme-blue-200: #c8d7e6;
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
$secondary: $gray-light; $secondary: $gray-light;
$input-disabled-bg: $gray-light; $input-disabled-bg: $gray-light;
$input-border-color: $theme-gray-200; $input-border-color: $gray-200;
$input-color: $gl-text-color; $input-color: $gl-text-color;
$font-family-sans-serif: $regular-font; $font-family-sans-serif: $regular-font;
$font-family-monospace: $monospace-font; $font-family-monospace: $monospace-font;
...@@ -20,7 +20,7 @@ $warning: $orange-500; ...@@ -20,7 +20,7 @@ $warning: $orange-500;
$danger: $red-500; $danger: $red-500;
$zindex-modal-backdrop: 1040; $zindex-modal-backdrop: 1040;
$nav-divider-margin-y: ($grid-size / 2); $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-y: 8px;
$dropdown-item-padding-x: 12px; $dropdown-item-padding-x: 12px;
$popover-max-width: 300px; $popover-max-width: 300px;
......
...@@ -130,7 +130,7 @@ $ide-commit-header-height: 48px; ...@@ -130,7 +130,7 @@ $ide-commit-header-height: 48px;
background: none; background: none;
border: 0; border: 0;
border-radius: $border-radius-default; border-radius: $border-radius-default;
color: $theme-gray-900; color: $gray-900;
svg { svg {
position: relative; position: relative;
...@@ -145,7 +145,7 @@ $ide-commit-header-height: 48px; ...@@ -145,7 +145,7 @@ $ide-commit-header-height: 48px;
} }
&:not([disabled]):hover { &:not([disabled]):hover {
background-color: $theme-gray-200; background-color: $gray-200;
} }
&:not([disabled]):focus { &:not([disabled]):focus {
...@@ -265,7 +265,7 @@ $ide-commit-header-height: 48px; ...@@ -265,7 +265,7 @@ $ide-commit-header-height: 48px;
.margin { .margin {
background-color: $white-light; background-color: $white-light;
border-right: 1px solid $theme-gray-100; border-right: 1px solid $gray-100;
.line-insert { .line-insert {
border-right: 1px solid $line-added-dark; border-right: 1px solid $line-added-dark;
...@@ -292,7 +292,7 @@ $ide-commit-header-height: 48px; ...@@ -292,7 +292,7 @@ $ide-commit-header-height: 48px;
.monaco-editor, .monaco-editor,
.monaco-editor-background, .monaco-editor-background,
.monaco-editor .inputarea.ime-input { .monaco-editor .inputarea.ime-input {
background-color: $theme-gray-50; background-color: $gray-50;
} }
} }
} }
...@@ -527,7 +527,7 @@ $ide-commit-header-height: 48px; ...@@ -527,7 +527,7 @@ $ide-commit-header-height: 48px;
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
color: $theme-gray-700; color: $gray-700;
} }
.file-status-icon { .file-status-icon {
...@@ -551,7 +551,7 @@ $ide-commit-header-height: 48px; ...@@ -551,7 +551,7 @@ $ide-commit-header-height: 48px;
&:hover, &:hover,
&:focus { &:focus {
background: $theme-gray-100; background: $gray-100;
outline: 0; outline: 0;
...@@ -563,7 +563,7 @@ $ide-commit-header-height: 48px; ...@@ -563,7 +563,7 @@ $ide-commit-header-height: 48px;
} }
&:active { &:active {
background: $theme-gray-200; background: $gray-200;
} }
&.is-active { &.is-active {
...@@ -767,12 +767,12 @@ $ide-commit-header-height: 48px; ...@@ -767,12 +767,12 @@ $ide-commit-header-height: 48px;
&:hover { &:hover {
color: $gl-text-color; color: $gl-text-color;
background-color: $theme-gray-100; background-color: $gray-100;
} }
&:focus { &:focus {
color: $gl-text-color; color: $gl-text-color;
background-color: $theme-gray-200; background-color: $gray-200;
} }
&.active { &.active {
...@@ -1273,10 +1273,10 @@ $ide-commit-header-height: 48px; ...@@ -1273,10 +1273,10 @@ $ide-commit-header-height: 48px;
.ide-entry-dropdown-toggle { .ide-entry-dropdown-toggle {
padding: $gl-padding-4; padding: $gl-padding-4;
color: $gl-text-color; color: $gl-text-color;
background-color: $theme-gray-100; background-color: $gray-100;
&:hover { &:hover {
background-color: $theme-gray-200; background-color: $gray-200;
} }
&:active, &:active,
...@@ -1331,7 +1331,7 @@ $ide-commit-header-height: 48px; ...@@ -1331,7 +1331,7 @@ $ide-commit-header-height: 48px;
&:focus { &:focus {
outline: 0; outline: 0;
box-shadow: none; box-shadow: none;
border-color: $theme-gray-200; border-color: $gray-200;
} }
} }
...@@ -1358,7 +1358,7 @@ $ide-commit-header-height: 48px; ...@@ -1358,7 +1358,7 @@ $ide-commit-header-height: 48px;
.ide-commit-editor-header { .ide-commit-editor-header {
height: 65px; height: 65px;
padding: 8px 16px; padding: 8px 16px;
background-color: $theme-gray-50; background-color: $gray-50;
box-shadow: inset 0 -1px $white-dark; box-shadow: inset 0 -1px $white-dark;
} }
...@@ -1370,7 +1370,7 @@ $ide-commit-header-height: 48px; ...@@ -1370,7 +1370,7 @@ $ide-commit-header-height: 48px;
.ide-file-icon-holder { .ide-file-icon-holder {
display: flex; display: flex;
align-items: center; align-items: center;
color: $theme-gray-700; color: $gray-700;
} }
.file-row:hover, .file-row:hover,
......
...@@ -277,7 +277,7 @@ ...@@ -277,7 +277,7 @@
padding: $gl-padding; padding: $gl-padding;
background: $white-light; background: $white-light;
border-radius: $border-radius-default; 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; box-shadow: 0 1px 2px $issue-boards-card-shadow;
list-style: none; list-style: none;
line-height: $gl-padding; line-height: $gl-padding;
...@@ -669,7 +669,7 @@ ...@@ -669,7 +669,7 @@
} }
.board-card-info-icon { .board-card-info-icon {
color: $theme-gray-600; color: $gray-600;
margin-right: $gl-padding-4; margin-right: $gl-padding-4;
} }
......
...@@ -261,7 +261,7 @@ ...@@ -261,7 +261,7 @@
.trigger-variables-table-cell { .trigger-variables-table-cell {
font-size: $gl-font-size-small; font-size: $gl-font-size-small;
line-height: $gl-line-height; line-height: $gl-line-height;
border: 1px solid $theme-gray-200; border: 1px solid $gray-200;
padding: $gl-padding-4 6px; padding: $gl-padding-4 6px;
width: 50%; width: 50%;
vertical-align: top; vertical-align: top;
......
...@@ -267,7 +267,7 @@ ...@@ -267,7 +267,7 @@
.prometheus-graph-cursor { .prometheus-graph-cursor {
position: absolute; position: absolute;
background: $theme-gray-600; background: $gray-600;
width: 1px; width: 1px;
} }
...@@ -309,7 +309,7 @@ ...@@ -309,7 +309,7 @@
> .arrow::after { > .arrow::after {
border-top: 6px solid transparent; border-top: 6px solid transparent;
border-bottom: 6px solid transparent; border-bottom: 6px solid transparent;
border-left: 4px solid $theme-gray-50; border-left: 4px solid $gray-50;
} }
.arrow-shadow { .arrow-shadow {
...@@ -331,7 +331,7 @@ ...@@ -331,7 +331,7 @@
> .arrow::after { > .arrow::after {
border-top: 6px solid transparent; border-top: 6px solid transparent;
border-bottom: 6px solid transparent; border-bottom: 6px solid transparent;
border-right: 4px solid $theme-gray-50; border-right: 4px solid $gray-50;
} }
.arrow-shadow { .arrow-shadow {
...@@ -364,7 +364,7 @@ ...@@ -364,7 +364,7 @@
} }
> .popover-title { > .popover-title {
background-color: $theme-gray-50; background-color: $gray-50;
border-radius: $border-radius-default $border-radius-default 0 0; border-radius: $border-radius-default $border-radius-default 0 0;
} }
} }
...@@ -439,7 +439,7 @@ ...@@ -439,7 +439,7 @@
} }
> text { > text {
fill: $theme-gray-600; fill: $gray-600;
font-size: 10px; font-size: 10px;
} }
} }
...@@ -482,5 +482,5 @@ ...@@ -482,5 +482,5 @@
} }
.prometheus-table-row-highlight { .prometheus-table-row-highlight {
background-color: $theme-gray-100; background-color: $gray-100;
} }
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
} }
.x-axis-text { .x-axis-text {
fill: $theme-gray-900; fill: $gray-900;
} }
.bar-rect { .bar-rect {
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
text { text {
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;
fill: $theme-gray-800; fill: $gray-800;
} }
} }
} }
...@@ -87,5 +87,5 @@ ...@@ -87,5 +87,5 @@
.animate-flicker { .animate-flicker {
animation: flickerAnimation 1.5s infinite; animation: flickerAnimation 1.5s infinite;
fill: $theme-gray-500; fill: $gray-500;
} }
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
&:hover { &:hover {
background-color: $gray-darker; background-color: $gray-darker;
color: $theme-gray-900; color: $gray-900;
} }
} }
......
...@@ -934,7 +934,7 @@ ...@@ -934,7 +934,7 @@
.sidebar-collapsed-divider { .sidebar-collapsed-divider {
line-height: 5px; line-height: 5px;
font-size: 12px; font-size: 12px;
color: $theme-gray-700; color: $gray-700;
+ .sidebar-collapsed-icon { + .sidebar-collapsed-icon {
padding-top: 0; padding-top: 0;
......
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
justify-content: space-between; justify-content: space-between;
padding: $gl-padding; padding: $gl-padding;
border-radius: $border-radius-default; border-radius: $border-radius-default;
border: 1px solid $theme-gray-100; border: 1px solid $gray-100;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
...@@ -257,7 +257,7 @@ ...@@ -257,7 +257,7 @@
} }
.label-badge { .label-badge {
color: $theme-gray-900; color: $gray-900;
font-weight: $gl-font-weight-normal; font-weight: $gl-font-weight-normal;
padding: $gl-padding-4 $gl-padding-8; padding: $gl-padding-4 $gl-padding-8;
border-radius: $border-radius-default; border-radius: $border-radius-default;
...@@ -269,7 +269,7 @@ ...@@ -269,7 +269,7 @@
} }
.label-badge-gray { .label-badge-gray {
background-color: $theme-gray-100; background-color: $gray-100;
} }
.label-links { .label-links {
...@@ -326,11 +326,11 @@ ...@@ -326,11 +326,11 @@
} }
.label-action { .label-action {
color: $theme-gray-800; color: $gray-800;
cursor: pointer; cursor: pointer;
svg { svg {
fill: $theme-gray-800; fill: $gray-800;
} }
&:hover { &:hover {
......
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
&::before { &::before {
content: ''; content: '';
border-left: 1px solid $theme-gray-200; border-left: 1px solid $gray-200;
position: absolute; position: absolute;
left: 32px; left: 32px;
top: -17px; top: -17px;
...@@ -907,7 +907,7 @@ ...@@ -907,7 +907,7 @@
} }
.btn svg { .btn svg {
fill: $theme-gray-700; fill: $gray-700;
} }
.dropdown-menu { .dropdown-menu {
...@@ -951,7 +951,7 @@ ...@@ -951,7 +951,7 @@
.coverage { .coverage {
font-size: 12px; font-size: 12px;
color: $theme-gray-700; color: $gray-700;
line-height: initial; line-height: initial;
} }
......
...@@ -8,7 +8,7 @@ $status-box-line-height: 26px; ...@@ -8,7 +8,7 @@ $status-box-line-height: 26px;
padding: $gl-padding-8; padding: $gl-padding-8;
margin-top: $gl-padding-8; margin-top: $gl-padding-8;
border-radius: $border-radius-default; border-radius: $border-radius-default;
background-color: $theme-gray-100; background-color: $gray-100;
.milestone { .milestone {
border: 0; border: 0;
......
...@@ -147,7 +147,7 @@ ...@@ -147,7 +147,7 @@
} }
.sidebar-item-value & { .sidebar-item-value & {
fill: $theme-gray-700; fill: $gray-700;
} }
} }
......
...@@ -5,7 +5,7 @@ $note-form-margin-left: 72px; ...@@ -5,7 +5,7 @@ $note-form-margin-left: 72px;
@mixin vertical-line($left) { @mixin vertical-line($left) {
&::before { &::before {
content: ''; content: '';
border-left: 2px solid $theme-gray-100; border-left: 2px solid $gray-100;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
......
...@@ -60,11 +60,11 @@ ...@@ -60,11 +60,11 @@
} }
&.ui-dark { &.ui-dark {
background-color: $theme-gray-900; background-color: $gray-900;
} }
&.ui-light { &.ui-light {
background-color: $theme-gray-200; background-color: $gray-200;
} }
} }
......
...@@ -459,7 +459,7 @@ ...@@ -459,7 +459,7 @@
margin-right: $gl-padding-4; margin-right: $gl-padding-4;
margin-bottom: $gl-padding-4; margin-bottom: $gl-padding-4;
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
background-color: $theme-gray-100; background-color: $gray-100;
line-height: $gl-btn-line-height; line-height: $gl-btn-line-height;
&:hover { &:hover {
...@@ -914,7 +914,7 @@ ...@@ -914,7 +914,7 @@
} }
.repository-language-bar-tooltip-share { .repository-language-bar-tooltip-share {
color: $theme-gray-400; color: $gray-400;
} }
pre.light-well { pre.light-well {
......
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
} }
&.neutral svg { &.neutral svg {
color: $theme-gray-700; color: $gray-700;
} }
.ci-status-icon { .ci-status-icon {
......
...@@ -297,7 +297,7 @@ ...@@ -297,7 +297,7 @@
.btn-clipboard { .btn-clipboard {
background-color: $white-light; background-color: $white-light;
border: 1px solid $theme-gray-200; border: 1px solid $gray-200;
} }
.deploy-token-help-block { .deploy-token-help-block {
......
---
title: Remove all `$theme-gray-{weight}` variables in favor of `$gray-{weight}`
merge_request: 24333
author: George Tsiolis
type: other
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