Skip to content

Commit 19993d8

Browse files
silverwindsilverwind
authored
Change --font-weight-bold to --font-weight-semibold and 600 value, 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.
1 parent 4647660 commit 19993d8

26 files changed

+82
-78
lines changed

‎.stylelintrc.yaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ rules:
9696
property-no-vendor-prefix: null
9797
rule-empty-line-before: null
9898
rule-selector-property-disallowed-list: null
99-
scale-unlimited/declaration-strict-value: [[color, background-color, border-color], {ignoreValues: /^(inherit|transparent|unset|initial|currentcolor|none)$/, ignoreFunctions: false}]
99+
scale-unlimited/declaration-strict-value: [[color, background-color, border-color, font-weight], {ignoreValues: /^(inherit|transparent|unset|initial|currentcolor|none)$/, ignoreFunctions: false}]
100100
selector-attribute-name-disallowed-list: null
101101
selector-attribute-operator-allowed-list: null
102102
selector-attribute-operator-disallowed-list: null

‎templates/repo/diff/box.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@
9797
{{svg "octicon-chevron-down" 18}}
9898
{{end}}
9999
</button>
100-
<div class="gt-bold gt-df gt-ac gt-mono">
100+
<div class="gt-font-semibold gt-df gt-ac gt-mono">
101101
{{if $file.IsBin}}
102102
<span class="gt-ml-1 gt-mr-3">
103103
{{$.locale.Tr "repo.diff.bin"}}

