opendev/gerrit
Code Issues Proposed changes

Switch to Roboto Mono font

Browse Source 
Swaps out Source Code Pro for Roboto Mono. In addition, modifies the
syntax highlighting theme for numbers and class selectors from the
darker #7F0055 to the ligher #9E0069 and removes the bold font weight
from the selector to better differentiate the selector, especially with
a red background color.

Bug: Issue 6021
Change-Id: I7588e9aa1ef0b2e4ccde8b7a5ed0c24e56760a11
This commit is contained in:
Kasper Nilsson
2017-06-19 15:00:13 -07:00
parent 789e268a8b
commit 00a23600a8
10 changed files with 28 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
gerrit-httpd/src/main/resources/com/google/gerrit/httpd/raw/PolyGerritIndexHtml.soy
View File

@@ -37,10 +37,10 @@
<link rel="icon" type="image/x-icon" href="{$canonicalPath}/favicon.ico">{\n} <link rel="icon" type="image/x-icon" href="{$canonicalPath}/favicon.ico">{\n}
// SourceCodePro fonts are used in styles/fonts.css // RobotoMono fonts are used in styles/fonts.css
// @see https://github.com/w3c/preload/issues/32 regarding crossorigin // @see https://github.com/w3c/preload/issues/32 regarding crossorigin
<link rel="preload" href="{$staticResourcePath}/fonts/SourceCodePro-Regular.woff2" as="font" type="font/woff2" crossorigin>{\n} <link rel="preload" href="{$staticResourcePath}/fonts/RobotoMono-Regular.woff2" as="font" type="font/woff2" crossorigin>{\n}
<link rel="preload" href="{$staticResourcePath}/fonts/SourceCodePro-Regular.woff" as="font" type="font/woff" crossorigin>{\n} <link rel="preload" href="{$staticResourcePath}/fonts/RobotoMono-Regular.woff" as="font" type="font/woff" crossorigin>{\n}
<link rel="stylesheet" href="{$staticResourcePath}/styles/fonts.css">{\n} <link rel="stylesheet" href="{$staticResourcePath}/styles/fonts.css">{\n}
<link rel="stylesheet" href="{$staticResourcePath}/styles/main.css">{\n} <link rel="stylesheet" href="{$staticResourcePath}/styles/main.css">{\n}
<script src="{$staticResourcePath}/bower_components/webcomponentsjs/webcomponents-lite.js"></script>{\n} <script src="{$staticResourcePath}/bower_components/webcomponentsjs/webcomponents-lite.js"></script>{\n}

14
lib/fonts/BUILD
View File

@@ -1,13 +1,13 @@
load("//tools/bzl:genrule2.bzl", "genrule2") load("//tools/bzl:genrule2.bzl", "genrule2")
# Source Code Pro. Version 2.010 Roman / 1.030 Italics # Roboto Mono. Version 2.136
# https://github.com/adobe-fonts/source-code-pro/releases/tag/2.010R-ro%2F1.030R-it # https://github.com/google/roboto/releases/tag/v2.136
filegroup( filegroup(
name = "sourcecodepro", name = "robotomono",
srcs = [ srcs = [
"SourceCodePro-Regular.woff", "RobotoMono-Regular.woff",
"SourceCodePro-Regular.woff2", "RobotoMono-Regular.woff2",
], ],
data = ["//lib:LICENSE-OFL1.1"], data = ["//lib:LICENSE-Apache2.0"],
visibility = ["//visibility:public"], visibility = ["//visibility:public"],
) )

BIN
lib/fonts/RobotoMono-Regular.woff Executable file
View File

Binary file not shown.

BIN
lib/fonts/RobotoMono-Regular.woff2 Executable file
View File

Binary file not shown.

2
polygerrit-ui/BUILD
View File

