CSS color variables, less bold font weight and more (#13567)

* CSS color variables, less bold font weight

- Define color variables for fully saturated colors and apply them where
  it made sense
- Add background color helper classes
- Globally reduce bold font weight from 700 to 500
- Remove border from timeline icons
- Unify dropzone styling
- Various border style consolidations

* attempt to fix test

* another attempt at tests

* fix contains

20 files changed, 221 insertions, 225 deletions

diff --git a/integrations/pull_merge_test.go b/integrations/pull_merge_test.go
index 04e68ff3dc..b5edb41eec 100644
--- a/integrations/pull_merge_test.go
+++ b/integrations/pull_merge_test.go
@@ -194,7 +194,7 @@ func TestCantMergeWorkInProgress(t *testing.T) {
 		req := NewRequest(t, "GET", resp.Header().Get("Location"))
 		resp = session.MakeRequest(t, req, http.StatusOK)
 		htmlDoc := NewHTMLParser(t, resp.Body)
-		text := strings.TrimSpace(htmlDoc.doc.Find(".attached.merge-section.no-header > .text.grey").Last().Text())
+		text := strings.TrimSpace(htmlDoc.doc.Find(".merge-section > .item").Last().Text())
 		assert.NotEmpty(t, text, "Can't find WIP text")
 
 		// remove <strong /> from lang
diff --git a/integrations/pull_status_test.go b/integrations/pull_status_test.go
index 95ed755fbb..0002784792 100644
--- a/integrations/pull_status_test.go
+++ b/integrations/pull_status_test.go
@@ -114,7 +114,7 @@ func TestPullCreate_EmptyChangesWithCommits(t *testing.T) {
 		resp := session.MakeRequest(t, req, http.StatusOK)
 		doc := NewHTMLParser(t, resp.Body)
 
-		text := strings.TrimSpace(doc.doc.Find(".item.text.green").Text())
-		assert.EqualValues(t, "This pull request can be merged automatically.", text)
+		text := strings.TrimSpace(doc.doc.Find(".merge-section").Text())
+		assert.Contains(t, text, "This pull request can be merged automatically.")
 	})
 }
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 6f18980072..77b02f67a5 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -91,7 +91,7 @@
 		</div>
 	{{else if eq .Type 1}}
 		<div class="timeline-item event" id="{{.HashTag}}">
-			<span class="badge">{{svg "octicon-dot-fill"}}</span>
+			<span class="badge bg-green text-white">{{svg "octicon-dot-fill"}}</span>
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -106,7 +106,7 @@
 		</div>
 	{{else if eq .Type 2}}
 		<div class="timeline-item event" id="{{.HashTag}}">
-			<span class="badge">{{svg "octicon-circle-slash"}}</span>
+			<span class="badge bg-red text-white">{{svg "octicon-circle-slash"}}</span>
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -121,7 +121,7 @@
 		</div>
 	{{else if eq .Type 28}}
 		<div class="timeline-item event" id="{{.HashTag}}">
-			<span class="badge purple">{{svg "octicon-git-merge"}}</span>
+			<span class="badge bg-purple text-white">{{svg "octicon-git-merge"}}</span>
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
index 6b62def2cc..347b3b15d3 100644
--- a/templates/repo/issue/view_content/pull.tmpl
+++ b/templates/repo/issue/view_content/pull.tmpl
@@ -97,7 +97,7 @@
 		{{$canAutoMerge := false}}
 		<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}}">
 			{{if .Issue.PullRequest.HasMerged}}
-				<div class="item text purple">
+				<div class="item text">
 					{{if .Issue.PullRequest.MergedCommitID}}
 						{{$link := printf "%s/commit/%s" $.Repository.HTMLURL .Issue.PullRequest.MergedCommitID}}
 						{{$.i18n.Tr "repo.pulls.merged_as" $link (ShortSha .Issue.PullRequest.MergedCommitID) | Safe}}
@@ -112,7 +112,7 @@
 					</div>
 				{{end}}
 			{{else if .Issue.IsClosed}}
-				<div class="item text grey">
+				<div class="item text">
 					{{if .IsPullRequestBroken}}
 						{{$.i18n.Tr "repo.pulls.cant_reopen_deleted_branch"}}
 					{{else}}
@@ -126,7 +126,7 @@
 					</div>
 				{{end}}
 			{{else if .IsPullFilesConflicted}}
-				<div class="item text grey">
+				<div class="item text">
 					{{svg "octicon-x"}}
 					{{$.i18n.Tr "repo.pulls.files_conflicted"}}
 					{{range .ConflictedFiles}}
@@ -134,38 +134,38 @@
 					{{end}}
 				</div>
 			{{else if .IsPullRequestBroken}}
-				<div class="item text red">
+				<div class="item">
 					<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
 					{{$.i18n.Tr "repo.pulls.data_broken"}}
 				</div>
 			{{else if .IsPullWorkInProgress}}
-				<div class="item text grey">
+				<div class="item">
 					<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
 					{{$.i18n.Tr "repo.pulls.cannot_merge_work_in_progress" (.WorkInProgressPrefix|Escape) | Str2html}}
 				</div>
 			{{else if .Issue.PullRequest.IsChecking}}
-				<div class="item text yellow">
+				<div class="item">
 					<i class="icon icon-octicon">{{svg "octicon-sync"}}</i>
 					{{$.i18n.Tr "repo.pulls.is_checking"}}
 				</div>
 			{{else if .Issue.PullRequest.CanAutoMerge}}
 				{{if .IsBlockedByApprovals}}
