diff --git a/frontend/resources/fonts/RobotoMono-Regular.ttf b/frontend/resources/fonts/RobotoMono-Regular.ttf new file mode 100644 index 0000000000..6df2b25360 Binary files /dev/null and b/frontend/resources/fonts/RobotoMono-Regular.ttf differ diff --git a/frontend/resources/fonts/SpaceMono-Bold.ttf b/frontend/resources/fonts/SpaceMono-Bold.ttf deleted file mode 100644 index 20e3449515..0000000000 Binary files a/frontend/resources/fonts/SpaceMono-Bold.ttf and /dev/null differ diff --git a/frontend/resources/fonts/SpaceMono-BoldItalic.ttf b/frontend/resources/fonts/SpaceMono-BoldItalic.ttf deleted file mode 100644 index ff2ea5a5c2..0000000000 Binary files a/frontend/resources/fonts/SpaceMono-BoldItalic.ttf and /dev/null differ diff --git a/frontend/resources/fonts/SpaceMono-Italic.ttf b/frontend/resources/fonts/SpaceMono-Italic.ttf deleted file mode 100644 index f36282f261..0000000000 Binary files a/frontend/resources/fonts/SpaceMono-Italic.ttf and /dev/null differ diff --git a/frontend/resources/fonts/SpaceMono-Regular.ttf b/frontend/resources/fonts/SpaceMono-Regular.ttf deleted file mode 100644 index 04e56b923f..0000000000 Binary files a/frontend/resources/fonts/SpaceMono-Regular.ttf and /dev/null differ diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss index 583ee3a73a..c2f2ce7561 100644 --- a/frontend/resources/styles/common/refactor/mixins.scss +++ b/frontend/resources/styles/common/refactor/mixins.scss @@ -63,6 +63,13 @@ line-height: 1.2; } +@mixin codeTypography { + font-family: "robotomono", monospace; + font-size: $fs-12; + font-weight: $fw400; + line-height: 1.2; +} + @mixin textEllipsis { max-width: 99%; overflow: hidden; diff --git a/frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss b/frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss index 5ae417d47e..ddfa3a09e7 100644 --- a/frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss @@ -1,98 +1,124 @@ -/** - * Panda Syntax Theme for Highlight.js - * Based on: https://github.com/tinkertrain/panda-syntax-vscode - * Author: Annmarie Switzer - */ +/*! + Theme: GitHub Dark Dimmed + Description: Dark dimmed theme as seen on github.com + Author: github.com + Maintainer: @Hirse + Updated: 2021-05-15 + + Colors taken from GitHub's CSS +*/ .hljs { - color: #e6e6e6; - background: #2a2c2d; + color: #adbac7; + background: #22272e; +} + +.hljs-doctag, +.hljs-keyword, +.hljs-meta .hljs-keyword, +.hljs-template-tag, +.hljs-template-variable, +.hljs-type, +.hljs-variable.language_ { + /* prettylights-syntax-keyword */ + color: #f47067; +} + +.hljs-title, +.hljs-title.class_, +.hljs-title.class_.inherited__, +.hljs-title.function_ { + /* prettylights-syntax-entity */ + color: #dcbdfb; +} + +.hljs-attr, +.hljs-attribute, +.hljs-literal, +.hljs-meta, +.hljs-number, +.hljs-operator, +.hljs-variable, +.hljs-selector-attr, +.hljs-selector-class, +.hljs-selector-id { + /* prettylights-syntax-constant */ + color: #6cb6ff; +} + +.hljs-regexp, +.hljs-string, +.hljs-meta .hljs-string { + /* prettylights-syntax-string */ + color: #96d0ff; +} + +.hljs-built_in, +.hljs-symbol { + /* prettylights-syntax-variable */ + color: #f69d50; +} + +.hljs-comment, +.hljs-code, +.hljs-formula { + /* prettylights-syntax-comment */ + color: #768390; +} + +.hljs-name, +.hljs-quote, +.hljs-selector-tag, +.hljs-selector-pseudo { + /* prettylights-syntax-entity-tag */ + color: #8ddb8c; +} + +.hljs-subst { + /* prettylights-syntax-storage-modifier-import */ + color: #adbac7; +} + +.hljs-section { + /* prettylights-syntax-markup-heading */ + color: #316dca; + font-weight: bold; +} + +.hljs-bullet { + /* prettylights-syntax-markup-list */ + color: #eac55f; } .hljs-emphasis { + /* prettylights-syntax-markup-italic */ + color: #adbac7; font-style: italic; } .hljs-strong { + /* prettylights-syntax-markup-bold */ + color: #adbac7; font-weight: bold; } -.hljs-link { - text-decoration: underline; +.hljs-addition { + /* prettylights-syntax-markup-inserted */ + color: #b4f1b4; + background-color: #1b4721; } -.hljs-comment, -.hljs-quote { - color: #bbbbbb; - font-style: italic; -} - -.hljs-params { - color: #bbbbbb; -} - -.hljs-punctuation, -.hljs-attr { - color: #e6e6e6; -} - -.hljs-selector-tag, -.hljs-name, -.hljs-meta { - color: #ff4b82; -} - -.hljs-operator, -.hljs-char.escape_ { - color: #b084eb; -} - -.hljs-keyword, .hljs-deletion { - color: #ff75b5; + /* prettylights-syntax-markup-deleted */ + color: #ffd8d3; + background-color: #78191b; } -.hljs-regexp, -.hljs-selector-pseudo, -.hljs-selector-attr, -.hljs-variable.language_ { - color: #ff9ac1; -} - -.hljs-subst, -.hljs-property, -.hljs-code, -.hljs-formula, -.hljs-section, -.hljs-title.function_ { - color: #45a9f9; -} - -.hljs-string, -.hljs-symbol, -.hljs-bullet, -.hljs-addition, -.hljs-selector-class, -.hljs-title.class_, -.hljs-title.class_.inherited__, -.hljs-meta .hljs-string { - color: #19f9d8; -} - -.hljs-variable, -.hljs-template-variable, -.hljs-number, -.hljs-literal, -.hljs-type, +.hljs-char.escape_, .hljs-link, -.hljs-built_in, -.hljs-title, -.hljs-selector-id, -.hljs-tag, -.hljs-doctag, -.hljs-attribute, -.hljs-template-tag, -.hljs-meta .hljs-keyword, -.hljs-punctuation { - color: #ffb86c; +.hljs-params, +.hljs-property, +.hljs-punctuation, +.hljs-tag { + /* purposely ignored */ } diff --git a/frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss b/frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss index 615abdd13a..ea2d601f76 100644 --- a/frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss @@ -1,94 +1,126 @@ -/** - * Panda Syntax Theme for Highlight.js - * Based on: https://github.com/tinkertrain/panda-syntax-vscode - * Author: Annmarie Switzer - */ +/*! + Theme: GitHub + Description: Light theme as seen on github.com + Author: github.com + Maintainer: @Hirse + Updated: 2021-05-15 + + Outdated base version: https://github.com/primer/github-syntax-light + Current colors taken from GitHub's CSS +*/ .hljs { - color: #2a2c2d; - background: #e6e6e6; + color: #24292e; + background: #ffffff; +} + +.hljs-doctag, +.hljs-keyword, +.hljs-meta .hljs-keyword, +.hljs-template-tag, +.hljs-template-variable, +.hljs-type, +.hljs-variable.language_ { + /* prettylights-syntax-keyword */ + color: #d73a49; +} + +.hljs-title, +.hljs-title.class_, +.hljs-title.class_.inherited__, +.hljs-title.function_ { + /* prettylights-syntax-entity */ + color: #6f42c1; +} + +.hljs-attr, +.hljs-attribute, +.hljs-literal, +.hljs-meta, +.hljs-number, +.hljs-operator, +.hljs-variable, +.hljs-selector-attr, +.hljs-selector-class, +.hljs-selector-id { + /* prettylights-syntax-constant */ + color: #005cc5; +} + +.hljs-regexp, +.hljs-string, +.hljs-meta .hljs-string { + /* prettylights-syntax-string */ + color: #032f62; +} + +.hljs-built_in, +.hljs-symbol { + /* prettylights-syntax-variable */ + color: #e36209; +} + +.hljs-comment, +.hljs-code, +.hljs-formula { + /* prettylights-syntax-comment */ + color: #6a737d; +} + +.hljs-name, +.hljs-quote, +.hljs-selector-tag, +.hljs-selector-pseudo { + /* prettylights-syntax-entity-tag */ + color: #22863a; +} + +.hljs-subst { + /* prettylights-syntax-storage-modifier-import */ + color: #24292e; +} + +.hljs-section { + /* prettylights-syntax-markup-heading */ + color: #005cc5; + font-weight: bold; +} + +.hljs-bullet { + /* prettylights-syntax-markup-list */ + color: #735c0f; } .hljs-emphasis { + /* prettylights-syntax-markup-italic */ + color: #24292e; font-style: italic; } .hljs-strong { + /* prettylights-syntax-markup-bold */ + color: #24292e; font-weight: bold; } -.hljs-link { - text-decoration: underline; +.hljs-addition { + /* prettylights-syntax-markup-inserted */ + color: #22863a; + background-color: #f0fff4; } -.hljs-comment, -.hljs-quote { - color: #676b79; - font-style: italic; -} - -.hljs-params { - color: #676b79; -} - -.hljs-punctuation, -.hljs-attr { - color: #2a2c2d; -} - -.hljs-selector-tag, -.hljs-name, -.hljs-meta, -.hljs-operator, -.hljs-char.escape_ { - color: #c56200; -} - -.hljs-keyword, .hljs-deletion { - color: #d92792; + /* prettylights-syntax-markup-deleted */ + color: #b31d28; + background-color: #ffeef0; } -.hljs-regexp, -.hljs-selector-pseudo, -.hljs-selector-attr, -.hljs-variable.language_ { - color: #cc5e91; -} - -.hljs-subst, -.hljs-property, -.hljs-code, -.hljs-formula, -.hljs-section, -.hljs-title.function_ { - color: #3787c7; -} - -.hljs-string, -.hljs-symbol, -.hljs-bullet, -.hljs-addition, -.hljs-selector-class, -.hljs-title.class_, -.hljs-title.class_.inherited__, -.hljs-meta .hljs-string { - color: #0d7d6c; -} - -.hljs-variable, -.hljs-template-variable, -.hljs-number, -.hljs-literal, -.hljs-type, +.hljs-char.escape_, .hljs-link, -.hljs-built_in, -.hljs-title, -.hljs-selector-id, -.hljs-tag, -.hljs-doctag, -.hljs-attribute, -.hljs-template-tag, -.hljs-meta .hljs-keyword { - color: #7641bb; +.hljs-params, +.hljs-property, +.hljs-punctuation, +.hljs-tag { + /* purposely ignored */ + color: #6a737d; } diff --git a/frontend/src/app/main/ui/viewer/inspect/code.scss b/frontend/src/app/main/ui/viewer/inspect/code.scss index 9b4fc8866a..3524f40a03 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.scss +++ b/frontend/src/app/main/ui/viewer/inspect/code.scss @@ -7,6 +7,12 @@ @import "refactor/common-refactor.scss"; .element-options { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; + padding-bottom: $s-16; + .attributes-block { .download-button { @extend .button-secondary; @@ -17,16 +23,28 @@ } } .code-block { - font-size: $fs-14; + @include codeTypography; + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + min-height: 0; + overflow: hidden; padding: 0 $s-4 $s-8 0; pre { border-radius: $br-8; - border: $s-1 solid $db-secondary; padding: $s-16; + max-height: var(--code-height); + overflow: auto; + height: 100%; + } + + // Overrides background setted in the theme + :global(.hljs) { + background: $db-tertiary; } } - .code-row-lang { display: flex; justify-content: space-between; @@ -61,7 +79,10 @@ color: var(--menu-foreground-color-disabled); } .code-row-display { - margin-bottom: $s-8; + flex: 1; + min-height: 0; + overflow: hidden; + padding-bottom: $s-8; } } diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss index ab26cbdbbf..1665f7dc3b 100644 --- a/frontend/src/app/main/ui/workspace.scss +++ b/frontend/src/app/main/ui/workspace.scss @@ -12,7 +12,7 @@ @include font-face("worksans", "WorkSans-Bold", bold); // Space mono -@include font-face("spacemono", "SpaceMono-Regular", normal); +@include font-face("robotomono", "RobotoMono-Regular", normal); :global(:root) { --s-4: 0.25rem;