@@ -28,7 +28,7 @@ bower_component_bundle(
genrule2( genrule2(
name = "fonts", name = "fonts",
srcs = [ srcs = [
"//lib/fonts:sourcecodepro", "//lib/fonts:robotomono",
], ],
outs = ["fonts.zip"], outs = ["fonts.zip"],
cmd = " && ".join([ cmd = " && ".join([

4
polygerrit-ui/app/BUILD
View File

@@ -81,7 +81,7 @@ filegroup(
genrule2( genrule2(
name = "polygerrit_ui", name = "polygerrit_ui",
srcs = [ srcs = [
"//lib/fonts:sourcecodepro", "//lib/fonts:robotomono",
"//lib/js:highlightjs_files", "//lib/js:highlightjs_files",
":top_sources", ":top_sources",
":css_sources", ":css_sources",
@@ -94,7 +94,7 @@ genrule2(
cmd = " && ".join([ cmd = " && ".join([
"mkdir -p $$TMP/polygerrit_ui/{styles,fonts,bower_components/{highlightjs,webcomponentsjs},elements}", "mkdir -p $$TMP/polygerrit_ui/{styles,fonts,bower_components/{highlightjs,webcomponentsjs},elements}",
"for f in $(locations :app_sources); do ext=$${f##*.}; cp -p $$f $$TMP/polygerrit_ui/elements/gr-app.$$ext; done", "for f in $(locations :app_sources); do ext=$${f##*.}; cp -p $$f $$TMP/polygerrit_ui/elements/gr-app.$$ext; done",
"cp $(locations //lib/fonts:sourcecodepro) $$TMP/polygerrit_ui/fonts/", "cp $(locations //lib/fonts:robotomono) $$TMP/polygerrit_ui/fonts/",
"for f in $(locations :top_sources); do cp $$f $$TMP/polygerrit_ui/; done", "for f in $(locations :top_sources); do cp $$f $$TMP/polygerrit_ui/; done",
"for f in $(locations :css_sources); do cp $$f $$TMP/polygerrit_ui/styles; done", "for f in $(locations :css_sources); do cp $$f $$TMP/polygerrit_ui/styles; done",
"for f in $(locations //lib/js:highlightjs_files); do cp $$f $$TMP/polygerrit_ui/bower_components/highlightjs/ ; done", "for f in $(locations //lib/js:highlightjs_files); do cp $$f $$TMP/polygerrit_ui/bower_components/highlightjs/ ; done",

5
polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-theme-default.html
View File

@@ -29,8 +29,7 @@ limitations under the License.
color: #FF1717; color: #FF1717;
} }
.gr-syntax-keyword { .gr-syntax-keyword {
color: #7F0055; color: #9E0069;
font-weight: bold;
line-height: 1em; line-height: 1em;
} }
.gr-syntax-number, .gr-syntax-number,
@@ -80,7 +79,7 @@ limitations under the License.
font-style: italic; font-style: italic;
} }
.gr-syntax-strong { .gr-syntax-strong {
font-weight: bold; font-weight: 700;
} }
</style> </style>
</template> </template>

6
polygerrit-ui/app/index.html
View File

@@ -21,11 +21,11 @@ limitations under the License.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- <!--
SourceCodePro fonts are used in styles/fonts.css RobotoMono fonts are used in styles/fonts.css
@see https://github.com/w3c/preload/issues/32 regarding crossorigin @see https://github.com/w3c/preload/issues/32 regarding crossorigin
--> -->
<link rel="preload" href="/fonts/SourceCodePro-Regular.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/fonts/RobotoMono-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/SourceCodePro-Regular.woff" as="font" type="font/woff" crossorigin> <link rel="preload" href="/fonts/RobotoMono-Regular.woff" as="font" type="font/woff" crossorigin>
<link rel="stylesheet" href="/styles/fonts.css"> <link rel="stylesheet" href="/styles/fonts.css">
<link rel="stylesheet" href="/styles/main.css"> <link rel="stylesheet" href="/styles/main.css">
<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script> <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>

2
polygerrit-ui/app/styles/app-theme.html
View File

@@ -30,7 +30,7 @@ limitations under the License.
--view-background-color: #fff; --view-background-color: #fff;
--default-horizontal-margin: 1rem; --default-horizontal-margin: 1rem;
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--monospace-font-family: 'Source Code Pro', Menlo, 'Lucida Console', Monaco, monospace; --monospace-font-family: 'Roboto Mono', Menlo, 'Lucida Console', Monaco, monospace;
--iron-overlay-backdrop: { --iron-overlay-backdrop: {
transition: none; transition: none;
}; };

18
polygerrit-ui/app/styles/fonts.css
View File

@@ -1,20 +1,20 @@
/* latin-ext */ /* latin-ext */
@font-face { @font-face {
font-family: 'Source Code Pro'; font-family: 'Roboto Mono';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), src: local('Roboto Mono'), local('RobotoMono-Regular'),
url(../fonts/SourceCodePro-Regular.woff2) format('woff2'), url('../fonts/RobotoMono-Regular.woff2') format('woff2'),
url(../fonts/SourceCodePro-Regular.woff) format('woff'); url('../fonts/RobotoMono-Regular.woff') format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
} }
/* latin */ /* latin */
@font-face { @font-face {
font-family: 'Source Code Pro'; font-family: 'Roboto Mono';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), src: local('Roboto Mono'), local('RobotoMono-Regular'),
url(../fonts/SourceCodePro-Regular.woff2) format('woff2'), url('../fonts/RobotoMono-Regular.woff2') format('woff2'),
url(../fonts/SourceCodePro-Regular.woff) format('woff'); url('../fonts/RobotoMono-Regular.woff') format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
} }