-					<div class="item text red">
+					<div class="item">
 						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
 					{{$.i18n.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .Issue.PullRequest.ProtectedBranch.RequiredApprovals}}
 					</div>
 				{{else if .IsBlockedByRejection}}
-					<div class="item text red">
+					<div class="item">
 						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
 					{{$.i18n.Tr "repo.pulls.blocked_by_rejection"}}
 					</div>
 				{{else if .IsBlockedByOutdatedBranch}}
-					<div class="item text red">
+					<div class="item">
 						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
 					{{$.i18n.Tr "repo.pulls.blocked_by_outdated_branch"}}
 					</div>
 				{{else if .IsBlockedByChangedProtectedFiles}}
-					<div class="item text red">
+					<div class="item">
 						<i class="icon icon-octicon">{{svg "octicon-x" 16}}</i>
 						{{$.i18n.Tr (TrN $.i18n.Lang $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n") | Safe }}
 						<div class="ui ordered list">
@@ -175,21 +175,21 @@
 						</div>
 					</div>
 				{{else if and .EnableStatusCheck (or .RequiredStatusCheckState.IsError .RequiredStatusCheckState.IsFailure)}}
-					<div class="item text red">
+					<div class="item">
 						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
 						{{$.i18n.Tr "repo.pulls.required_status_check_failed"}}
 					</div>
 				{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
-					<div class="item text red">
+					<div class="item">
 						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
 						{{$.i18n.Tr "repo.pulls.required_status_check_missing"}}
 					</div>
 				{{else if and .AllowMerge .RequireSigned (not .WillSign)}}
-					<div class="item text red">
+					<div class="item">
 						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
 						{{$.i18n.Tr "repo.pulls.require_signed_wont_sign"}}
 					</div>
-					<div class="item text yellow">
+					<div class="item">
 						<i class="icon unlock"></i>
 						{{$.i18n.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason) }}
 					</div>
@@ -197,23 +197,23 @@
 				{{$notAllOverridableChecksOk := or .IsBlockedByApprovals .IsBlockedByRejection .IsBlockedByOutdatedBranch .IsBlockedByChangedProtectedFiles (and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess))}}
 				{{if and (or $.IsRepoAdmin (not $notAllOverridableChecksOk)) (or (not .AllowMerge) (not .RequireSigned) .WillSign)}}
 					{{if $notAllOverridableChecksOk}}
-						<div class="item text yellow">
+						<div class="item">
 							<i class="icon icon-octicon">{{svg "octicon-dot-fill"}}</i>
 							{{$.i18n.Tr "repo.pulls.required_status_check_administrator"}}
 						</div>
 					{{else}}
-						<div class="item text green">
+						<div class="item">
 							<i class="icon icon-octicon">{{svg "octicon-check"}}</i>
 							{{$.i18n.Tr "repo.pulls.can_auto_merge_desc"}}
 						</div>
 					{{end}}
 					{{if .WillSign}}
-						<div class="item text green">
+						<div class="item">
 							<i class="icon lock green"></i>
 							{{$.i18n.Tr "repo.signing.will_sign" .SigningKey}}
 						</div>
 					{{else if .IsSigned}}
-						<div class="item text">
+						<div class="item">
 							<i class="icon unlock"></i>
 							{{$.i18n.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason) }}
 						</div>
@@ -223,7 +223,7 @@
 				{{$canAutoMerge = true}}
 				{{if (gt .Issue.PullRequest.CommitsBehind 0)}}
 					<div class="ui divider"></div>
-					<div class="item item-section text grey">
+					<div class="item item-section">
 						<div class="item-section-left">
 							<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
 							{{$.i18n.Tr "repo.pulls.outdated_with_base_branch"}}
diff --git a/web_src/fomantic/_site/globals/site.variables b/web_src/fomantic/_site/globals/site.variables
index efd2e2a27d..550d44b3b5 100644
--- a/web_src/fomantic/_site/globals/site.variables
+++ b/web_src/fomantic/_site/globals/site.variables
@@ -2,3 +2,4 @@
 
 @headerFont: var(--fonts-regular);
 @pageFont: var(--fonts-regular);
+@bold: 500;
diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css
index 8fe1c7384a..c2cc6356ef 100644
--- a/web_src/fomantic/build/semantic.css
+++ b/web_src/fomantic/build/semantic.css
@@ -138,7 +138,7 @@
   margin: 0;
   padding: 0.75em 1em;
   color: rgba(0, 0, 0, 0.4);
-  font-weight: bold;
+  font-weight: 500;
   border-top: 1px solid rgba(34, 36, 38, 0.15);
   transition: background 0.1s ease, color 0.1s ease;
 }
