diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles')
6 files changed, 527 insertions, 99 deletions
diff --git a/app/assets/stylesheets/page_bundles/_ide_mixins.scss b/app/assets/stylesheets/page_bundles/_ide_mixins.scss index 9465dd5bed6..48b8a7230b1 100644 --- a/app/assets/stylesheets/page_bundles/_ide_mixins.scss +++ b/app/assets/stylesheets/page_bundles/_ide_mixins.scss @@ -9,7 +9,6 @@ top: 0; font-size: 12px; border-top-right-radius: $border-radius-default; - margin-left: -$gl-padding; .controllers { @include build-controllers(15px, center, false, 0, inline, 0); diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss index 1aa112e0957..5675835a622 100644 --- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss @@ -69,8 +69,17 @@ display: none !important; } } +} + +.multi-file-editor-holder { + height: 100%; + min-height: 0; // firefox fix +} - .monaco-diff-editor.vs { +// Apply theme related overrides only to the white theme and none theme +.theme-white .blob-editor-container, +.theme-none .blob-editor-container { + .monaco-diff-editor { .editor.modified { box-shadow: none; } @@ -131,16 +140,14 @@ } } -.multi-file-editor-holder { - height: 100%; - min-height: 0; // firefox fix - - &.is-readonly .vs, - .vs .editor.original { +.theme-white .multi-file-editor-holder, +.theme-none .multi-file-editor-holder { + &.is-readonly, + .editor.original { .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input { - background-color: $gray-50; + background-color: $gray-10; } } } diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss new file mode 100644 index 00000000000..e4c01c2bd6c --- /dev/null +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -0,0 +1,308 @@ +// ------- +// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes +// ------- +.ide.theme-dark { + a:not(.btn) { + color: var(--ide-link-color); + } + + h1, + h2, + h3, + h4, + h5, + h6, + code, + .md table:not(.code), + .md, + .md p, + .context-header > a, + input, + textarea, + .md-area.is-focused, + .dropdown-menu li button, + .dropdown-menu-selectable li a.is-active, + .dropdown-menu-inner-title, + .dropdown-menu-inner-content, + .nav-links:not(.quick-links) li:not(.md-header-toolbar) a, + .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover, + .nav-links:not(.quick-links) li:not(.md-header-toolbar) a.active .badge.badge-pill, + .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover .badge.badge-pill, + .badge.badge-pill, + .bs-callout, + .ide-pipeline .top-bar, + .ide-pipeline .top-bar .controllers .controllers-buttons { + color: var(--ide-text-color); + } + + .drag-handle:hover, + .card-header .badge.badge-pill { + background-color: var(--ide-dropdown-hover-background); + } + + .file-row .file-row-icon svg, + .file-row:hover .file-row-icon svg, + .controllers-buttons svg { + color: var(--ide-text-color-secondary); + } + + .text-secondary { + color: var(--ide-text-color-secondary) !important; + } + + input[type='search']::placeholder, + input[type='text']::placeholder, + textarea::placeholder, + .dropdown-input .fa { + color: var(--ide-input-border); + } + + .ide-nav-form .input-icon { + color: var(--ide-input-border); + } + + code, + .badge.badge-pill, + .card-header, + .bs-callout, + .ide-pipeline .top-bar, + .ide-terminal .top-bar { + background-color: var(--ide-background); + } + + .bs-callout { + border-color: var(--ide-dropdown-background); + + code { + background-color: var(--ide-dropdown-background); + } + } + + .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover { + border-color: var(--ide-dropdown-hover-background); + } + + .common-note-form .md-area { + border-color: var(--ide-input-border); + } + + &, + .md table:not(.code) tr th, + .common-note-form .md-area, + .card { + background-color: var(--ide-highlight-background); + } + + .card, + .card-header, + .ide-terminal .top-bar, + .ide-pipeline .top-bar { + border-color: var(--ide-border-color); + } + + hr, + .md h1, + .md h2, + .md blockquote, + pre, + .md table:not(.code) tbody td, + .md table:not(.code) tr th, + .nav-links:not(.quick-links) { + border-color: var(--ide-border-color-alt); + } + + .ide-sidebar-link.active { + color: var(--ide-highlight-accent); + box-shadow: inset 3px 0 var(--ide-highlight-accent); + + &.is-right { + box-shadow: inset -3px 0 var(--ide-highlight-accent); + } + } + + .nav-links li.active a, + .nav-links li a.active { + border-color: var(--ide-highlight-accent); + color: var(--ide-text-color); + } + + .avatar-container { + &, + .avatar { + color: var(--ide-text-color); + background-color: var(--ide-highlight-background); + border-color: var(--ide-highlight-background); + } + } + + input[type='text'], + input[type='search'], + .filtered-search-box { + border-color: var(--ide-input-border); + background: var(--ide-input-background) !important; + } + + input[type='text'], + input[type='search'], + .filtered-search-box, + textarea { + color: var(--ide-input-color) !important; + } + + .filtered-search-box input[type='search'] { + border-color: transparent; + } + + .filtered-search-token .value-container, + .filtered-search-term .value-container { + background-color: var(--ide-dropdown-hover-background); + color: var(--ide-text-color); + + &:hover { + background-color: var(--ide-input-border); + } + } + + @function calc-btn-hover-padding($original-padding, $original-border: 1px) { + @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width)); + } + + .btn:not(.btn-link):not([disabled]):hover { + border-width: var(--ide-btn-hover-border-width); + padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px); + } + + .btn:not([disabled]).btn-sm:hover { + padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px); + } + + .btn:not([disabled]).btn-block:hover { + padding: calc-btn-hover-padding(6px) 0; + } + + .btn-inverted, + .btn-default, + .dropdown, + .dropdown-menu-toggle { + background-color: var(--ide-input-background) !important; + color: var(--ide-input-color) !important; + border-color: var(--ide-btn-default-border); + } + + .btn-inverted, + .btn-default { + &:hover, + &:focus { + border-color: var(--ide-btn-default-hover-border) !important; + } + } + + .dropdown, + .dropdown-menu-toggle { + &:hover, + &:focus { + background-color: var(--ide-dropdown-btn-hover-background) !important; + border-color: var(--ide-dropdown-btn-hover-border) !important; + } + } + + .dropdown-menu { + color: var(--ide-text-color); + border-color: var(--ide-background); + background-color: var(--ide-dropdown-background); + + .divider, + .nav-links:not(.quick-links) { + background-color: var(--ide-dropdown-hover-background); + border-color: var(--ide-dropdown-hover-background); + } + + .nav-links li a.active { + border-color: var(--ide-highlight-accent); + } + + .nav-links:not(.quick-links) li:not(.md-header-toolbar) a { + color: var(--ide-text-color); + + &.active { + color: var(--ide-text-color); + } + } + + li > a:not(.disable-hover):hover, + li > a:not(.disable-hover):focus, + li button:not(.disable-hover):hover, + li button:not(.disable-hover):focus, + li button.is-focused { + background-color: var(--ide-dropdown-hover-background); + color: var(--ide-text-color); + } + } + + .dropdown-title, + .dropdown-input { + border-color: var(--ide-dropdown-hover-background) !important; + } + + .btn-primary, + .btn-info { + background-color: var(--ide-btn-primary-background); + border-color: var(--ide-btn-primary-border) !important; + + &:hover, + &:focus { + border-color: var(--ide-btn-primary-hover-border) !important; + } + } + + .btn-success { + background-color: var(--ide-btn-success-background); + border-color: var(--ide-btn-success-border) !important; + + &:hover, + &:focus { + border-color: var(--ide-btn-success-hover-border) !important; + } + } + + .btn[disabled] { + background: var(--ide-btn-default-background) !important; + border: 1px solid var(--ide-btn-disabled-border) !important; + color: var(--ide-btn-disabled-color) !important; + } + + pre code, + .md table:not(.code) tbody { + background-color: var(--ide-border-color); + } + + .animation-container { + [class^='skeleton-line-'] { + background-color: var(--ide-animation-gradient-1); + + &::after { + background-image: linear-gradient(to right, + var(--ide-animation-gradient-1) 0%, + var(--ide-animation-gradient-2) 20%, + var(--ide-animation-gradient-1) 40%, + var(--ide-animation-gradient-1) 100%); + } + } + } + + .idiff.addition { + background-color: var(--ide-diff-insert); + } + + .idiff.deletion { + background-color: var(--ide-diff-remove); + } +} + +.navbar.theme-dark { + border-bottom-color: transparent; +} + +.theme-dark ~ .popover { + box-shadow: none; +} diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 024c1781bf8..61914740ac0 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -2,6 +2,9 @@ @import 'framework/mixins'; @import './ide_mixins'; @import './ide_monaco_overrides'; +@import './ide_theme_overrides'; + +@import './ide_themes/dark'; $search-list-icon-width: 18px; $ide-activity-bar-width: 60px; @@ -25,7 +28,7 @@ $ide-commit-header-height: 48px; position: relative; margin-top: 0; padding-bottom: $ide-statusbar-height; - color: $gl-text-color; + color: var(--ide-text-color, $gl-text-color); min-height: 0; // firefox fix &.is-collapsed { @@ -61,14 +64,14 @@ $ide-commit-header-height: 48px; display: flex; flex-direction: column; flex: 1; - border-left: 1px solid $white-dark; + border-left: 1px solid var(--ide-border-color, $white-dark); overflow: hidden; } .multi-file-tabs { display: flex; - background-color: $gray-light; - box-shadow: inset 0 -1px $white-dark; + background-color: var(--ide-background, $gray-light); + box-shadow: inset 0 -1px var(--ide-border-color, $white-dark); > ul { display: flex; @@ -79,13 +82,13 @@ $ide-commit-header-height: 48px; display: flex; align-items: center; padding: $grid-size $gl-padding; - background-color: $gray-normal; - border-right: 1px solid $white-dark; - border-bottom: 1px solid $white-dark; + 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); &.active { - background-color: $white; - border-bottom-color: $white; + background-color: var(--ide-highlight-background, $white); + border-bottom-color: var(--ide-border-color, $white); } &:not(.disabled) { @@ -118,7 +121,7 @@ $ide-commit-header-height: 48px; background: none; border: 0; border-radius: $border-radius-default; - color: $gray-900; + color: var(--ide-text-color, $gray-900); svg { position: relative; @@ -133,11 +136,11 @@ $ide-commit-header-height: 48px; } &:not([disabled]):hover { - background-color: $gray-200; + background-color: var(--ide-input-border, $gray-200); } &:not([disabled]):focus { - background-color: $blue-500; + background-color: var(--ide-link-color, $blue-500); color: $white; outline: 0; @@ -164,10 +167,11 @@ $ide-commit-header-height: 48px; height: 100%; overflow: auto; padding: $gl-padding; + background-color: var(--ide-border-color, transparent); } .file-container { - background-color: $gray-darker; + background-color: var(--ide-border-color, $gray-darker); display: flex; height: 100%; align-items: center; @@ -183,13 +187,13 @@ $ide-commit-header-height: 48px; .file-info { font-size: $label-font-size; - color: $diff-image-info-color; + color: var(--ide-text-color, $diff-image-info-color); } } } .ide-mode-tabs { - border-bottom: 1px solid $white-dark; + border-bottom: 1px solid var(--ide-border-color, $white-dark); li a { padding: $gl-padding-8 $gl-padding; @@ -203,9 +207,10 @@ $ide-commit-header-height: 48px; } .ide-status-bar { - border-top: 1px solid $white-dark; + color: var(--ide-text-color, $gl-text-color); + border-top: 1px solid var(--ide-border-color, $white-dark); padding: 2px $gl-padding-8 0; - background: $white; + background-color: var(--ide-footer-background, $white); display: flex; justify-content: space-between; height: $ide-statusbar-height; @@ -278,8 +283,7 @@ $ide-commit-header-height: 48px; position: relative; width: 340px; padding: 0; - background-color: $gray-light; - padding-right: 1px; + background-color: var(--ide-background, $gray-light); .context-header { width: auto; @@ -306,9 +310,9 @@ $ide-commit-header-height: 48px; display: flex; flex: 1; flex-direction: column; - background-color: $white; - border-left: 1px solid $white-dark; - border-top: 1px solid $white-dark; + 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-top-left-radius: $border-radius-small; min-height: 0; // firefox fix } @@ -333,15 +337,10 @@ $ide-commit-header-height: 48px; .multi-file-commit-panel-header { height: $ide-commit-header-height; - border-bottom: 1px solid $white-dark; + border-bottom: 1px solid var(--ide-border-color-alt, $white-dark); padding: 12px 0; } -.multi-file-commit-panel-collapse-btn { - border-left: 1px solid $white-dark; - margin-left: auto; -} - .multi-file-commit-list { flex: 1; overflow: auto; @@ -363,7 +362,7 @@ $ide-commit-header-height: 48px; display: block; margin-left: auto; margin-right: auto; - color: $gray-700; + color: var(--ide-text-color-secondary, $gray-700); } .file-status-icon { @@ -387,17 +386,17 @@ $ide-commit-header-height: 48px; &:hover, &:focus { - background: $gray-100; + background: var(--ide-background, $gray-100); outline: 0; } &:active { - background: $gray-200; + background: var(--ide-background, $gray-200); } &.is-active { - background-color: $white-normal; + background-color: var(--ide-background, $white-normal); } svg { @@ -418,8 +417,8 @@ $ide-commit-header-height: 48px; .multi-file-commit-form { position: relative; - background-color: $white; - border-left: 1px solid $white-dark; + background-color: var(--ide-highlight-background, $white); + border-left: 1px solid var(--ide-border-color, $white-dark); transition: all 0.3s ease; > form, @@ -427,7 +426,7 @@ $ide-commit-header-height: 48px; padding: $gl-padding 0; margin-left: $gl-padding; margin-right: $gl-padding; - border-top: 1px solid $white-dark; + border-top: 1px solid var(--ide-border-color-alt, $white-dark); } .btn { @@ -488,6 +487,7 @@ $ide-commit-header-height: 48px; height: 100vh; align-items: center; justify-content: center; + background-color: var(--ide-border-color, transparent); } .ide { @@ -504,7 +504,7 @@ $ide-commit-header-height: 48px; margin-right: $gl-padding; &.is-first { - border-bottom: 1px solid $white-dark; + border-bottom: 1px solid var(--ide-border-color-alt, $white-dark); } } @@ -512,12 +512,7 @@ $ide-commit-header-height: 48px; width: $ide-commit-row-height; height: $ide-commit-row-height; color: inherit; -} - -.ide-commit-file-count { - min-width: 22px; - background-color: $gray-light; - border: 1px solid $white-dark; + background-color: var(--ide-background, $white-normal); } .ide-commit-options { @@ -549,7 +544,7 @@ $ide-commit-header-height: 48px; height: 60px; width: 100%; padding: 0 $gl-padding; - color: $gl-text-color-secondary; + color: var(--ide-text-color-secondary, $gl-text-color-secondary); background-color: transparent; border: 0; border-top: 1px solid transparent; @@ -562,22 +557,22 @@ $ide-commit-header-height: 48px; } &:hover { - color: $gl-text-color; - background-color: $gray-100; + color: var(--ide-text-color, $gl-text-color); + background-color: var(--ide-background-hover, $gray-100); } &:focus { - color: $gl-text-color; - background-color: $gray-200; + color: var(--ide-text-color, $gl-text-color); + background-color: var(--ide-background-hover, $gray-200); } &.active { // extend width over border of sidebar section width: calc(100% + 1px); padding-right: $gl-padding + 1px; - background-color: $white; - border-top-color: $white-dark; - border-bottom-color: $white-dark; + 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); &::after { content: ''; @@ -586,7 +581,7 @@ $ide-commit-header-height: 48px; top: 0; bottom: 0; width: 1px; - background: $white; + background: var(--ide-highlight-background, $white); } &.is-right { @@ -609,7 +604,7 @@ $ide-commit-header-height: 48px; .ide-commit-message-field { height: 200px; - background-color: $white; + background-color: var(--ide-highlight-background, $white); .md-area { display: flex; @@ -623,7 +618,7 @@ $ide-commit-header-height: 48px; .form-text.text-muted { margin-top: 2px; - color: $blue-500; + color: var(--ide-link-color, $blue-500); cursor: pointer; } } @@ -686,14 +681,14 @@ $ide-commit-header-height: 48px; padding: 12px 0; margin-left: $ide-tree-padding; margin-right: $ide-tree-padding; - border-bottom: 1px solid $white-dark; + border-bottom: 1px solid var(--ide-border-color-alt, $white-dark); svg { - color: $gray-700; + color: var(--ide-text-color-secondary, $gray-700); &:focus, &:hover { - color: $blue-600; + color: var(--ide-link-color, $blue-600); } } @@ -702,7 +697,7 @@ $ide-commit-header-height: 48px; } button { - color: $gl-text-color; + color: var(--ide-text-color, $gl-text-color); } } @@ -718,21 +713,21 @@ $ide-commit-header-height: 48px; .dropdown-menu-toggle { svg { vertical-align: middle; - color: $gray-700; + &, &:hover { - color: $gray-700; + color: var(--ide-text-color-secondary, $gray-700); } } &:hover { - background-color: $white-normal; + background-color: var(--ide-dropdown-btn-hover-background, $white-normal); } } &.show { .dropdown-menu-toggle { - background-color: $white-dark; + background-color: var(--ide-input-background, $white-dark); } } } @@ -798,12 +793,12 @@ $ide-commit-header-height: 48px; } a { - color: $blue-600; + color: var(--ide-link-color, $blue-600); } } .ide-review-sub-header { - color: $gl-text-color-secondary; + color: var(--ide-text-color-secondary, $gl-text-color-secondary); } .ide-tree-changes { @@ -819,7 +814,7 @@ $ide-commit-header-height: 48px; bottom: 0; right: 0; z-index: 10; - background: $white; + background-color: var(--ide-highlight-background, $white); overflow: auto; display: flex; flex-direction: column; @@ -883,14 +878,18 @@ $ide-commit-header-height: 48px; .ide-right-sidebar { .ide-activity-bar { - border-left: 1px solid $white-dark; + border-left: 1px solid var(--ide-border-color, $white-dark); } .multi-file-commit-panel-inner { width: 350px; - padding: $grid-size $gl-padding; - background-color: $white; - border-left: 1px solid $white-dark; + padding: $grid-size 0; + background-color: var(--ide-highlight-background, $white); + border-left: 1px solid var(--ide-border-color, $white-dark); + } + + .ide-right-sidebar-jobs-detail { + padding-bottom: 0; } .ide-right-sidebar-clientside { @@ -901,6 +900,10 @@ $ide-commit-header-height: 48px; .ide-pipeline { @include ide-trace-view(); + svg { + --svg-status-bg: var(--ide-background, $white); + } + .empty-state { p { margin: $grid-size 0; @@ -913,15 +916,12 @@ $ide-commit-header-height: 48px; margin: 0; } } - - .build-trace { - margin-left: -$gl-padding; - } } .ide-pipeline-list { flex: 1; overflow: auto; + padding: 0 $gl-padding; } .ide-pipeline-header { @@ -935,7 +935,7 @@ $ide-commit-header-height: 48px; padding: 16px; &:not(:last-child) { - border-bottom: 1px solid $border-color; + border-bottom: 1px solid var(--ide-border-color, $border-color); } .ci-status-icon { @@ -964,6 +964,7 @@ $ide-commit-header-height: 48px; .ide-job-header { min-height: 60px; + padding: 0 $gl-padding; } .ide-nav-form { @@ -976,7 +977,7 @@ $ide-commit-header-height: 48px; text-align: center; &:not(.active) { - background-color: $gray-light; + background-color: var(--ide-dropdown-background, $gray-light); } } } @@ -1025,7 +1026,7 @@ $ide-commit-header-height: 48px; .ide-merge-request-project-path { font-size: 12px; line-height: 16px; - color: $gl-text-color-secondary; + color: var(--ide-text-color-secondary, $gl-text-color-secondary); } .ide-merge-request-info { @@ -1041,17 +1042,17 @@ $ide-commit-header-height: 48px; .ide-entry-dropdown-toggle { padding: $gl-padding-4; - color: $gl-text-color; - background-color: $gray-100; + color: var(--ide-text-color, $gl-text-color); + background-color: var(--ide-background, $gray-100); &:hover { - background-color: $gray-200; + background-color: var(--ide-file-row-btn-hover-background, $gray-200); } &:active, &:focus { color: $white-normal; - background-color: $blue-500; + background-color: var(--ide-link-color, $blue-500); outline: 0; } } @@ -1065,14 +1066,14 @@ $ide-commit-header-height: 48px; .dropdown.show .ide-entry-dropdown-toggle { color: $white-normal; - background-color: $blue-500; + background-color: var(--ide-link-color, $blue-500); } } .ide-preview-header { padding: 0 $grid-size; - border-bottom: 1px solid $white-dark; - background-color: $gray-light; + border-bottom: 1px solid var(--ide-border-color-alt, $white-dark); + background-color: var(--ide-highlight-background, $gray-light); min-height: 44px; } @@ -1082,7 +1083,7 @@ $ide-commit-header-height: 48px; max-width: 24px; padding: 0; margin: 0 ($grid-size / 2); - color: $gl-gray-light; + color: var(--ide-text-color-secondary, $gl-gray-light); &:first-child { margin-left: 0; @@ -1096,7 +1097,7 @@ $ide-commit-header-height: 48px; &:focus { outline: 0; box-shadow: none; - border-color: $gray-200; + border-color: var(--ide-border-color, $gray-200); } } @@ -1108,8 +1109,8 @@ $ide-commit-header-height: 48px; .ide-file-templates { padding: $grid-size $gl-padding; - background-color: $gray-light; - border-bottom: 1px solid $white-dark; + background-color: var(--ide-background, $gray-light); + border-bottom: 1px solid var(--ide-border-color, $white-dark); .dropdown { min-width: 180px; @@ -1123,8 +1124,8 @@ $ide-commit-header-height: 48px; .ide-commit-editor-header { height: 65px; padding: 8px 16px; - background-color: $gray-50; - box-shadow: inset 0 -1px $white-dark; + background-color: var(--ide-background, $gray-10); + box-shadow: inset 0 -1px var(--ide-border-color, $white-dark); } .ide-commit-list-changed-icon { @@ -1135,16 +1136,26 @@ $ide-commit-header-height: 48px; .ide-file-icon-holder { display: flex; align-items: center; - color: $gray-700; + color: var(--ide-text-color-secondary, $gray-700); +} + +.file-row:active { + background: var(--ide-background, $gray-200); +} + +.file-row.is-active { + background: var(--ide-background, $gray-100); } .file-row:hover, .file-row:focus { + background: var(--ide-background, $gray-100); + .ide-new-btn { display: block; } .folder-icon { - fill: $gl-text-color-secondary; + fill: var(--ide-text-color-secondary, $gl-text-color-secondary); } } diff --git a/app/assets/stylesheets/page_bundles/ide_themes/README.md b/app/assets/stylesheets/page_bundles/ide_themes/README.md new file mode 100644 index 00000000000..535179cc4c2 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/ide_themes/README.md @@ -0,0 +1,53 @@ +# Web IDE Themes + +Web IDE currently supports 5 syntax highlighting themes based on themes from the user's profile preferences: + +* White +* Dark +* Monokai +* Solarized Dark +* Solarized Light + +Currently, the Web IDE supports the white theme by default, and the dark theme by the introduction of CSS +variables. + +The Web IDE automatically adds an appropriate theme class to the `ide.vue` component based on the current syntax +highlighting theme. Below are those theme classes, which come from the `gon.user_color_scheme` global setting: + +| # | Color Scheme | `gon.user_color_scheme` | Theme class | +|---|-----------------|-------------------------|-------------------------| +| 1 | White | `"white"` | `.theme-white` | +| 2 | Dark | `"dark"` | `.theme-dark` | +| 3 | Monokai | `"monokai"` | `.theme-monokai` | +| 4 | Solarized Dark | `"solarized-dark"` | `.theme-solarized-dark` | +| 5 | Solarized Light | `"solarized-light"` | `.theme-solarized-light` | +| 6 | None | `"none"` | `.theme-none` | + +## Adding New Themes (SCSS) + +To add a new theme, follow the following steps: + +1. Pick a theme from the table above, lets say **Solarized Dark**. +2. Create a new file in this folder called `_solarized_dark.scss`. +3. Copy over all the CSS variables from `_dark.scss` to `_solarized_dark.scss` and assign them your own values. + Put them under the selector `.ide.theme-solarized-dark`. +4. Import this newly created SCSS file in `ide.scss` file in the parent directory. +5. To make sure the variables apply to to your theme, add the selector `.ide.theme-solarized-dark` to the top + of `_ide_theme_overrides.scss` file. The file should now look like this: + + ```scss + .ide.theme-dark, + .ide.theme-solarized-dark { + /* file contents */ + } + ``` + + This step is temporary until all CSS variables in that file have their + default values assigned. +6. That's it! Raise a merge request with your newly added theme. + +## Modifying Monaco Themes + +Monaco themes are defined in Javascript and are stored in the `app/assets/javascripts/ide/lib/themes/` directory. +To modify any syntax highlighting colors or to synchronize the theme colors with syntax highlighting colors, you +can modify the files in that directory directly. diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss new file mode 100644 index 00000000000..37e6be9849b --- /dev/null +++ b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss @@ -0,0 +1,50 @@ +// ------- +// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes +// ------- +.ide.theme-dark { + --ide-border-color: #1d1f21; + --ide-border-color-alt: #333; + --ide-highlight-accent: #fff; + --ide-text-color: #ccc; + --ide-text-color-secondary: #ccc; + --ide-background: #333; + --ide-background-hover: #2d2d2d; + --ide-highlight-background: #252526; + --ide-link-color: #428fdc; + --ide-footer-background: #060606; + + --ide-input-border: #868686; + --ide-input-background: transparent; + --ide-input-color: #fff; + + --ide-btn-default-background: transparent; + --ide-btn-default-border: #bfbfbf; + --ide-btn-default-hover-border: #d8d8d8; + + --ide-btn-primary-background: #1068bf; + --ide-btn-primary-border: #428fdc; + --ide-btn-primary-hover-border: #63a6e9; + + --ide-btn-success-background: #217645; + --ide-btn-success-border: #108548; + --ide-btn-success-hover-border: #2da160; + + --ide-btn-disabled-border: rgba(223, 223, 223, 0.24); + --ide-btn-disabled-color: rgba(145, 145, 145, 0.48); + + --ide-btn-hover-border-width: 2px; + + --ide-dropdown-background: #404040; + --ide-dropdown-hover-background: #525252; + + --ide-dropdown-btn-hover-border: #{$gray-200}; + --ide-dropdown-btn-hover-background: #{$gray-900}; + + --ide-file-row-btn-hover-background: #{$gray-800}; + + --ide-diff-insert: rgba(155, 185, 85, 0.2); + --ide-diff-remove: rgba(255, 0, 0, 0.2); + + --ide-animation-gradient-1: #{$gray-800}; + --ide-animation-gradient-2: #{$gray-700}; +} |