Skip to content

Commit

Permalink
Change --font-weight-bold to --font-weight-semibold and 600 value…
Browse files Browse the repository at this point in the history
…, introduce new font weight variables (#24827)

There was some recent discussion about this in Discord `ui-design`
channel and the conclusion was that
#24305 should have fixed their
OS font installation to have semibold weights.

I have now tested this 601 weight on a Windows 10 machine on Firefox
myself, and I immediately noticed that bold was excessivly bold and
rendering as 700 because browsers are biased towards bolder fonts. So
revert this back to the previous value.
  • Loading branch information
silverwind committed May 21, 2023
1 parent 4647660 commit 19993d8
Show file tree
Hide file tree
Showing 26 changed files with 82 additions and 78 deletions.
2 changes: 1 addition & 1 deletion .stylelintrc.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ rules:
property-no-vendor-prefix: null
rule-empty-line-before: null
rule-selector-property-disallowed-list: null
scale-unlimited/declaration-strict-value: [[color, background-color, border-color], {ignoreValues: /^(inherit|transparent|unset|initial|currentcolor|none)$/, ignoreFunctions: false}]
scale-unlimited/declaration-strict-value: [[color, background-color, border-color, font-weight], {ignoreValues: /^(inherit|transparent|unset|initial|currentcolor|none)$/, ignoreFunctions: false}]
selector-attribute-name-disallowed-list: null
selector-attribute-operator-allowed-list: null
selector-attribute-operator-disallowed-list: null
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/diff/box.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
{{svg "octicon-chevron-down" 18}}
{{end}}
</button>
<div class="gt-bold gt-df gt-ac gt-mono">
<div class="gt-font-semibold gt-df gt-ac gt-mono">
{{if $file.IsBin}}
<span class="gt-ml-1 gt-mr-3">
{{$.locale.Tr "repo.diff.bin"}}
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/diff/comments.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div class="ui top attached header comment-header gt-df gt-ac gt-sb">
<div class="comment-header-left gt-df gt-ac">
{{if .OriginalAuthor}}
<span class="text black gt-bold gt-mr-2">
<span class="text black gt-font-semibold gt-mr-2">
{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
{{.OriginalAuthor}}
</span>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/view_content.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<div class="ui top attached header comment-header gt-df gt-ac gt-sb" role="heading" aria-level="3">
<div class="comment-header-left gt-df gt-ac">
{{if .Issue.OriginalAuthor}}
<span class="text black gt-bold">
<span class="text black gt-font-semibold">
{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
{{.Issue.OriginalAuthor}}
</span>
Expand Down
6 changes: 3 additions & 3 deletions templates/repo/issue/view_content/comments.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<div class="ui top attached header comment-header gt-df gt-ac gt-sb" role="heading" aria-level="3">
<div class="comment-header-left gt-df gt-ac">
{{if .OriginalAuthor}}
<span class="text black gt-bold gt-mr-2">
<span class="text black gt-font-semibold gt-mr-2">
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
{{.OriginalAuthor}}
</span>
Expand Down Expand Up @@ -420,7 +420,7 @@
{{end}}
<span class="text grey muted-links">
{{if .OriginalAuthor}}
<span class="text black gt-bold">
<span class="text black gt-font-semibold">
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
{{.OriginalAuthor}}
</span>
Expand Down Expand Up @@ -548,7 +548,7 @@
{{end}}
<span class="text grey muted-links">
{{if .OriginalAuthor}}
<span class="text black gt-bold">
<span class="text black gt-font-semibold">
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
{{.OriginalAuthor}}
</span>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/sub_menu.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
{{range .LanguageStats}}
<div class="item gt-df gt-ac gt-jc">
<i class="color-icon gt-mr-3" style="background-color: {{.Color}}"></i>
<span class="gt-bold gt-mr-3">
<span class="gt-font-semibold gt-mr-3">
{{if eq .Language "other"}}
{{$.locale.Tr "repo.language_other"}}
{{else}}
Expand Down
2 changes: 1 addition & 1 deletion templates/shared/user/authorlink.tmpl
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<a class="author text black gt-bold muted"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
<a class="author text black gt-font-semibold muted"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
2 changes: 1 addition & 1 deletion templates/user/settings/account.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@
<div class="ui red message">
<p class="text left">{{svg "octicon-alert"}} {{.locale.Tr "settings.delete_prompt" | Str2html}}</p>
{{if .UserDeleteWithComments}}
<p class="text left" style="font-weight: bold;">{{.locale.Tr "settings.delete_with_all_comments" .UserDeleteWithCommentsMaxTime | Str2html}}</p>
<p class="text left gt-font-semibold">{{.locale.Tr "settings.delete_with_all_comments" .UserDeleteWithCommentsMaxTime | Str2html}}</p>
{{end}}
</div>
<form class="ui form ignore-dirty" id="delete-form" action="{{AppSubUrl}}/user/settings/account/delete" method="post">
Expand Down
2 changes: 1 addition & 1 deletion web_src/css/admin.css
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
}

.admin dl.admin-dl-horizontal dt {
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
width: 220px;
margin-right: 5px;
overflow: hidden;
Expand Down
35 changes: 18 additions & 17 deletions web_src/css/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@
--fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
--fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
--fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
/* "font-weight: bold" starts from 700, some fonts do not provide "bolding" for weight 600. */
/* But some users consider "700" is too heavy, so use 601, which is when Segoe UI on Linux */
/* starts bolding. */
--font-weight-bold: 601;
/* font weights - use between 400 and 600 for general purposes */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
/* backgrounds */
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
Expand Down Expand Up @@ -218,7 +219,7 @@ h3,
h4,
h5,
h6 {
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
}

body {
Expand Down Expand Up @@ -891,7 +892,7 @@ a.label,
.ui.dropdown .menu .active.item {
color: var(--color-text);
background: var(--color-active);
font-weight: normal;
font-weight: var(--font-weight-normal);
}

/* fix misaligned images in webhook dropdown */
Expand Down Expand Up @@ -1436,7 +1437,7 @@ img.ui.avatar,
}

.ui.form .ui.button {
font-weight: normal;
font-weight: var(--font-weight-normal);
}

.ui.floating.label {
Expand Down Expand Up @@ -1494,7 +1495,7 @@ img.ui.avatar,
}

.ui .text.normal {
font-weight: normal;
font-weight: var(--font-weight-normal);
}

.ui .text.italic {
Expand All @@ -1509,7 +1510,7 @@ img.ui.avatar,
}

.ui .text.thin {
font-weight: normal;
font-weight: var(--font-weight-normal);
}

.ui .text.middle {
Expand Down Expand Up @@ -1546,7 +1547,7 @@ img.ui.avatar,
}

.ui .normal.header {
font-weight: normal;
font-weight: var(--font-weight-normal);
}

.ui .form .autofill-dummy {
Expand All @@ -1565,7 +1566,7 @@ img.ui.avatar,
font-family: var(--fonts-monospace);
font-size: 13px;
padding: 6px 10px 4px;
font-weight: normal;
font-weight: var(--font-weight-normal);
margin: 0 6px;
}

Expand All @@ -1592,7 +1593,7 @@ img.ui.avatar,

.ui.inline.delete-button {
padding: 8px 15px;
font-weight: normal;
font-weight: var(--font-weight-normal);
}

.ui .background.red {
Expand Down Expand Up @@ -1736,7 +1737,7 @@ img.ui.avatar,
}

.scrolling.menu .item.selected {
font-weight: var(--font-weight-bold) !important;
font-weight: var(--font-weight-semibold) !important;
}

.ui.dropdown .scrolling.menu {
Expand Down Expand Up @@ -2486,7 +2487,7 @@ a.ui.basic.label:hover {

.ui.attached.header .right .button {
padding: 8px 10px;
font-weight: normal;
font-weight: var(--font-weight-normal);
}

/* reduce height of buttons with dropdown icon */
Expand Down Expand Up @@ -2534,7 +2535,7 @@ a.ui.basic.label:hover {
padding: 2.75px;
border-radius: 1em;
font-size: 11px;
font-weight: 700;
font-weight: var(--font-weight-semibold);
line-height: .67em;
}

Expand Down Expand Up @@ -2614,7 +2615,7 @@ table th[data-sortt-desc] .svg {
font-size: 1.25em;
line-height: 1;
font-style: normal !important;
font-weight: normal !important;
font-weight: var(--font-weight-normal) !important;
vertical-align: -0.075em;
}

Expand Down Expand Up @@ -2721,7 +2722,7 @@ table th[data-sortt-desc] .svg {
.ellipsis-button {
padding: 0 5px 8px !important;
display: inline-block !important;
font-weight: var(--font-weight-bold) !important;
font-weight: var(--font-weight-semibold) !important;
line-height: 6px !important;
vertical-align: middle !important;
}
Expand Down
2 changes: 1 addition & 1 deletion web_src/css/chroma/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@

/* GenericStrong */
.chroma .gs {
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
}

/* GenericUnderline */
Expand Down
4 changes: 2 additions & 2 deletions web_src/css/editor/combomarkdowneditor.css
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ text-expander .suggestions li {
align-items: center;
cursor: pointer;
padding: 4px 8px;
font-weight: 500;
font-weight: var(--font-weight-medium);
}

text-expander .suggestions li + li {
Expand All @@ -115,7 +115,7 @@ text-expander .suggestions li:hover {
}

text-expander .suggestions .fullname {
font-weight: normal;
font-weight: var(--font-weight-normal);
margin-left: 4px;
color: var(--color-text-light-1);
}
Expand Down
2 changes: 1 addition & 1 deletion web_src/css/features/imagediff.css
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
}

.image-diff-container .diff-side-by-side .side .side-header {
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
}

.image-diff-container .diff-swipe {
Expand Down
2 changes: 1 addition & 1 deletion web_src/css/features/tribute.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
}

.tribute-container li span.fullname {
font-weight: normal;
font-weight: var(--font-weight-normal);
font-size: 0.8rem;
margin-left: 3px;
}
Expand Down

0 comments on commit 19993d8

Please sign in to comment.