@@ -354,7 +354,7 @@
 *******************************/
 
 .ui.breadcrumb .active.section {
-  font-weight: bold;
+  font-weight: 500;
 }
 
 /*******************************
@@ -428,7 +428,7 @@
   padding: 0.78571429em 1.5em 0.78571429em;
   text-transform: none;
   text-shadow: none;
-  font-weight: bold;
+  font-weight: 500;
   line-height: 1em;
   font-style: normal;
   text-align: center;
@@ -1521,7 +1521,7 @@
   line-height: 1.78571429em;
   color: rgba(0, 0, 0, 0.4);
   font-style: normal;
-  font-weight: bold;
+  font-weight: 500;
   box-shadow: 0 0 0 1px transparent inset;
 }
 
@@ -5187,7 +5187,7 @@
 
 .ui.cards > .card > .content > .header:not(.ui),
 .ui.card > .content > .header:not(.ui) {
-  font-weight: bold;
+  font-weight: 500;
   font-size: 1.28571429em;
   margin-top: -0.21425em;
   line-height: 1.28571429em;
@@ -7305,7 +7305,7 @@ a.inverted.ui.card:hover,
 .ui.comments .comment .author {
   font-size: 1em;
   color: rgba(0, 0, 0, 0.87);
-  font-weight: bold;
+  font-weight: 500;
 }
 
 .ui.comments .comment a.author {
@@ -8158,7 +8158,7 @@ body.dimmable > .dimmer {
   margin: 1rem 0;
   line-height: 1;
   height: 0;
-  font-weight: bold;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: rgba(0, 0, 0, 0.85);
@@ -8616,7 +8616,7 @@ body.dimmable > .dimmer {
 .ui.dropdown .menu > .header {
   margin: 1rem 0 0.75rem;
   padding: 0 1.14285714rem;
-  font-weight: bold;
+  font-weight: 500;
   text-transform: uppercase;
 }
 
@@ -9416,7 +9416,7 @@ select.ui.dropdown {
 }
 
 .ui.inline.dropdown > .text {
-  font-weight: bold;
+  font-weight: 500;
 }
 
 .ui.inline.dropdown .menu {
@@ -9437,7 +9437,7 @@ select.ui.dropdown {
 
 .ui.dropdown .menu .active.item {
   background: transparent;
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.95);
   box-shadow: none;
   z-index: 12;
@@ -10679,7 +10679,7 @@ select.ui.dropdown {
   margin: 0 0 0.28571429rem 0;
   color: rgba(0, 0, 0, 0.87);
   font-size: 0.92857143em;
-  font-weight: bold;
+  font-weight: 500;
   text-transform: none;
 }
 
@@ -12186,7 +12186,7 @@ select.ui.dropdown {
   margin: 0 0 0.28571429rem 0;
   color: rgba(0, 0, 0, 0.87);
   font-size: 0.92857143em;
-  font-weight: bold;
+  font-weight: 500;
   text-transform: none;
 }
 
@@ -12395,7 +12395,7 @@ select.ui.dropdown {
   margin-bottom: 0;
   vertical-align: baseline;
   font-size: 0.92857143em;
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.87);
   text-transform: none;
 }
@@ -14785,7 +14785,7 @@ select.ui.dropdown {
   margin: calc(2rem - 0.1428571428571429em) 0 1rem;
   padding: 0 0;
   font-family: var(--fonts-regular);
-  font-weight: bold;
+  font-weight: 500;
   line-height: 1.28571429em;
   text-transform: none;
   color: rgba(0, 0, 0, 0.87);
@@ -15045,7 +15045,7 @@ h6.ui.header .sub.header {
 .ui.sub.header {
   padding: 0;
   margin-bottom: 0.14285714rem;
-  font-weight: bold;
+  font-weight: 500;
   font-size: 0.85714286em;
   text-transform: uppercase;
   color: '';
@@ -25869,7 +25869,7 @@ img.ui.bordered.image {
   display: inline-block;
   margin: -0.21425em 0 0;
   font-family: var(--fonts-regular);
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.85);
 }
 
@@ -26365,7 +26365,7 @@ img.ui.bordered.image {
   padding: 0.5833em 0.833em;
   color: rgba(0, 0, 0, 0.6);
   text-transform: none;
-  font-weight: bold;
+  font-weight: 500;
   border: 0 solid transparent;
   border-radius: 0.28571429rem;
   transition: background 0.1s ease;
@@ -26419,7 +26419,7 @@ a.ui.label {
 .ui.label > .detail {
   display: inline-block;
   vertical-align: top;
-  font-weight: bold;
+  font-weight: 500;
   margin-left: 1em;
   opacity: 0.8;
 }
@@ -28906,7 +28906,7 @@ ol.ui.list ol li,
   display: block;
   margin: 0;
   font-family: var(--fonts-regular);
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.87);
 }
 
@@ -30943,13 +30943,13 @@ ol.ui.suffixed.list li:before,
   margin: 0;
   background: '';
   text-transform: normal;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 .ui.vertical.menu .item > .header:not(.ui) {
   margin: 0 0 0.5em;
   font-size: 1em;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 /*--------------
@@ -31002,7 +31002,7 @@ ol.ui.suffixed.list li:before,
 
 .ui.menu .ui.dropdown .menu > .active.item {
   background: rgba(0, 0, 0, 0.03) !important;
-  font-weight: bold !important;
+  font-weight: 500 !important;
   color: rgba(0, 0, 0, 0.95) !important;
 }
 
@@ -31410,7 +31410,7 @@ Floated Menu / Item
 
 .ui.vertical.menu .item .menu .active.item {
   background-color: transparent;
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.95);
 }
 
@@ -31458,7 +31458,7 @@ Floated Menu / Item
   color: rgba(0, 0, 0, 0.95);
   border-top-width: 1px;
   border-color: #D4D4D5;
-  font-weight: bold;
+  font-weight: 500;
   margin-bottom: -1px;
   box-shadow: none;
   border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
@@ -31827,7 +31827,7 @@ Floated Menu / Item
   background-color: transparent;
   box-shadow: none;
   border-color: currentColor;
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.95);
 }
 
@@ -31935,7 +31935,7 @@ Floated Menu / Item
   color: rgba(0, 0, 0, 0.85);
   font-size: 0.92857143em;
   text-transform: uppercase;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 /* Image */
@@ -33233,7 +33233,7 @@ Floated Menu / Item
 .ui.message .header {
   display: block;
   font-family: var(--fonts-regular);
-  font-weight: bold;
+  font-weight: 500;
   margin: -0.14285714em 0 0 0;
 }
 