‎templates/repo/diff/comments.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div class="ui top attached header comment-header gt-df gt-ac gt-sb">
1212
<div class="comment-header-left gt-df gt-ac">
1313
{{if .OriginalAuthor}}
14-
<span class="text black gt-bold gt-mr-2">
14+
<span class="text black gt-font-semibold gt-mr-2">
1515
{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
1616
{{.OriginalAuthor}}
1717
</span>

‎templates/repo/issue/view_content.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<div class="ui top attached header comment-header gt-df gt-ac gt-sb" role="heading" aria-level="3">
2424
<div class="comment-header-left gt-df gt-ac">
2525
{{if .Issue.OriginalAuthor}}
26-
<span class="text black gt-bold">
26+
<span class="text black gt-font-semibold">
2727
{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
2828
{{.Issue.OriginalAuthor}}
2929
</span>

‎templates/repo/issue/view_content/comments.tmpl

+3-3
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<div class="ui top attached header comment-header gt-df gt-ac gt-sb" role="heading" aria-level="3">
2828
<div class="comment-header-left gt-df gt-ac">
2929
{{if .OriginalAuthor}}
30-
<span class="text black gt-bold gt-mr-2">
30+
<span class="text black gt-font-semibold gt-mr-2">
3131
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
3232
{{.OriginalAuthor}}
3333
</span>
@@ -420,7 +420,7 @@
420420
{{end}}
421421
<span class="text grey muted-links">
422422
{{if .OriginalAuthor}}
423-
<span class="text black gt-bold">
423+
<span class="text black gt-font-semibold">
424424
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
425425
{{.OriginalAuthor}}
426426
</span>
@@ -548,7 +548,7 @@
548548
{{end}}
549549
<span class="text grey muted-links">
550550
{{if .OriginalAuthor}}
551-
<span class="text black gt-bold">
551+
<span class="text black gt-font-semibold">
552552
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
553553
{{.OriginalAuthor}}
554554
</span>

‎templates/repo/sub_menu.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
{{range .LanguageStats}}
2929
<div class="item gt-df gt-ac gt-jc">
3030
<i class="color-icon gt-mr-3" style="background-color: {{.Color}}"></i>
31-
<span class="gt-bold gt-mr-3">
31+
<span class="gt-font-semibold gt-mr-3">
3232
{{if eq .Language "other"}}
3333
{{$.locale.Tr "repo.language_other"}}
3434
{{else}}

‎templates/shared/user/authorlink.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<a class="author text black gt-bold muted"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
1+
<a class="author text black gt-font-semibold muted"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>

‎templates/user/settings/account.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@
137137
<div class="ui red message">
138138
<p class="text left">{{svg "octicon-alert"}} {{.locale.Tr "settings.delete_prompt" | Str2html}}</p>
139139
{{if .UserDeleteWithComments}}
140-
<p class="text left" style="font-weight: bold;">{{.locale.Tr "settings.delete_with_all_comments" .UserDeleteWithCommentsMaxTime | Str2html}}</p>
140+
<p class="text left gt-font-semibold">{{.locale.Tr "settings.delete_with_all_comments" .UserDeleteWithCommentsMaxTime | Str2html}}</p>
141141
{{end}}
142142
</div>
143143
<form class="ui form ignore-dirty" id="delete-form" action="{{AppSubUrl}}/user/settings/account/delete" method="post">

‎web_src/css/admin.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
}
3333

3434
.admin dl.admin-dl-horizontal dt {
35-
font-weight: var(--font-weight-bold);
35+
font-weight: var(--font-weight-semibold);
3636
width: 220px;
3737
margin-right: 5px;
3838
overflow: hidden;

‎web_src/css/base.css

+18-17
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@
33
--fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
44
--fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
55
--fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
6-
/* "font-weight: bold" starts from 700, some fonts do not provide "bolding" for weight 600. */
7-
/* But some users consider "700" is too heavy, so use 601, which is when Segoe UI on Linux */
8-
/* starts bolding. */
9-
--font-weight-bold: 601;
6+
/* font weights - use between 400 and 600 for general purposes */
7+
--font-weight-light: 300;
8+
--font-weight-normal: 400;
9+
--font-weight-medium: 500;
10+
--font-weight-semibold: 600;
1011
/* backgrounds */
1112
--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>');
1213
--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>');
@@ -218,7 +219,7 @@ h3,
218219
h4,
219220
h5,
220221
h6 {
221-
font-weight: var(--font-weight-bold);
222+
font-weight: var(--font-weight-semibold);
222223
}
223224

224225
body {
@@ -891,7 +892,7 @@ a.label,
891892
.ui.dropdown .menu .active.item {
892893
color: var(--color-text);
893894
background: var(--color-active);
894-
font-weight: normal;
895+
font-weight: var(--font-weight-normal);
895896
}
896897

897898
/* fix misaligned images in webhook dropdown */
@@ -1436,7 +1437,7 @@ img.ui.avatar,
14361437
}
14371438

14381439
.ui.form .ui.button {
1439-
font-weight: normal;
1440+
font-weight: var(--font-weight-normal);
14401441
}
14411442

14421443
.ui.floating.label {
@@ -1494,7 +1495,7 @@ img.ui.avatar,
14941495
}
14951496

14961497
.ui .text.normal {
1497-
font-weight: normal;
1498+
font-weight: var(--font-weight-normal);
14981499
}
14991500

15001501
.ui .text.italic {
@@ -1509,7 +1510,7 @@ img.ui.avatar,
15091510
}
15101511

15111512
.ui .text.thin {
1512-
font-weight: normal;
1513+
font-weight: var(--font-weight-normal);
15131514
}
15141515

15151516
.ui .text.middle {
@@ -1546,7 +1547,7 @@ img.ui.avatar,
15461547
}
15471548

15481549
.ui .normal.header {
1549-
font-weight: normal;
1550+
font-weight: var(--font-weight-normal);
15501551
}
15511552

15521553
.ui .form .autofill-dummy {
@@ -1565,7 +1566,7 @@ img.ui.avatar,
15651566
font-family: var(--fonts-monospace);
15661567
font-size: 13px;
15671568
padding: 6px 10px 4px;
1568-
font-weight: normal;
1569+
font-weight: var(--font-weight-normal);
15691570
margin: 0 6px;
15701571
}
15711572

@@ -1592,7 +1593,7 @@ img.ui.avatar,
15921593

15931594
.ui.inline.delete-button {
15941595
padding: 8px 15px;
1595-
font-weight: normal;
1596+
font-weight: var(--font-weight-normal);
15961597
}
15971598

15981599
.ui .background.red {
@@ -1736,7 +1737,7 @@ img.ui.avatar,
17361737
}
17371738

17381739
.scrolling.menu .item.selected {
1739-
font-weight: var(--font-weight-bold) !important;
1740+
font-weight: var(--font-weight-semibold) !important;
17401741
}
17411742

17421743
.ui.dropdown .scrolling.menu {
@@ -2486,7 +2487,7 @@ a.ui.basic.label:hover {
24862487

24872488
.ui.attached.header .right .button {
24882489
padding: 8px 10px;
2489-
font-weight: normal;
2490+
font-weight: var(--font-weight-normal);
24902491
}
24912492

24922493
/* reduce height of buttons with dropdown icon */
@@ -2534,7 +2535,7 @@ a.ui.basic.label:hover {
25342535
padding: 2.75px;
25352536
border-radius: 1em;
25362537
font-size: 11px;
2537-
font-weight: 700;
2538+
font-weight: var(--font-weight-semibold);
25382539
line-height: .67em;
25392540
}
25402541

@@ -2614,7 +2615,7 @@ table th[data-sortt-desc] .svg {
26142615
font-size: 1.25em;
26152616
line-height: 1;
26162617
font-style: normal !important;
2617-
font-weight: normal !important;
2618+
font-weight: var(--font-weight-normal) !important;
26182619
vertical-align: -0.075em;
26192620
}
26202621

@@ -2721,7 +2722,7 @@ table th[data-sortt-desc] .svg {
27212722
.ellipsis-button {
27222723
padding: 0 5px 8px !important;
27232724
display: inline-block !important;
2724-
font-weight: var(--font-weight-bold) !important;
2725+
font-weight: var(--font-weight-semibold) !important;
27252726
line-height: 6px !important;
27262727
vertical-align: middle !important;
27272728
}

‎web_src/css/chroma/base.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141

4242
/* GenericStrong */
4343
.chroma .gs {
44-
font-weight: var(--font-weight-bold);
44+
font-weight: var(--font-weight-semibold);
4545
}
4646

4747
/* GenericUnderline */

‎web_src/css/editor/combomarkdowneditor.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ text-expander .suggestions li {
9191
align-items: center;
9292
cursor: pointer;
9393
padding: 4px 8px;
94-
font-weight: 500;
94+
font-weight: var(--font-weight-medium);
9595
}
9696

9797
text-expander .suggestions li + li {
@@ -115,7 +115,7 @@ text-expander .suggestions li:hover {
115115
}
116116

117117
text-expander .suggestions .fullname {
118-
font-weight: normal;
118+
font-weight: var(--font-weight-normal);
119119
margin-left: 4px;
120120
color: var(--color-text-light-1);
121121
}

‎web_src/css/features/imagediff.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
}
2727

2828
.image-diff-container .diff-side-by-side .side .side-header {
29-
font-weight: var(--font-weight-bold);
29+
font-weight: var(--font-weight-semibold);
3030
}
3131

3232
.image-diff-container .diff-swipe {

‎web_src/css/features/tribute.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
}
1616

1717
.tribute-container li span.fullname {
18-
font-weight: normal;
18+
font-weight: var(--font-weight-normal);
1919
font-size: 0.8rem;
2020
margin-left: 3px;
2121
}

0 commit comments

Comments
 (0)