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

2 files changed, 22 insertions, 22 deletions

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"}}