@@ -33970,7 +33970,7 @@ Floated Menu / Item
 .ui.modal > .header:not(.ui) {
   font-size: 1.42857143rem;
   line-height: 1.28571429em;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 /*--------------
@@ -34750,7 +34750,7 @@ Floated Menu / Item
   font-family: var(--fonts-regular);
   font-size: 1.14285714em;
   line-height: 1.2;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 .ui.popup > .header + .content {
@@ -35644,7 +35644,7 @@ Floated Menu / Item
   color: rgba(255, 255, 255, 0.7);
   text-shadow: none;
   margin-top: -0.5em;
-  font-weight: bold;
+  font-weight: 500;
   text-align: left;
 }
 
@@ -35659,7 +35659,7 @@ Floated Menu / Item
   left: 0;
   bottom: auto;
   color: rgba(0, 0, 0, 0.87);
-  font-weight: bold;
+  font-weight: 500;
   text-shadow: none;
   margin-top: 0.2em;
   text-align: center;
@@ -37055,7 +37055,7 @@ template {
 .ui.search > .results .result .title {
   margin: -0.14285714em 0 0;
   font-family: var(--fonts-regular);
-  font-weight: bold;
+  font-weight: 500;
   font-size: 1em;
   color: rgba(0, 0, 0, 0.85);
 }
@@ -37082,7 +37082,7 @@ template {
 .ui.search > .results > .message .header {
   font-family: var(--fonts-regular);
   font-size: 1rem;
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.87);
 }
 
@@ -37100,7 +37100,7 @@ template {
   background: #F3F4F5;
   padding: 0.92857143em 1em;
   color: rgba(0, 0, 0, 0.87);
-  font-weight: bold;
+  font-weight: 500;
   text-align: center;
 }
 
@@ -37291,7 +37291,7 @@ template {
   font-family: var(--fonts-regular);
   font-size: 1em;
   padding: 0.4em 1em;
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.4);
   border-bottom: 1px solid rgba(34, 36, 38, 0.1);
 }
@@ -39052,7 +39052,7 @@ h5 {
   font-family: var(--fonts-regular);
   line-height: 1.28571429em;
   margin: calc(2rem - 0.1428571428571429em) 0 1rem;
-  font-weight: bold;
+  font-weight: 500;
   padding: 0;
 }
 
@@ -39388,7 +39388,7 @@ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
   padding: 0.92857143em 0.78571429em;
   vertical-align: inherit;
   font-style: none;
-  font-weight: bold;
+  font-weight: 500;
   text-transform: none;
   border-bottom: 1px solid rgba(34, 36, 38, 0.1);
   border-left: none;
@@ -39563,7 +39563,7 @@ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
   .ui.table:not(.unstackable) > tr > td:first-child,
   .ui.table:not(.unstackable) > tbody > tr > td:first-child,
   .ui.table:not(.unstackable) > tfoot > tr > td:first-child {
-    font-weight: bold;
+    font-weight: 500;
   }
 
   /* Definition Table */
@@ -39894,7 +39894,7 @@ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
 .ui.definition.table > tfoot > tr > td:first-child:not(.ignored),
 .ui.definition.table tr td.definition {
   background: rgba(0, 0, 0, 0.03);
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.95);
   text-transform: '';
   box-shadow: '';
diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less
index 1a6180d227..d1bcfb6e25 100644
--- a/web_src/less/_admin.less
+++ b/web_src/less/_admin.less
@@ -64,7 +64,7 @@
     }
 
     dt {
-      font-weight: bolder;
+      font-weight: 500;
       float: left;
       width: 285px;
       clear: left;
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 7a484e4269..293c460fd9 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -57,6 +57,23 @@
   --color-secondary-alpha-70: #dededeb3;
   --color-secondary-alpha-80: #dededecc;
   --color-secondary-alpha-90: #dededee1;
+  /* colors */
+  --color-red: #db2828;
+  --color-orange: #f2711c;
+  --color-yellow: #fbbd08;
+  --color-olive: #b5cc18;
+  --color-green: #21ba45;
+  --color-teal: #00b5ad;
+  --color-blue: #2185d0;
+  --color-violet: #6435c9;
+  --color-purple: #a333c8;
+  --color-pink: #e03997;
+  --color-brown: #a5673f;
+  --color-grey: #767676;
+  --color-black: #1b1c1d;
+  --color-gold: #a1882b;
+  --color-white: #ffffff;
+  /* target-based colors */
   --color-body: #ffffff;
   --color-text: #212121;
   --color-box-header: #f7f7f7;
@@ -97,7 +114,7 @@
 @font-face {
   font-family: "Yu Gothic";
   src: local("Yu Gothic Bold");
-  font-weight: 700;
+  font-weight: 500;
 }
 
 @font-face {
@@ -119,6 +136,11 @@ samp {
   font-family: var(--fonts-monospace);
 }
 
+b,
+strong {
+  font-weight: 500;
+}
+
 body {
   background-color: var(--color-body);
   overflow-y: auto;
@@ -415,10 +437,10 @@ a:hover,
 
   .text {
     &.red {
-      color: #d95c5c !important;
+      color: var(--color-red) !important;
 
       a {
-        color: #d95c5c !important;
+        color: var(--color-red) !important;
 
         &:hover {
           color: #e67777 !important;
@@ -447,7 +469,7 @@ a:hover,
     }
 
     &.grey {
-      color: #767676 !important;
+      color: var(--color-grey) !important;
 
       a {
         color: #444444 !important;
@@ -459,27 +481,27 @@ a:hover,
     }
 
     &.light.grey {
-      color: #888888 !important;
+      color: var(--color-grey) !important;
     }
 
     &.green {
-      color: #6cc644 !important;
+      color: var(--color-green) !important;
     }
 
     &.purple {
-      color: #6e5494 !important;
+      color: var(--color-purple) !important;
     }
 
     &.yellow {
-      color: #fbbd08 !important;
+      color: var(--color-yellow) !important;
     }
 
     &.orange {
-      color: #f2711c !important;
+      color: var(--color-orange) !important;
     }
 
     &.gold {
-      color: #a1882b !important;
+      color: var(--color-gold) !important;
     }
 
     &.left {
@@ -499,7 +521,7 @@ a:hover,
     }
 
     &.bold {
-      font-weight: bold;
+      font-weight: 500;
     }
 
     &.italic {
@@ -534,7 +556,7 @@ a:hover,
   }
 
   &.bottom.attached.message {
-    font-weight: bold;
+    font-weight: 500;
     text-align: left;
     color: black;
 
@@ -544,7 +566,7 @@ a:hover,
 
     & > span,
     .pull-right > span {
-      color: #21ba45;
+      color: var(--color-green);
     }
   }
 
@@ -556,22 +578,22 @@ a:hover,
   .error {
     &.header {
       background-color: #ffe8e6 !important;
-      border-color: #db2828;
+      border-color: var(--color-red);
     }
 
     &.segment {
-      border-color: #db2828;
+      border-color: var(--color-red);
     }
   }
 
   .warning {
     &.header {
       background-color: #f9edbe !important;
-      border-color: #efc16b;
+      border-color: var(--color-yellow);
     }
 
     &.segment {
-      border-color: #efc16b;
+      border-color: var(--color-yellow);
     }
   }
 
@@ -652,7 +674,7 @@ a:hover,
 
   .background {
     &.red {
-      background-color: #d95c5c !important;
+      background-color: var(--color-red) !important;
     }
 
     &.blue {
@@ -664,31 +686,31 @@ a:hover,
     }
 
     &.grey {
-      background-color: #767676 !important;
+      background-color: var(--color-grey) !important;
     }
 
     &.light.grey {
-      background-color: #888888 !important;
+      background-color: var(--color-grey) !important;
     }
 
     &.green {
-      background-color: #6cc644 !important;
+      background-color: var(--color-green) !important;
     }
 
     &.purple {
-      background-color: #6e5494 !important;
+      background-color: var(--color-purple) !important;
     }
 
     &.yellow {
-      background-color: #fbbf09 !important;
+      background-color: var(--color-yellow) !important;
     }
 
     &.orange {
-      background-color: #f2711c !important;
+      background-color: var(--color-orange) !important;
     }
 
     &.gold {
-      background-color: #a1882b !important;
+      background-color: var(--color-gold) !important;
     }
   }
 
@@ -707,7 +729,7 @@ a:hover,
   .border {
     border: 1px solid;
     &.red {
-      border-color: #d95c5c !important;
+      border-color: var(--color-red) !important;
     }
 
     &.blue {
@@ -719,31 +741,31 @@ a:hover,
     }
 
     &.grey {
-      border-color: #767676 !important;
+      border-color: var(--color-grey) !important;
     }
 
     &.light.grey {
-      border-color: #888888 !important;
+      border-color: var(--color-grey) !important;
     }
 
     &.green {
-      border-color: #6cc644 !important;
+      border-color: var(--color-green) !important;
     }
 
     &.purple {
-      border-color: #6e5494 !important;
+      border-color: var(--color-purple) !important;
     }
 
     &.yellow {
-      border-color: #fbbd08 !important;
+      border-color: var(--color-yellow) !important;
     }
 
     &.orange {
-      border-color: #f2711c !important;
+      border-color: var(--color-orange) !important;
     }
 
     &.gold {
-      border-color: #a1882b !important;
+      border-color: var(--color-gold) !important;
     }
   }
 
@@ -804,7 +826,7 @@ a:hover,
 
 .scrolling.menu {
   .item.selected {
-    font-weight: 700 !important;
+    font-weight: 500 !important;
   }
 }
 
@@ -1056,7 +1078,7 @@ i.icon.centerlock {
   span {
     &.bottom-line {
       &::after {
-        border-bottom: 1px solid #eaecef;
+        border-bottom: 1px solid var(--color-secondary);
       }
     }
 
@@ -1171,7 +1193,7 @@ i.icon.centerlock {
 .lines-code,
 .lines-commit {
   .bottom-line {
-    border-bottom: 1px solid #eaecef;
+    border-bottom: 1px solid var(--color-secondary);
   }
 }
 .code-view {
@@ -1268,13 +1290,13 @@ i.icon.centerlock {
 
 .svg {
   span.green & {
-    color: #21ba45;
+    color: var(--color-green);
   }
   span.red & {
-    color: #db2828;
+    color: var(--color-red);
   }
   span.purple & {
-    color: #a333c8;
+    color: var(--color-purple);
   }
 }
 
diff --git a/web_src/less/_chroma.less b/web_src/less/_chroma.less
index 11de7b86ba..28a795784d 100644
--- a/web_src/less/_chroma.less
+++ b/web_src/less/_chroma.less
@@ -353,7 +353,7 @@
 /* GenericStrong */
 
 .chroma .gs {
-  font-weight: bold;
+  font-weight: 500;
 }
 /* GenericSubheading */
 
diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less
index f2dd145f55..d798f2bed5 100644
--- a/web_src/less/_dashboard.less
+++ b/web_src/less/_dashboard.less
@@ -61,7 +61,7 @@
     }
 
     .right.stackable.menu > .item.active {
-      color: #d9453d;
+      color: var(--color-red);
     }
   }
 
diff --git a/web_src/less/_home.less b/web_src/less/_home.less
index 139df3022b..707c873279 100644
--- a/web_src/less/_home.less
+++ b/web_src/less/_home.less
@@ -25,7 +25,7 @@
     }
 
     .svg {
-      color: #5aa509;
+      color: var(--color-green);
       height: 40px;
       width: 50px;
       vertical-align: bottom;
@@ -45,7 +45,7 @@
   }
 
   a {
-    color: #5aa509;
+    color: var(--color-green);
   }
 }
 
diff --git a/web_src/less/_markdown.less b/web_src/less/_markdown.less
index 868fe5c146..7a29630575 100644
--- a/web_src/less/_markdown.less
+++ b/web_src/less/_markdown.less
@@ -26,7 +26,7 @@
   }
 
   .absent {
-    color: #cc0000;
+    color: var(--color-red);
   }
 
   .anchor {
@@ -77,7 +77,7 @@
   h6 {
     margin-top: 1em;
     margin-bottom: 16px;
-    font-weight: bold;
+    font-weight: 500;
     line-height: 1.4;
 
     &:first-of-type {
@@ -193,7 +193,7 @@
     margin-top: 16px;
     font-size: 1em;
     font-style: italic;
-    font-weight: bold;
+    font-weight: 500;
   }
 
   dl dd {
@@ -224,7 +224,7 @@
   }
 
   table th {
-    font-weight: bold;
+    font-weight: 500;
   }
 
   table th,
@@ -450,7 +450,7 @@
   }
 
   .csv-data th {
-    font-weight: bold;
+    font-weight: 500;
     background: #f8f8f8;
     border-top: 0;
   }
diff --git a/web_src/less/_organization.less b/web_src/less/_organization.less
index 11b53a4cf1..a22190b930 100644
--- a/web_src/less/_organization.less
+++ b/web_src/less/_organization.less
@@ -117,7 +117,7 @@
       .item {
         margin-left: 0;
         margin-right: 0;
-        border-bottom: 1px solid #eeeeee;
+        border-bottom: 1px solid var(--color-secondary);
 
         .ui.avatar {
           width: 48px;
@@ -137,7 +137,7 @@
         padding: 10px 15px;
 
         &:not(:last-child) {
-          border-bottom: 1px solid #eeeeee;
+          border-bottom: 1px solid var(--color-secondary);
         }
       }
     }
@@ -149,7 +149,7 @@
         line-height: 32px;
 
         &:not(:last-child) {
-          border-bottom: 1px solid #dddddd;
+          border-bottom: 1px solid var(--color-secondary);
         }
 
         .button {
@@ -186,7 +186,7 @@
         margin-right: -14px;
         margin-left: -14px !important;
         padding: 10px;
-        border-bottom: 1px solid #e1e4e8;
+        border-bottom: 1px solid var(--color-secondary);
         border-top: none;
 
         a {
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 662a057715..27624d5768 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -432,7 +432,7 @@
           }
 
           .btn-octicon:hover {
-            color: #4078c0;
+            color: var(--color-primary);
           }
 
           .btn-octicon-danger:hover {
@@ -859,14 +859,13 @@
         }
 
         .badge {
-          width: 32px;
-          height: 32px;
+          width: 34px;
+          height: 34px;
           background-color: var(--color-timeline);
-          border: 2px solid var(--color-timeline);
           border-radius: 50%;
           display: flex;
           float: left;
-          margin-left: -32px;
+          margin-left: -34px;
           margin-right: 8px;
           color: #666;
           align-items: center;
@@ -877,14 +876,6 @@
             height: 22px;
             padding: 3px;
 
-            &.octicon-circle-slash {
-              color: #bd2c00;
-            }
-
-            &.octicon-dot-fill {
-              color: #6cc644;
-            }
-
             &.octicon-comment {
               margin-top: 2px;
             }
@@ -983,7 +974,7 @@
         }
 
         .author {
-          font-weight: 700;
+          font-weight: 500;
         }
 
         .comment-form-reply .footer {
@@ -1056,7 +1047,7 @@
           }
 
           > .bottom.segment {
-            background: #f3f4f5;
+            background: var(--color-box-body);
 
             .ui.images::after {
               clear: both;
@@ -1250,7 +1241,7 @@
       margin-right: -14px;
       margin-left: -14px;
       padding: 10px;
-      border-bottom: 1px solid #e1e4e8;
+      border-bottom: 1px solid var(--color-secondary);
       border-top: none;
 
       a {
@@ -1299,7 +1290,7 @@
         color: #000000;
 
         &:hover {
-          color: #4078c0;
+          color: var(--color-primary);
         }
       }
 
@@ -1323,7 +1314,7 @@
         }
 
         .overdue {
-          color: red;
+          color: var(--color-red);
         }
       }
 
@@ -1398,7 +1389,7 @@
         max-width: 90px;
 
         &:last-child {
-          border-left: 1px solid #b4b4b4;
+          border-left: 1px solid var(--color-secondary);
         }
       }
 
@@ -1658,7 +1649,7 @@
       flex: 0 0 auto;
 
       .bar {
-        background-color: #bd2c00;
+        background-color: var(--color-red);
         height: 12px;
         width: 40px;
         display: inline-block;
@@ -1666,7 +1657,7 @@
         vertical-align: text-top;
 
         .add {
-          background-color: #55a532;
+          background-color: var(--color-green);
           height: 12px;
         }
       }
@@ -1862,10 +1853,10 @@
       margin-right: 15px;
 
       .del {
-        color: red;
+        color: var(--color-red);
       }
       .add {
-        color: green;
+        color: var(--color-green);
       }
     }
   }
@@ -1907,7 +1898,7 @@
 
   &.release {
     #release-list {
-      border-top: 1px solid #dddddd;
+      border-top: 1px solid var(--color-secondary);
       margin-top: 20px;
       padding-top: 15px;
 
@@ -1942,7 +1933,7 @@
         }
 
         .detail {
-          border-left: 2px solid #dddddd;
+          border-left: 2px solid var(--color-secondary);
 
           .author {
             img {
@@ -2049,7 +2040,7 @@
       .item {
         padding-top: 10px;
         padding-bottom: 10px;
-        border-bottom: 1px solid #dddddd;
+        border-bottom: 1px solid var(--color-secondary);
 
         .ui.avatar {
           float: left;
@@ -2138,7 +2129,7 @@
           line-height: 2em;
 
           &:not(:last-child) {
-            border-bottom: 1px solid #dddddd;
+            border-bottom: 1px solid var(--color-secondary);
           }
         }
       }
@@ -2619,7 +2610,7 @@
     .title {
       color: #444444;
       font-size: 15px;
-      font-weight: bold;
+      font-weight: 500;
       margin: 0 6px;
 
       &:hover {
@@ -2699,7 +2690,7 @@
       }
 
       .overdue {
-        color: red;
+        color: var(--color-red);
       }
     }
   }
@@ -2711,7 +2702,8 @@
 
 .ui.form {
   .dropzone {
-    border: 2px dashed #0087f5;
+    border: 2px dashed var(--color-secondary);
+    background: none;
     box-shadow: none !important;
     padding: 0;
     min-height: 5rem;
@@ -2744,7 +2736,7 @@
   .list {
     > .item {
       .green:not(.ui.button) {
-        color: #21ba45;
+        color: var(--color-green);
       }
 
       &:not(:first-child) {
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index df6da056c8..65e36432a3 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -82,7 +82,7 @@
   }
 
   .footer {
-    border-top: 1px solid #f1f1f1;
+    border-top: 1px solid var(--color-secondary);
     padding: 10px 0;
 
     .markdown-info {
diff --git a/web_src/less/_tribute.less b/web_src/less/_tribute.less
index adac4d28b2..cfa2e5ded6 100644
--- a/web_src/less/_tribute.less
+++ b/web_src/less/_tribute.less
@@ -7,7 +7,7 @@
 
 .tribute-container ul {
   margin-top: 0 !important;
-  background: #ffffff !important;
+  background: var(--color-body) !important;
 }
 
 .tribute-container li {
@@ -22,7 +22,7 @@
 
 .tribute-container li.highlight,
 .tribute-container li:hover {
-  background: #2185d0 !important;
+  background: var(--color-primary) !important;
   color: #ffffff !important;
 }
 
diff --git a/web_src/less/_user.less b/web_src/less/_user.less
index 4af96bfd3d..9fa319deb6 100644
--- a/web_src/less/_user.less
+++ b/web_src/less/_user.less
@@ -11,7 +11,7 @@
       }
 
       .header {
-        font-weight: 700;
+        font-weight: 500;
         font-size: 1.3rem;
         margin-top: -.2rem;
         line-height: 1.3rem;
@@ -99,19 +99,19 @@
       font-size: 2em;
 
       &.green {
-        color: #21ba45;
+        color: var(--color-green);
       }
 
       &.red {
-        color: #d01919;
+        color: var(--color-red);
       }
 
       &.purple {
-        color: #a333c8;
+        color: var(--color-purple);
       }
 
       &.blue {
-        color: #2185d0;
+        color: var(--color-blue);
       }
     }
 
diff --git a/web_src/less/features/heatmap.less b/web_src/less/features/heatmap.less
index 3aa46a500f..3c11e0593e 100644
--- a/web_src/less/features/heatmap.less
+++ b/web_src/less/features/heatmap.less
@@ -15,7 +15,6 @@
 
   .total-contributions {
     text-align: left;
-    font-weight: 500;
     margin-top: 0;
   }
 }
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 7721e97d7d..d50aea0264 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -23,6 +23,22 @@
 .rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; }
 .rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
 
+.bg-red { background: var(--color-red) !important; }
+.bg-orange { background: var(--color-orange) !important; }
+.bg-yellow { background: var(--color-yellow) !important; }
+.bg-olive { background: var(--color-olive) !important; }
+.bg-green { background: var(--color-green) !important; }
+.bg-teal { background: var(--color-teal) !important; }
+.bg-blue { background: var(--color-blue) !important; }
+.bg-violet { background: var(--color-violet) !important; }
+.bg-purple { background: var(--color-purple) !important; }
+.bg-pink { background: var(--color-pink) !important; }
+.bg-brown { background: var(--color-brown) !important; }
+.bg-grey { background: var(--color-grey) !important; }
+.bg-gold { background: var(--color-gold) !important; }
+
+.text-white { color: var(--color-white) !important; }
+
 .m-0 { margin: 0 !important; }
 .m-1 { margin: .125rem !important; }
 .m-2 { margin: .25rem !important; }
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 638d5262d1..781a15ee8e 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -50,11 +50,28 @@
   --color-secondary-alpha-70: #454a57b3;
   --color-secondary-alpha-80: #454a57cc;
   --color-secondary-alpha-90: #454a57e1;
+  /* colors */
+  --color-red: #db2828;
+  --color-orange: #f2711c;
+  --color-yellow: #fbbd08;
+  --color-olive: #b5cc18;
+  --color-green: #21ba45;
+  --color-teal: #00b5ad;
+  --color-blue: #2185d0;
+  --color-violet: #6435c9;
+  --color-purple: #a333c8;
+  --color-pink: #e03997;
+  --color-brown: #a5673f;
+  --color-grey: #767676;
+  --color-black: #1b1c1d;
+  --color-gold: #a1882b;
+  --color-white: #ffffff;
+  /* target-based colors */
   --color-body: #383c4a;
   --color-box-header: #454a57;
   --color-box-body: #353945;
   --color-text: #b6bac5;
-  --color-timeline: #454a57;
+  --color-timeline: #4a505c;
   --color-input-text: #dcdcdc;
   --color-input-background: #2e323e;
   --color-input-border: #454a57;
@@ -416,7 +433,7 @@
 /* GenericStrong */
 
 .chroma .gs {
-  font-weight: bold;
+  font-weight: 500;
 }
 /* GenericSubheading */
 
@@ -459,10 +476,6 @@
   background: #6a737d;
 }
 
-.repository.branches .commit-divergence .bar-group:last-child {
-  border-color: #6a737d;
-}
-
 .ui.horizontal.segments > .segment {
   background-color: #383c4a;
 }
@@ -532,10 +545,6 @@ body {
   color: #a0cc75;
 }
 
-.repository.release #release-list {
-  border-top-color: var(--color-secondary);
-}
-
 .repository .milestone.list > .item .operate > a {
   color: #87ab63;
 }
@@ -624,6 +633,17 @@ footer {
   color: #dbdbdb;
 }
 
+.ui.labels a.label:hover,
+a.ui.label:hover {
+  background: #454b5a;
+  color: #dbdbdb;
+}
+
+.ui.basic.labels a.label:hover,
+a.ui.basic.label:hover {
+  background: var(--color-body);
+}
+
 .ui.red.label,
 .ui.red.labels .label {
   background-color: #7d3434 !important;
@@ -1017,10 +1037,6 @@ a.ui.basic.green.label:hover {
 }
 
 .repository.view.issue .comment-list .comment .content {
-  > .bottom.segment {
-    background: #353945;
-  }
-
   .header {
     color: #dbdbdb;
     background-color: var(--color-secondary);
@@ -1044,14 +1060,6 @@ a.ui.basic.green.label:hover {
   }
 }
 
-.repository.new.issue .comment.form .content::after {
-  border-right-color: #353945;
-}
-
-.repository.new.issue .comment.form .content::before {
-  border-right-color: #353945;
-}
-
 .repository.view.issue .comment-list .timeline-item .badge {
   color: #ccc;
 }
@@ -1337,13 +1345,8 @@ td.blob-hunk {
   box-shadow: 0 0 0 1px rgba(121, 71, 66, .5) inset, 0 0 0 0 transparent;
 }
 
-.ui.form .dropzone {
-  border: 1px dashed var(--color-secondary);
-  background-color: #2e323e;
-
-  .dz-button {
-    color: rgba(158, 158, 158, .8);
-  }
+.ui.form .dropzone .dz-button {
+  color: rgba(158, 158, 158, .8);
 }
 
 .ui.form .dropzone:hover .dz-button {
@@ -1380,11 +1383,6 @@ td.blob-hunk {
   background: #2e323e !important;
 }
 
-.bottom-line,
-.bottom-line::after {
-  border-color: #4e525e !important;
-}
-
 .lines-num {
   color: var(--color-secondary-dark-6) !important;
   border-color: var(--color-secondary) !important;
@@ -1500,11 +1498,6 @@ a.blob-excerpt:hover {
   border-bottom: 1px dashed var(--color-secondary);
 }
 
-.ui.text.yellow,
-.yellow.icon.icon.icon {
-  color: #e4ac07 !important;
-}
-
 .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(1),
 .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(2),
 .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(3),
@@ -1531,15 +1524,6 @@ a.blob-excerpt:hover {
   border-color: #634343 !important;
 }
 
-.repository .labelspage .item,
-.organization.settings .labelspage .item,
-.organization.teams .repositories .item:not(:last-child),
-.organization.teams .members .item:not(:last-child),
-.organization.teams .detail .item:not(:last-child),
-.organization.members .list .item {
-  border-bottom-color: var(--color-secondary);
-}
-
 .repository .labelspage .item a,
 .organization.settings .labelspage .item a {
   color: #6a737d;
@@ -1621,13 +1605,8 @@ a.blob-excerpt:hover {
     border: 0;
   }
 
-  .footer {
-    border-top-color: var(--color-secondary);
-
-    .markdown-info {
-      color: inherit;
-    }
-
+  .footer .markdown-info {
+    color: inherit;
   }
 }
 
@@ -1790,10 +1769,6 @@ footer .container .links > * {
   color: var(--color-secondary-dark-6);
 }
 
-.repository.release #release-list > li .detail {
-  border-left-color: var(--color-secondary);
-}
-
 .repository.release #release-list > li .detail .dot {
   background-color: #505667;
   border-color: #383c4a;
@@ -1807,15 +1782,6 @@ footer .container .links > * {
   box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .6);
 }
 
-.tribute-container ul {
-  background: #2d303b !important;
-}
-
-.tribute-container li.highlight,
-.tribute-container li:hover {
-  background: #728e5e !important;
-}
-
 .repository .repo-header .ui.huge.breadcrumb.repo-title .repo-header-icon .avatar {
   color: #2a2e3a;
 }