Replace blue button and label classes with primary (#19763)

* make blue really blue * replace blue button and label classes with primary * add --color-blue-dark * add light color variants, tweak a few colors * fix colors * add comment Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
3 years ago · 9da3d78e74
parent ce52514762
commit 9da3d78e74
61 changed files with 132 additions and 123 deletions
--- a/templates/admin/auth/list.tmpl
+++ b/templates/admin/auth/list.tmpl
@ -6,7 +6,7 @@
 		<h4 class="ui top attached header">
 			{{.i18n.Tr "admin.auths.auth_manage_panel"}} ({{.i18n.Tr "admin.total" .Total}})
 			<div class="ui right">
-				<a class="ui blue tiny button" href="{{AppSubUrl}}/admin/auths/new">{{.i18n.Tr "admin.auths.new"}}</a>
+				<a class="ui primary tiny button" href="{{AppSubUrl}}/admin/auths/new">{{.i18n.Tr "admin.auths.new"}}</a>
 			</div>
 		</h4>
 		<div class="ui attached table segment">
--- a/templates/admin/base/search.tmpl
+++ b/templates/admin/base/search.tmpl
@ -18,6 +18,6 @@
 <form class="ui form ignore-dirty"  style="max-width: 90%;">
 	<div class="ui fluid action input">
 		<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus>
-		<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
+		<button class="ui primary button">{{.i18n.Tr "explore.search"}}</button>
 	</div>
 </form>
--- a/templates/admin/emails/list.tmpl
+++ b/templates/admin/emails/list.tmpl
@ -25,7 +25,7 @@
 			<form class="ui form ignore-dirty"  style="max-width: 90%">
 				<div class="ui fluid action input">
 					<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus>
-					<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
+					<button class="ui primary button">{{.i18n.Tr "explore.search"}}</button>
 				</div>
 			</form>
 		</div>
--- a/templates/admin/org/list.tmpl
+++ b/templates/admin/org/list.tmpl
@ -6,7 +6,7 @@
 		<h4 class="ui top attached header">
 			{{.i18n.Tr "admin.orgs.org_manage_panel"}} ({{.i18n.Tr "admin.total" .Total}})
 			<div class="ui right">
-				<a class="ui blue tiny button" href="{{AppSubUrl}}/org/create">{{.i18n.Tr "admin.orgs.new_orga"}}</a>
+				<a class="ui primary tiny button" href="{{AppSubUrl}}/org/create">{{.i18n.Tr "admin.orgs.new_orga"}}</a>
 			</div>
 		</h4>
 		<div class="ui attached segment">
--- a/templates/admin/packages/list.tmpl
+++ b/templates/admin/packages/list.tmpl
@ -24,7 +24,7 @@
 						<option value="pypi" {{if eq .PackageType "pypi"}}selected="selected"{{end}}>PyPi</option>
 						<option value="rubygems" {{if eq .PackageType "rubygems"}}selected="selected"{{end}}>RubyGems</option>
 					</select>
-					<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
+					<button class="ui primary button">{{.i18n.Tr "explore.search"}}</button>
 				</div>
 			</form>
 		</div>
--- a/templates/admin/process.tmpl
+++ b/templates/admin/process.tmpl
@ -1,7 +1,7 @@
 <h4 class="ui top attached header">
 	{{.i18n.Tr "admin.monitor.process"}}
 	<div class="ui right">
-		<a class="ui blue tiny button" href="{{AppSubUrl}}/admin/monitor/stacktrace">{{.i18n.Tr "admin.monitor.stacktrace"}}</a>
+		<a class="ui primary tiny button" href="{{AppSubUrl}}/admin/monitor/stacktrace">{{.i18n.Tr "admin.monitor.stacktrace"}}</a>
 	</div>
 </h4>
 <div class="ui attached segment">
--- a/templates/admin/repo/list.tmpl
+++ b/templates/admin/repo/list.tmpl
@ -6,7 +6,7 @@
 		<h4 class="ui top attached header">
 			{{.i18n.Tr "admin.repos.repo_manage_panel"}} ({{.i18n.Tr "admin.total" .Total}})
 			<div class="ui right">
-				<a class="ui blue tiny button" href="{{AppSubUrl}}/admin/repos/unadopted">{{.i18n.Tr "admin.repos.unadopted"}}</a>
+				<a class="ui primary tiny button" href="{{AppSubUrl}}/admin/repos/unadopted">{{.i18n.Tr "admin.repos.unadopted"}}</a>
 			</div>
 		</h4>
 		<div class="ui attached segment">
--- a/templates/admin/repo/search.tmpl
+++ b/templates/admin/repo/search.tmpl
@ -24,6 +24,6 @@
 <form class="ui form ignore-dirty"  style="max-width: 90%">
 	<div class="ui fluid action input">
 		<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus>
-		<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
+		<button class="ui primary button">{{.i18n.Tr "explore.search"}}</button>
 	</div>
 </form>
--- a/templates/admin/repo/unadopted.tmpl
+++ b/templates/admin/repo/unadopted.tmpl
@ -6,7 +6,7 @@
 		<h4 class="ui top attached header">
 			{{.i18n.Tr "admin.repos.unadopted"}}
 			<div class="ui right">
-				<a class="ui blue tiny button" href="{{AppSubUrl}}/admin/repos">{{.i18n.Tr "admin.repos.repo_manage_panel"}}</a>
+				<a class="ui primary tiny button" href="{{AppSubUrl}}/admin/repos">{{.i18n.Tr "admin.repos.repo_manage_panel"}}</a>
 			</div>
 		</h4>
 		<div class="ui attached segment">
@ -14,7 +14,7 @@
 				<div class="ui fluid action input">
 				<input name="search" value="true" type="hidden">
 				<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "repo.adopt_search"}}" autofocus>
-				<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
+				<button class="ui primary button">{{.i18n.Tr "explore.search"}}</button>
 				</div>
 			</form>
 		</div>
--- a/templates/admin/stacktrace.tmpl
+++ b/templates/admin/stacktrace.tmpl
@ -6,7 +6,7 @@
 		<h4 class="ui top attached header">
 			{{.i18n.Tr "admin.monitor.stacktrace"}}: {{.i18n.Tr "admin.monitor.goroutines" .GoroutineCount}}
 			<div class="ui right">
-				<a class="ui blue tiny button" href="{{AppSubUrl}}/admin/monitor">{{.i18n.Tr "admin.monitor"}}</a>
+				<a class="ui primary tiny button" href="{{AppSubUrl}}/admin/monitor">{{.i18n.Tr "admin.monitor"}}</a>
 			</div>
 		</h4>
 		<div class="ui attached segment">
--- a/templates/admin/user/list.tmpl
+++ b/templates/admin/user/list.tmpl
@ -6,7 +6,7 @@
 		<h4 class="ui top attached header">
 			{{.i18n.Tr "admin.users.user_manage_panel"}} ({{.i18n.Tr "admin.total" .Total}})
 			<div class="ui right">
-				<a class="ui blue tiny button" href="{{AppSubUrl}}/admin/users/new">{{.i18n.Tr "admin.users.new_account"}}</a>
+				<a class="ui primary tiny button" href="{{AppSubUrl}}/admin/users/new">{{.i18n.Tr "admin.users.new_account"}}</a>
 			</div>
 		</h4>
 		<div class="ui attached segment">
@ -56,7 +56,7 @@
 				<!-- Search Text -->
 				<div class="ui fluid action input" style="max-width: 70%;">
 					<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus>
-					<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
+					<button class="ui primary button">{{.i18n.Tr "explore.search"}}</button>
 				</div>
 			</form>
 		</div>
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@ -77,7 +77,7 @@
 					<a class="stopwatch-link df ac" href="{{.ActiveStopwatch.IssueLink}}">
 						{{svg "octicon-issue-opened"}}
 						<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
-						<span class="ui label blue stopwatch-time my-0 mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
+						<span class="ui primary label stopwatch-time my-0 mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
 							{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
 						</span>
 					</a>
--- a/templates/explore/code.tmpl
+++ b/templates/explore/code.tmpl
@ -14,7 +14,7 @@
 						<div class="item" data-value="match">{{.i18n.Tr "explore.search.match"}}</div>
 					</div>
 				</div>
-				<button class="ui blue button"{{if .CodeIndexerUnavailable }} disabled{{end}}>{{.i18n.Tr "explore.search"}}</button>
+				<button class="ui primary button"{{if .CodeIndexerUnavailable }} disabled{{end}}>{{.i18n.Tr "explore.search"}}</button>
 			</div>
 		</form>
 		<div class="ui divider"></div>
--- a/templates/explore/repo_search.tmpl
+++ b/templates/explore/repo_search.tmpl
@ -27,7 +27,7 @@
 	<input type="hidden" name="language" value="{{$.Language}}">
 	<div class="ui fluid action input">
 		<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus>
-		<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
+		<button class="ui primary button">{{.i18n.Tr "explore.search"}}</button>
 	</div>
 </form>
 <div class="ui divider"></div>
--- a/templates/explore/search.tmpl
+++ b/templates/explore/search.tmpl
@ -19,7 +19,7 @@
 	<input type="hidden" name="tab" value="{{$.TabName}}">
 	<div class="ui fluid action input">
 		<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus>
-		<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
+		<button class="ui primary button">{{.i18n.Tr "explore.search"}}</button>
 	</div>
 </form>
 <div class="ui divider"></div>
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@ -78,7 +78,7 @@
 					</div>
 					{{if .IsOrganizationOwner}}
 						<div class="ui bottom attached segment">
-							<a class="ui blue small button" href="{{.OrgLink}}/teams/new">{{.i18n.Tr "org.create_new_team"}}</a>
+							<a class="ui primary small button" href="{{.OrgLink}}/teams/new">{{.i18n.Tr "org.create_new_team"}}</a>
 						</div>
 					{{end}}
 				{{end}}
--- a/templates/org/team/sidebar.tmpl
+++ b/templates/org/team/sidebar.tmpl
@ -12,7 +12,7 @@
 				<form method="post" action="{{.OrgLink}}/teams/{{.Team.LowerName | PathEscape}}/action/join">
 					{{$.CsrfTokenHtml}}
 					<input type="hidden" name="page" value="team"/>
-					<button type="submit" class="ui blue tiny button" name="uid" value="{{$.SignedUser.ID}}">{{$.i18n.Tr "org.teams.join"}}</button>
+					<button type="submit" class="ui primary tiny button" name="uid" value="{{$.SignedUser.ID}}">{{$.i18n.Tr "org.teams.join"}}</button>
 				</form>
 			{{end}}
 		</div>
--- a/templates/org/team/teams.tmpl
+++ b/templates/org/team/teams.tmpl
@ -25,7 +25,7 @@
 							{{else if $.IsOrganizationOwner}}
 								<form method="post" action="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/action/join">
 									{{$.CsrfTokenHtml}}
-									<button type="submit" class="ui blue small button" name="uid" value="{{$.SignedUser.ID}}">{{$.i18n.Tr "org.teams.join"}}</button>
+									<button type="submit" class="ui primary small button" name="uid" value="{{$.SignedUser.ID}}">{{$.i18n.Tr "org.teams.join"}}</button>
 								</form>
 							{{end}}
 						</div>
--- a/templates/package/shared/list.tmpl
+++ b/templates/package/shared/list.tmpl
@ -17,7 +17,7 @@
 				<option value="pypi" {{if eq .PackageType "pypi"}}selected="selected"{{end}}>PyPi</option>
 				<option value="rubygems" {{if eq .PackageType "rubygems"}}selected="selected"{{end}}>RubyGems</option>
 			</select>
-			<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
+			<button class="ui primary button">{{.i18n.Tr "explore.search"}}</button>
 		</div>
 	</form>
 	<div class="ui {{if .PackageDescriptors}}issue list{{end}}">
--- a/templates/package/shared/versionlist.tmpl
+++ b/templates/package/shared/versionlist.tmpl
@ -10,7 +10,7 @@
 				<option value="untagged" {{if not $isTagged}}selected="selected"{{end}}>{{.i18n.Tr "packages.filter.container.untagged"}}</option>
 			</select>
 			{{end}}
-			<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
+			<button class="ui primary button">{{.i18n.Tr "explore.search"}}</button>
 		</div>
 	</form>
 	<div class="ui {{if .PackageDescriptors}}issue list{{end}}">
--- a/templates/repo/commit_page.tmpl
+++ b/templates/repo/commit_page.tmpl
@ -22,11 +22,11 @@
 				<h3 class="mb-0 f1"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage $.Context .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses  "root" $}}</h3>
 				{{if not $.PageIsWiki}}
 					<div class="ui">
-						<a class="ui blue tiny button" href="{{.SourcePath}}">
+						<a class="ui primary tiny button" href="{{.SourcePath}}">
 							{{.i18n.Tr "repo.diff.browse_source"}}
 						</a>
 						{{if and ($.Permission.CanWrite $.UnitTypeCode) (not $.Repository.IsArchived) (not .IsDeleted)}}{{- /* */ -}}
-							<div class="ui blue tiny floating dropdown icon button">{{.i18n.Tr "repo.commit.actions"}}
+							<div class="ui primary tiny floating dropdown icon button">{{.i18n.Tr "repo.commit.actions"}}
 								{{svg "octicon-triangle-down" 14 "dropdown icon"}}<span class="sr-mobile-only">{{.i18n.Tr "repo.commit.actions"}}</span>
 								<div class="menu">
 									<div class="ui header">{{.i18n.Tr "repo.commit.actions"}}</div>
@ -174,16 +174,16 @@
 							<span>{{.i18n.Tr "repo.diff.parent"}}</span>
 							{{range .Parents}}
 								{{if $.PageIsWiki}}
-									<a class="ui blue sha label" href="{{$.RepoLink}}/wiki/commit/{{PathEscape .}}">{{ShortSha .}}</a>
+									<a class="ui primary sha label" href="{{$.RepoLink}}/wiki/commit/{{PathEscape .}}">{{ShortSha .}}</a>
 								{{else}}
-									<a class="ui blue sha label" href="{{$.RepoLink}}/commit/{{PathEscape .}}">{{ShortSha .}}</a>
+									<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{PathEscape .}}">{{ShortSha .}}</a>
 								{{end}}
 							{{end}}
 						</div>
 					{{end}}
 					<div class="item">
 						<span>{{.i18n.Tr "repo.diff.commit"}}</span>
-						<span class="ui blue sha label">{{ShortSha .CommitID}}</span>
+						<span class="ui primary sha label">{{ShortSha .CommitID}}</span>
 					</div>
 				</div>
 		</div>
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@ -186,7 +186,7 @@
 					{{$.i18n.Tr "loading"}}
 					</div>
 					<div class="text right edit buttons">
-						<div class="ui basic blue cancel button" tabindex="3">{{.i18n.Tr "repo.issues.cancel"}}</div>
+						<div class="ui basic primary cancel button" tabindex="3">{{.i18n.Tr "repo.issues.cancel"}}</div>
 						<div class="ui green save button" tabindex="2">{{.i18n.Tr "repo.issues.save"}}</div>
 					</div>
 				</div>
--- a/templates/repo/editor/cherry_pick.tmpl
+++ b/templates/repo/editor/cherry_pick.tmpl
@ -12,7 +12,7 @@
 				<div class="fitted item treepath">
 					<div class="ui breadcrumb field {{if .Err_TreePath}}error{{end}}">
 						{{$shaurl := printf "%s/commit/%s" $.RepoLink (PathEscape .SHA)}}
-						{{$shalink := printf "<a class=\"ui blue sha label\" href=\"%s\">%s</a>" (Escape $shaurl) (ShortSha .SHA)}}
+						{{$shalink := printf "<a class=\"ui primary sha label\" href=\"%s\">%s</a>" (Escape $shaurl) (ShortSha .SHA)}}
 						{{if eq .CherryPickType "revert"}}
 							{{.i18n.Tr "repo.editor.revert" $shalink | Str2html}}
 						{{else}}
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@ -158,7 +158,7 @@
 					<a class="{{if .PageIsIssueList}}active{{end}} item" href="{{.RepoLink}}/issues">
 						{{svg "octicon-issue-opened"}} {{.i18n.Tr "repo.issues"}}
 						{{if .Repository.NumOpenIssues}}
-							<span class="ui blue small label">{{CountFmt .Repository.NumOpenIssues}}</span>
+							<span class="ui primary small label">{{CountFmt .Repository.NumOpenIssues}}</span>
 						{{end}}
 					</a>
 				{{end}}
@ -173,7 +173,7 @@
 					<a class="{{if .PageIsPullList}}active{{end}} item" href="{{.RepoLink}}/pulls">
 						{{svg "octicon-git-pull-request"}} {{.i18n.Tr "repo.pulls"}}
 						{{if .Repository.NumOpenPulls}}
-							<span class="ui blue small label">{{CountFmt .Repository.NumOpenPulls}}</span>
+							<span class="ui primary small label">{{CountFmt .Repository.NumOpenPulls}}</span>
 						{{end}}
 					</a>
 				{{end}}
@ -188,7 +188,7 @@
 					<a href="{{.RepoLink}}/projects" class="{{ if .IsProjectsPage }}active{{end}} item">
 						{{svg "octicon-project"}} {{.i18n.Tr "repo.project_board"}}
 						{{if .Repository.NumOpenProjects}}
-							<span class="ui blue small label">{{CountFmt .Repository.NumOpenProjects}}</span>
+							<span class="ui primary small label">{{CountFmt .Repository.NumOpenProjects}}</span>
 						{{end}}
 					</a>
 				{{ end }}
@ -197,7 +197,7 @@
 				<a class="{{if .PageIsReleaseList}}active{{end}} item" href="{{.RepoLink}}/releases">
 					{{svg "octicon-tag"}} {{.i18n.Tr "repo.releases"}}
 					{{if .NumReleases}}
-						<span class="ui blue small label">{{CountFmt .NumReleases}}</span>
+						<span class="ui primary small label">{{CountFmt .NumReleases}}</span>
 					{{end}}
 				</a>
 				{{end}}
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@ -106,7 +106,7 @@
 			<div class="fitted item">
 				{{if eq $n 0}}
 					{{if .Repository.IsTemplate}}
-						<div class="ui tiny blue buttons">
+						<div class="ui tiny primary buttons">
 							<a href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}" class="ui button">
 								{{.i18n.Tr "repo.use_template"}}
 							</a>
--- a/templates/repo/issue/labels/label_load_template.tmpl
+++ b/templates/repo/issue/labels/label_load_template.tmpl
@ -17,7 +17,7 @@
 						{{svg "octicon-triangle-down" 18 "dropdown icon"}}
 					</div>
 				</div>
-				<button type="submit" class="ui blue button">{{.i18n.Tr "repo.issues.label_templates.use"}}</button>
+				<button type="submit" class="ui primary button">{{.i18n.Tr "repo.issues.label_templates.use"}}</button>
 			</form>
 		</div>
 	</div>
--- a/templates/repo/issue/labels/label_new.tmpl
+++ b/templates/repo/issue/labels/label_new.tmpl
@ -19,8 +19,8 @@
 				{{template "repo/issue/label_precolors"}}
 			</div>
 			<div class="buttons">
-				<div class="ui blue small basic cancel button">{{.i18n.Tr "repo.milestones.cancel"}}</div>
-				<button class="ui green small button">{{.i18n.Tr "repo.issues.create_label"}}</button>
+				<div class="ui secondary small basic cancel button">{{.i18n.Tr "repo.milestones.cancel"}}</div>
+				<button class="ui primary small button">{{.i18n.Tr "repo.issues.create_label"}}</button>
 			</div>
 		</div>
 	</form>
--- a/templates/repo/issue/milestone_new.tmpl
+++ b/templates/repo/issue/milestone_new.tmpl
@ -44,7 +44,7 @@
 				<div class="ui divider"></div>
 				<div class="ui right">
 					{{if .PageIsEditMilestone}}
-						<a class="ui blue basic button" href="{{.RepoLink}}/milestones">
+						<a class="ui primary basic button" href="{{.RepoLink}}/milestones">
 							{{.i18n.Tr "repo.milestones.cancel"}}
 						</a>
 						<button class="ui green button">
--- a/templates/repo/issue/milestones.tmpl
+++ b/templates/repo/issue/milestones.tmpl
@ -33,7 +33,7 @@
 					<div class="ui search fluid action input">
 						<input type="hidden" name="state" value="{{$.State}}"/>
 						<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}...">
-						<button class="ui blue button" type="submit">{{.i18n.Tr "explore.search"}}</button>
+						<button class="ui primary button" type="submit">{{.i18n.Tr "explore.search"}}</button>
 					</div>
 				</form>
 			</div>
--- a/templates/repo/issue/search.tmpl
+++ b/templates/repo/issue/search.tmpl
@ -6,6 +6,6 @@
 		<input type="hidden" name="milestone" value="{{$.MilestoneID}}"/>
 		<input type="hidden" name="assignee" value="{{$.AssigneeID}}"/>
 		<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}...">
-		<button class="ui blue button" type="submit">{{.i18n.Tr "explore.search"}}</button>
+		<button class="ui primary button" type="submit">{{.i18n.Tr "explore.search"}}</button>
 	</div>
 </form>
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@ -215,8 +215,8 @@
 		{{end}}
 		<div class="field footer">
 			<div class="text right edit">
-				<div class="ui basic blue cancel button" tabindex="3">{{.i18n.Tr "repo.issues.cancel"}}</div>
-				<div class="ui green save button" tabindex="2">{{.i18n.Tr "repo.issues.save"}}</div>
+				<div class="ui basic secondary cancel button" tabindex="3">{{.i18n.Tr "repo.issues.cancel"}}</div>
+				<div class="ui primary save button" tabindex="2">{{.i18n.Tr "repo.issues.save"}}</div>
 			</div>
 		</div>
 	</div>
--- a/templates/repo/issue/view_content/reactions.tmpl
+++ b/templates/repo/issue/view_content/reactions.tmpl
@ -1,5 +1,5 @@
 {{range $key, $value := .Reactions}}
-	<a class="ui label basic{{if $value.HasUser $.ctx.SignedUserID}} blue{{end}}{{if not $.ctx.IsSigned}} disabled{{end}}" data-title="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ $.ctx.i18n.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}" data-content="{{ $key }}" data-action-url="{{ $.ActionURL }}">
+	<a class="ui label basic{{if $value.HasUser $.ctx.SignedUserID}} primary{{end}}{{if not $.ctx.IsSigned}} disabled{{end}}" data-title="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ $.ctx.i18n.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}" data-content="{{ $key }}" data-action-url="{{ $.ActionURL }}">
 		<span class="reaction">{{ReactionToEmoji $key}}</span>
 		<span class="reaction-count">{{len $value}}</span>
 	</a>
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@ -2,7 +2,7 @@
 	<div class="issue-title" id="issue-title-wrapper">
 		{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
 			<div class="edit-button">
-				<div id="edit-title" class="ui basic green not-in-edit button">{{.i18n.Tr "repo.issues.edit"}}</div>
+				<div id="edit-title" class="ui basic secondary not-in-edit button">{{.i18n.Tr "repo.issues.edit"}}</div>
 			</div>
 		{{end}}
 		<h1>
@ -14,8 +14,8 @@
 		</h1>
 		{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
 			<div class="edit-buttons">
-				<div id="cancel-edit-title" class="ui basic blue in-edit button" style="display: none">{{.i18n.Tr "repo.issues.cancel"}}</div>
-				<div id="save-edit-title" class="ui green in-edit button" style="display: none" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.i18n.Tr "repo.issues.save"}}</div>
+				<div id="cancel-edit-title" class="ui basic secondary in-edit button" style="display: none">{{.i18n.Tr "repo.issues.cancel"}}</div>
+				<div id="save-edit-title" class="ui primary in-edit button" style="display: none" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.i18n.Tr "repo.issues.save"}}</div>
 			</div>
 		{{end}}
 	</div>
--- a/templates/repo/projects/new.tmpl
+++ b/templates/repo/projects/new.tmpl
@ -50,7 +50,7 @@
 				<div class="ui divider"></div>
 				<div class="ui left">
 					{{if .PageIsEditProjects}}
-					<a class="ui blue basic button" href="{{.RepoLink}}/projects">
+					<a class="ui primary basic button" href="{{.RepoLink}}/projects">
 						{{.i18n.Tr "repo.milestones.cancel"}}
 					</a>
 					<button class="ui green button">
--- a/templates/repo/pulls/tab_menu.tmpl
+++ b/templates/repo/pulls/tab_menu.tmpl
@ -2,16 +2,16 @@
 	<a class="item {{if .PageIsPullConversation}}active{{end}}" href="{{.Issue.Link}}">
 		{{svg "octicon-comment-discussion"}}
 		{{$.i18n.Tr "repo.pulls.tab_conversation"}}
-		<span class="ui {{if not .Issue.NumComments}}gray{{else}}blue{{end}} small label">{{.Issue.NumComments}}</span>
+		<span class="ui {{if not .Issue.NumComments}}gray{{else}}primary{{end}} small label">{{.Issue.NumComments}}</span>
 	</a>
 	<a class="item {{if .PageIsPullCommits}}active{{end}}" {{if .NumCommits}}href="{{.Issue.Link}}/commits"{{end}}>
 		{{svg "octicon-git-commit"}}
 		{{$.i18n.Tr "repo.pulls.tab_commits"}}
-		<span class="ui {{if not .NumCommits}}gray{{else}}blue{{end}} small label">{{if .NumCommits}}{{.NumCommits}}{{else}}N/A{{end}}</span>
+		<span class="ui {{if not .NumCommits}}gray{{else}}primary{{end}} small label">{{if .NumCommits}}{{.NumCommits}}{{else}}N/A{{end}}</span>
 	</a>
 	<a class="item {{if .PageIsPullFiles}}active{{end}}" {{if .NumFiles}}href="{{.Issue.Link}}/files"{{end}}>
 		{{svg "octicon-diff"}}
 		{{$.i18n.Tr "repo.pulls.tab_files"}}
-		<span class="ui {{if not .NumFiles}}gray{{else}}blue{{end}} small label">{{if .NumFiles}}{{.NumFiles}}{{else}}N/A{{end}}</span>
+		<span class="ui {{if not .NumFiles}}gray{{else}}primary{{end}} small label">{{if .NumFiles}}{{.NumFiles}}{{else}}N/A{{end}}</span>
 	</a>
 </div>
--- a/templates/repo/settings/branches.tmpl
+++ b/templates/repo/settings/branches.tmpl
@ -66,7 +66,7 @@
 							<tbody>
 								{{range .ProtectedBranches}}
 									<tr>
-										<td><div class="ui basic label blue">{{.BranchName}}</div></td>
+										<td><div class="ui basic primary label">{{.BranchName}}</div></td>
 										<td class="right aligned"><a class="rm ui button" href="{{$.Repository.Link}}/settings/branches/{{.BranchName | PathEscapeSegments}}">{{$.i18n.Tr "repo.settings.edit_protected_branch"}}</a></td>
 									</tr>
 								{{else}}
--- a/templates/repo/settings/deploy_keys.tmpl
+++ b/templates/repo/settings/deploy_keys.tmpl
@ -8,9 +8,9 @@
 			{{.i18n.Tr "repo.settings.deploy_keys"}}
 			<div class="ui right">
 			{{if not .DisableSSH}}
-				<div class="ui blue tiny show-panel button" data-panel="#add-deploy-key-panel">{{.i18n.Tr "repo.settings.add_deploy_key"}}</div>
+				<div class="ui primary tiny show-panel button" data-panel="#add-deploy-key-panel">{{.i18n.Tr "repo.settings.add_deploy_key"}}</div>
 			{{else}}
-				<div class="ui blue tiny button disabled">{{.i18n.Tr "settings.ssh_disabled"}}</div>
+				<div class="ui primary tiny button disabled">{{.i18n.Tr "settings.ssh_disabled"}}</div>
 			{{end}}
 			</div>
 		</h4>
--- a/templates/repo/settings/lfs_file.tmpl
+++ b/templates/repo/settings/lfs_file.tmpl
@ -12,7 +12,7 @@
 						<a class="ui mini basic button unescape-button" style="display: none;">{{.i18n.Tr "repo.unescape_control_characters"}}</a>
 						<a class="ui mini basic button escape-button">{{.i18n.Tr "repo.escape_control_characters"}}</a>
 					{{end}}
-					<a class="ui blue show-panel button" href="{{.LFSFilesLink}}/find?oid={{.LFSFile.Oid}}&size={{.LFSFile.Size}}">{{$.i18n.Tr "repo.settings.lfs_findcommits"}}</a>
+					<a class="ui primary show-panel button" href="{{.LFSFilesLink}}/find?oid={{.LFSFile.Oid}}&size={{.LFSFile.Size}}">{{$.i18n.Tr "repo.settings.lfs_findcommits"}}</a>
 				</div>
 			</h4>
 			<div class="ui attached table unstackable segment">
--- a/templates/repo/settings/lfs_file_find.tmpl
+++ b/templates/repo/settings/lfs_file_find.tmpl
@ -30,12 +30,12 @@
 								{{if .ParentHashes}}
 									{{$.i18n.Tr "repo.diff.parent"}}
 									{{range .ParentHashes}}
-										<a class="ui blue sha label" href="{{$.RepoLink}}/commit/{{.String}}">{{ShortSha .String}}</a>
+										<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.String}}">{{ShortSha .String}}</a>
 									{{end}}
 								{{end}}
 								<div class="mobile-only"></div>
 								{{$.i18n.Tr "repo.diff.commit"}}
-								<a class="ui blue sha label" href="{{$.RepoLink}}/commit/{{.SHA}}">{{ShortSha .SHA}}</a>
+								<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.SHA}}">{{ShortSha .SHA}}</a>
 							</td>
 							<td>{{TimeSince .When $.i18n.Lang}}</td>
 						</tr>
--- a/templates/repo/settings/lfs_locks.tmpl
+++ b/templates/repo/settings/lfs_locks.tmpl
@ -13,7 +13,7 @@
 					{{$.CsrfTokenHtml}}
 					<div class="ui fluid action input">
 						<input name="path" value="" placeholder="{{.i18n.Tr "repo.settings.lfs_lock_path"}}" autofocus>
-						<button class="ui blue button">{{.i18n.Tr "repo.settings.lfs_lock"}}</button>
+						<button class="ui primary button">{{.i18n.Tr "repo.settings.lfs_lock"}}</button>
 					</div>
 				</form>
 			</div>
@ -43,7 +43,7 @@
 							<td class="right aligned">
 								<form action="{{$.LFSFilesLink}}/locks/{{$lock.ID}}/unlock" method="POST">
 									{{$.CsrfTokenHtml}}
-									<button class="ui blue button"><span class="btn-octicon">{{svg "octicon-lock"}}</span>{{$.i18n.Tr "repo.settings.lfs_force_unlock"}}</button>
+									<button class="ui primary button"><span class="btn-octicon">{{svg "octicon-lock"}}</span>{{$.i18n.Tr "repo.settings.lfs_force_unlock"}}</button>
 								</form>
 							</td>
 						</tr>
--- a/templates/repo/settings/lfs_pointers.tmpl
+++ b/templates/repo/settings/lfs_pointers.tmpl
@ -56,7 +56,7 @@
 								</span>
 							</td>
 							<td>
-								<a class="ui blue show-panel button" href="{{$.LFSFilesLink}}/find?oid={{.Oid}}&size={{.Size}}&sha={{.SHA}}">{{$.i18n.Tr "repo.settings.lfs_findcommits"}}</a>
+								<a class="ui primary show-panel button" href="{{$.LFSFilesLink}}/find?oid={{.Oid}}&size={{.Size}}&sha={{.SHA}}">{{$.i18n.Tr "repo.settings.lfs_findcommits"}}</a>
 							</td>
 							<td>{{if .InRepo}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
 							<td>{{if .Exists}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@ -98,7 +98,7 @@
 								<form method="post" style="display: inline-block">
 									{{.CsrfTokenHtml}}
 									<input type="hidden" name="action" value="mirror-sync">
-									<button class="ui blue tiny button inline text-thin">{{$.i18n.Tr "repo.settings.sync_mirror"}}</button>
+									<button class="ui primary tiny button inline text-thin">{{$.i18n.Tr "repo.settings.sync_mirror"}}</button>
 								</form>
 							</td>
 						</tr>
@ -183,7 +183,7 @@
 									{{$.CsrfTokenHtml}}
 									<input type="hidden" name="action" value="push-mirror-sync">
 									<input type="hidden" name="push_mirror_id" value="{{.ID}}">
-									<button class="ui blue tiny button inline text-thin">{{$.i18n.Tr "repo.settings.sync_mirror"}}</button>
+									<button class="ui primary tiny button inline text-thin">{{$.i18n.Tr "repo.settings.sync_mirror"}}</button>
 								</form>
 							</td>
 						</tr>
--- a/templates/repo/settings/tags.tmpl
+++ b/templates/repo/settings/tags.tmpl
@ -65,7 +65,7 @@
 									<button class="ui green button">
 										{{$.i18n.Tr "save"}}
 									</button>
-									<a class="ui blue button" href="{{$.RepoLink}}/settings/tags">
+									<a class="ui primary button" href="{{$.RepoLink}}/settings/tags">
 										{{$.i18n.Tr "cancel"}}
 									</a>
 									{{else}}
@ -110,7 +110,7 @@
 											{{end}}
 										</td>
 										<td class="right aligned">
-											<a class="ui tiny blue button" href="{{$.RepoLink}}/settings/tags/{{.ID}}">{{$.i18n.Tr "edit"}}</a>
+											<a class="ui tiny primary button" href="{{$.RepoLink}}/settings/tags/{{.ID}}">{{$.i18n.Tr "edit"}}</a>
 											<form class="dib" action="{{$.RepoLink}}/settings/tags/delete" method="post">
 												{{$.CsrfTokenHtml}}
 												<input type="hidden" name="id" value="{{.ID}}" />
--- a/templates/repo/settings/webhook/base_list.tmpl
+++ b/templates/repo/settings/webhook/base_list.tmpl
@ -2,7 +2,7 @@
 	{{.Title}}
 	<div class="ui right">
 		<div class="ui floating1 jump dropdown">
-			<div class="ui blue tiny button">{{.i18n.Tr "repo.settings.add_webhook"}}</div>
+			<div class="ui primary tiny button">{{.i18n.Tr "repo.settings.add_webhook"}}</div>
 			<div class="menu">
 				<a class="item" href="{{.BaseLinkNew}}/gitea/new">
 					<img width="20" height="20" src="{{AssetUrlPrefix}}/img/gitea.svg">{{.i18n.Tr "repo.settings.web_hook_name_gitea"}}
--- a/templates/repo/settings/webhook/history.tmpl
+++ b/templates/repo/settings/webhook/history.tmpl
@ -18,7 +18,7 @@
 						{{else}}
 							<span class="text red">{{svg "octicon-alert"}}</span>
 						{{end}}
-						<a class="ui blue sha label toggle button" data-target="#info-{{.ID}}">{{.UUID}}</a>
+						<a class="ui primary sha label toggle button" data-target="#info-{{.ID}}">{{.UUID}}</a>
 						<div class="ui right">
 							<span class="text grey time">
 								{{.DeliveredString}}
--- a/templates/user/auth/activate.tmpl
+++ b/templates/user/auth/activate.tmpl
@ -38,7 +38,7 @@
 							<p>{{.i18n.Tr "auth.has_unconfirmed_mail" (.SignedUser.Name|Escape) (.SignedUser.Email|Escape) | Str2html}}</p>
 							<div class="ui divider"></div>
 							<div class="text right">
-								<button class="ui blue button">{{.i18n.Tr "auth.resend_mail"}}</button>
+								<button class="ui primary button">{{.i18n.Tr "auth.resend_mail"}}</button>
 							</div>
 						{{end}}
 					{{end}}
--- a/templates/user/auth/forgot_passwd.tmpl
+++ b/templates/user/auth/forgot_passwd.tmpl
@ -19,7 +19,7 @@
 						<div class="ui divider"></div>
 						<div class="inline field">
 							<label></label>
-							<button class="ui blue button">{{.i18n.Tr "auth.send_reset_mail"}}</button>
+							<button class="ui primary button">{{.i18n.Tr "auth.send_reset_mail"}}</button>
 						</div>
 					{{else if .IsResetDisable}}
 						<p class="center">
--- a/templates/user/auth/reset_passwd.tmpl
+++ b/templates/user/auth/reset_passwd.tmpl
@ -51,7 +51,7 @@
 						<div class="ui divider"></div>
 						<div class="inline field">
 							<label></label>
-							<button class="ui blue button">{{.i18n.Tr "auth.reset_password_helper"}}</button>
+							<button class="ui primary button">{{.i18n.Tr "auth.reset_password_helper"}}</button>
 							{{if and .has_two_factor (not .scratch_code)}}
 								<a href="{{.Link}}?code={{.Code}}&amp;scratch_code=true">{{.i18n.Tr "auth.use_scratch_code" | Str2html}}</a>
 							{{end}}
--- a/templates/user/dashboard/issues.tmpl
+++ b/templates/user/dashboard/issues.tmpl
@ -5,36 +5,36 @@
 		<div class="ui stackable grid">
 			<div class="four wide column">
 				<div class="ui secondary vertical filter menu">
-					<a class="{{if eq .ViewType "your_repositories"}}ui basic blue button{{end}} item" href="{{.Link}}?type=your_repositories&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}">
+					<a class="{{if eq .ViewType "your_repositories"}}ui basic primary button{{end}} item" href="{{.Link}}?type=your_repositories&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}">
 						{{.i18n.Tr "home.issues.in_your_repos"}}
 						<strong class="ui right">{{CountFmt .IssueStats.YourRepositoriesCount}}</strong>
 					</a>
-					<a class="{{if eq .ViewType "assigned"}}ui basic blue button{{end}} item" href="{{.Link}}?type=assigned&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}">
+					<a class="{{if eq .ViewType "assigned"}}ui basic primary button{{end}} item" href="{{.Link}}?type=assigned&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}">
 						{{.i18n.Tr "repo.issues.filter_type.assigned_to_you"}}
 						<strong class="ui right">{{CountFmt .IssueStats.AssignCount}}</strong>
 					</a>
-					<a class="{{if eq .ViewType "created_by"}}ui basic blue button{{end}} item" href="{{.Link}}?type=created_by&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}">
+					<a class="{{if eq .ViewType "created_by"}}ui basic primary button{{end}} item" href="{{.Link}}?type=created_by&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}">
 						{{.i18n.Tr "repo.issues.filter_type.created_by_you"}}
 						<strong class="ui right">{{CountFmt .IssueStats.CreateCount}}</strong>
 					</a>
-					<a class="{{if eq .ViewType "mentioned"}}ui basic blue button{{end}} item" href="{{.Link}}?type=mentioned&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}">
+					<a class="{{if eq .ViewType "mentioned"}}ui basic primary button{{end}} item" href="{{.Link}}?type=mentioned&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}">
 						{{.i18n.Tr "repo.issues.filter_type.mentioning_you"}}
 						<strong class="ui right">{{CountFmt .IssueStats.MentionCount}}</strong>
 					</a>
 					{{if .PageIsPulls}}
-						<a class="{{if eq .ViewType "review_requested"}}ui basic blue button{{end}} item" href="{{.Link}}?type=review_requested&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}">
+						<a class="{{if eq .ViewType "review_requested"}}ui basic primary button{{end}} item" href="{{.Link}}?type=review_requested&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}">
 							{{.i18n.Tr "repo.issues.filter_type.review_requested"}}
 							<strong class="ui right">{{CountFmt .IssueStats.ReviewRequestedCount}}</strong>
 						</a>
 					{{end}}
 					<div class="ui divider"></div>
-					<a class="{{if not $.RepoIDs}}ui basic blue button{{end}} repo name item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&q={{$.Keyword}}">
+					<a class="{{if not $.RepoIDs}}ui basic primary button{{end}} repo name item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&q={{$.Keyword}}">
 						<span class="text truncate">All</span>
 						<div class="ui {{if $.IsShowClosed}}red{{else}}green{{end}} label">{{CountFmt .TotalIssueCount}}</div>
 					</a>
 					{{range .Repos}}
 						{{with $Repo := .}}
-							<a class="{{range $.RepoIDs}}{{if eq . $Repo.ID}}ui basic blue button{{end}}{{end}} repo name item" href="{{$.Link}}?type={{$.ViewType}}&repos=[
+							<a class="{{range $.RepoIDs}}{{if eq . $Repo.ID}}ui basic primary button{{end}}{{end}} repo name item" href="{{$.Link}}?type={{$.ViewType}}&repos=[
 									{{- with $include := true -}}
 										{{- range $.RepoIDs -}}
 											{{- if eq . $Repo.ID -}}
@ -77,7 +77,7 @@
 								<input type="hidden" name="sort" value="{{$.SortType}}"/>
 								<input type="hidden" name="state" value="{{$.State}}"/>
 								<input name="q" value="{{$.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}...">
-								<button class="ui blue button" type="submit">{{.i18n.Tr "explore.search"}}</button>
+								<button class="ui primary button" type="submit">{{.i18n.Tr "explore.search"}}</button>
 							</div>
 						</form>
 					</div>
--- a/templates/user/dashboard/milestones.tmpl
+++ b/templates/user/dashboard/milestones.tmpl
@ -12,7 +12,7 @@
 					<div class="ui divider"></div>
 					{{range .Repos}}
 						{{with $Repo := .}}
-							<a class="{{range $.RepoIDs}}{{if eq . $Repo.ID}}ui basic blue button{{end}}{{end}} repo name item" href="{{$.Link}}?repos=[
+							<a class="{{range $.RepoIDs}}{{if eq . $Repo.ID}}ui basic primary button{{end}}{{end}} repo name item" href="{{$.Link}}?repos=[
 								{{- with $include := true -}}
 										{{- range $.RepoIDs -}}
 											{{- if eq . $Repo.ID -}}
@ -55,7 +55,7 @@
 								<input type="hidden" name="sort" value="{{$.SortType}}"/>
 								<input type="hidden" name="state" value="{{$.State}}"/>
 								<input name="q" value="{{$.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}...">
-								<button class="ui blue button" type="submit">{{.i18n.Tr "explore.search"}}</button>
+								<button class="ui primary button" type="submit">{{.i18n.Tr "explore.search"}}</button>
 							</div>
 						</form>
 					</div>
--- a/templates/user/dashboard/navbar.tmpl
+++ b/templates/user/dashboard/navbar.tmpl
@ -95,7 +95,7 @@
 			</a>
 			{{end}}
 			<div class="item">
-				<a class="ui blue basic button" href="{{.ContextUser.HomeLink}}" title='{{.i18n.Tr "home.view_home" .ContextUser.Name}}'>
+				<a class="ui primary basic button" href="{{.ContextUser.HomeLink}}" title='{{.i18n.Tr "home.view_home" .ContextUser.Name}}'>
 					{{.i18n.Tr "home.view_home" (.ContextUser.ShortName 40)}}
 				</a>
 			</div>
--- a/templates/user/settings/account.tmpl
+++ b/templates/user/settings/account.tmpl
@ -83,7 +83,7 @@
 										{{$.CsrfTokenHtml}}
 										<input name="_method" type="hidden" value="PRIMARY">
 										<input name="id" type="hidden" value="{{.ID}}">
-										<button class="ui blue tiny button">{{$.i18n.Tr "settings.primary_email"}}</button>
+										<button class="ui primary tiny button">{{$.i18n.Tr "settings.primary_email"}}</button>
 									</form>
 								</div>
 							{{end}}
@ -95,9 +95,9 @@
 									<input name="_method" type="hidden" value="SENDACTIVATION">
 									<input name="id" type="hidden" value="{{.ID}}">
 									{{if $.ActivationsPending}}
-										<button disabled class="ui blue tiny button">{{$.i18n.Tr "settings.activations_pending"}}</button>
+										<button disabled class="ui primary tiny button">{{$.i18n.Tr "settings.activations_pending"}}</button>
 									{{else}}
-										<button class="ui blue tiny button">{{$.i18n.Tr "settings.activate_email"}}</button>
+										<button class="ui primary tiny button">{{$.i18n.Tr "settings.activate_email"}}</button>
 									{{end}}
 								</form>
 							</div>
@ -105,7 +105,7 @@
 						<div class="content">
 							<strong>{{.Email}}</strong>
 							{{if .IsPrimary}}
-								<div class="ui blue label">{{$.i18n.Tr "settings.primary"}}</div>
+								<div class="ui primary label">{{$.i18n.Tr "settings.primary"}}</div>
 							{{end}}
 							{{if .IsActivated}}
 								<div class="ui green label">{{$.i18n.Tr "settings.activated"}}</div>
--- a/templates/user/settings/keys_gpg.tmpl
+++ b/templates/user/settings/keys_gpg.tmpl
@ -1,7 +1,7 @@
 <h4 class="ui top attached header">
 	{{.i18n.Tr "settings.manage_gpg_keys"}}
 	<div class="ui right">
-		<div class="ui blue tiny show-panel button" data-panel="#add-gpg-key-panel">{{.i18n.Tr "settings.add_key"}}</div>
+		<div class="ui primary tiny show-panel button" data-panel="#add-gpg-key-panel">{{.i18n.Tr "settings.add_key"}}</div>
 	</div>
 </h4>
 <div class="ui attached segment">
@ -50,7 +50,7 @@
 						{{$.i18n.Tr "settings.delete_key"}}
 					</button>
 					{{if and (not .Verified) (ne $.VerifyingID .KeyID)}}
-						<a class="ui blue tiny show-panel button" href="{{$.Link}}?verify_gpg={{.KeyID}}">{{$.i18n.Tr "settings.gpg_key_verify"}}</a>
+						<a class="ui primary tiny show-panel button" href="{{$.Link}}?verify_gpg={{.KeyID}}">{{$.i18n.Tr "settings.gpg_key_verify"}}</a>
 					{{end}}
 				</div>
 				<div class="left floated content">
--- a/templates/user/settings/keys_principal.tmpl
+++ b/templates/user/settings/keys_principal.tmpl
@ -3,9 +3,9 @@
 		{{.i18n.Tr "settings.manage_ssh_principals"}}
 		<div class="ui right">
 		{{if not .DisableSSH}}
-			<div class="ui blue tiny show-panel button" data-panel="#add-ssh-principal-panel">{{.i18n.Tr "settings.add_new_principal"}}</div>
+			<div class="ui primary tiny show-panel button" data-panel="#add-ssh-principal-panel">{{.i18n.Tr "settings.add_new_principal"}}</div>
 		{{else}}
-			<div class="ui blue tiny button disabled">{{.i18n.Tr "settings.ssh_disabled"}}</div>
+			<div class="ui primary tiny button disabled">{{.i18n.Tr "settings.ssh_disabled"}}</div>
 		{{end}}
 		</div>
 	</h4>
--- a/templates/user/settings/keys_ssh.tmpl
+++ b/templates/user/settings/keys_ssh.tmpl
@ -2,11 +2,11 @@
 	{{.i18n.Tr "settings.manage_ssh_keys"}}
 	<div class="ui right">
 		{{if not .DisableSSH }}
-			<div id="add-ssh-button" class="ui blue tiny show-panel button" data-panel="#add-ssh-key-panel">
+			<div id="add-ssh-button" class="ui primary tiny show-panel button" data-panel="#add-ssh-key-panel">
 				{{.i18n.Tr "settings.add_key"}}
 			</div>
 		{{else}}
-			<div class="ui blue tiny button disabled">{{.i18n.Tr "settings.ssh_disabled"}}</div>
+			<div class="ui primary tiny button disabled">{{.i18n.Tr "settings.ssh_disabled"}}</div>
 		{{end}}
 	</div>
 </h4>
@ -42,7 +42,7 @@
 						{{$.i18n.Tr "settings.delete_key"}}
 					</button>
 					{{if and (not .Verified) (ne $.VerifyingFingerprint .Fingerprint)}}
-						<a class="ui blue tiny show-panel button" href="{{$.Link}}?verify_ssh={{.Fingerprint}}">{{$.i18n.Tr "settings.ssh_key_verify"}}</a>
+						<a class="ui primary tiny show-panel button" href="{{$.Link}}?verify_ssh={{.Fingerprint}}">{{$.i18n.Tr "settings.ssh_key_verify"}}</a>
 					{{end}}

 				</div>
--- a/templates/user/settings/organization.tmpl
+++ b/templates/user/settings/organization.tmpl
@ -7,7 +7,7 @@
 			{{.i18n.Tr "settings.orgs"}}
 			{{if .SignedUser.CanCreateOrganization}}
 			<div class="ui right">
-				<a class="ui blue tiny button" href="{{AppSubUrl}}/org/create">{{.i18n.Tr "admin.orgs.new_orga"}}</a>
+				<a class="ui primary tiny button" href="{{AppSubUrl}}/org/create">{{.i18n.Tr "admin.orgs.new_orga"}}</a>
 			</div>
 			{{end}}
 		</h4>
@ -19,7 +19,7 @@
 						<div class="right floated content">
 							<form method="post" action="{{.OrganisationLink}}/members/action/leave">
 								{{$.CsrfTokenHtml}}
-								<button type="submit" class="ui blue small button" name="uid" value="{{.ID}}">{{$.i18n.Tr "org.members.leave"}}</button>
+								<button type="submit" class="ui primary small button" name="uid" value="{{.ID}}">{{$.i18n.Tr "org.members.leave"}}</button>
 							</form>
 						</div>
 						{{avatar . 28 "mini"}}
--- a/templates/user/settings/security/twofa.tmpl
+++ b/templates/user/settings/security/twofa.tmpl
@ -8,7 +8,7 @@
 	<form class="ui form" action="{{AppSubUrl}}/user/settings/security/two_factor/regenerate_scratch" method="post" enctype="multipart/form-data">
 		{{.CsrfTokenHtml}}
 		<p>{{.i18n.Tr "settings.regenerate_scratch_token_desc"}}</p>
-		<button class="ui blue button">{{$.i18n.Tr "settings.twofa_scratch_token_regenerate"}}</button>
+		<button class="ui primary button">{{$.i18n.Tr "settings.twofa_scratch_token_regenerate"}}</button>
 	</form>
 	<form class="ui form" action="{{AppSubUrl}}/user/settings/security/two_factor/disable" method="post" enctype="multipart/form-data" id="disable-form">
 		{{.CsrfTokenHtml}}
--- a/web_src/js/features/comp/ReactionSelector.js
+++ b/web_src/js/features/comp/ReactionSelector.js
@ -16,7 +16,7 @@ export function initCompReactionSelector(parent) {
    if ($(this).hasClass('disabled')) return;

    const actionURL = $(this).hasClass('item') ? $(this).closest('.select-reaction').data('action-url') : $(this).data('action-url');
-    const url = `${actionURL}/${$(this).hasClass('blue') ? 'unreact' : 'react'}`;
+    const url = `${actionURL}/${$(this).hasClass('primary') ? 'unreact' : 'react'}`;
    $.ajax({
      type: 'POST',
      url,
--- a/web_src/js/features/repo-home.js
+++ b/web_src/js/features/repo-home.js
@ -84,8 +84,6 @@ export function initRepoTopicBar() {
      transition: 'horizontal flip',
      duration: 200,
      variation: false,
-      blue: true,
-      basic: true,
    },
    className: {
      label: 'ui small label'
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@ -71,8 +71,23 @@
  --color-pink: #e03997;
  --color-brown: #a5673f;
  --color-grey: #888888;
-  --color-black: #1b1c1d;
  --color-gold: #a1882b;
+  /* light variants - produced via Sass scale-color(color, $lightness: +25%) */
+  --color-red-light: #e45e5e;
+  --color-orange-light: #f59555;
+  --color-yellow-light: #fcce46;
+  --color-olive-light: #d3e942;
+  --color-green-light: #46de6a;
+  --color-teal-light: #08fff4;
+  --color-blue-light: #51a5e3;
+  --color-violet-light: #8b67d7;
+  --color-purple-light: #bb64d8;
+  --color-pink-light: #e86bb1;
+  --color-brown-light: #c58b66;
+  --color-grey-light: #a6a6a6;
+  --color-gold-light: #cfb34a;
+  /* other colors */
+  --color-black: #1b1c1d;
  --color-white: #ffffff;
  --color-diff-removed-word-bg: #fdb8c0;
  --color-diff-added-word-bg: #acf2bd;
@ -887,19 +902,19 @@ a.ui.card:hover,
        color: inherit !important;

        &:hover {
-          color: #e67777 !important;
+          color: var(--color-red-light) !important;
        }
      }
    }

    &.blue {
-      color: var(--color-primary) !important;
+      color: var(--color-blue) !important;

      a {
        color: inherit !important;

        &:hover {
-          color: var(--color-primary-dark-1) !important;
+          color: var(--color-blue-light) !important;
        }
      }
    }
@ -1078,11 +1093,11 @@ a.ui.card:hover,
    }

    &.blue {
-      background-color: var(--color-primary) !important;
+      background-color: var(--color-blue) !important;
    }

    &.black {
-      background-color: #444444;
+      background-color: var(--color-black) !important;
    }

    &.grey {
@ -1133,11 +1148,11 @@ a.ui.card:hover,
    }

    &.blue {
-      border-color: var(--color-primary) !important;
+      border-color: var(--color-blue) !important;
    }

    &.black {
-      border-color: #444444;
+      border-color: var(--color-black) !important;
    }

    &.grey {
@ -1748,59 +1763,55 @@ a.ui.label:hover {
  background: var(--color-hover);
 }

-.ui.blue.button,
-.ui.blue.buttons .button,
 .ui.primary.button,
 .ui.primary.buttons .button {
  background-color: var(--color-primary) !important;
 }

-.ui.blue.button:hover,
-.ui.blue.buttons .button:hover,
 .ui.primary.button:hover,
 .ui.primary.buttons .button:hover {
  background-color: var(--color-primary-dark-2) !important;
 }

-.ui.blue.button:focus,
-.ui.blue.buttons .button:focus,
 .ui.primary.button:focus,
 .ui.primary.buttons .button:focus {
  background-color: var(--color-primary-dark-3) !important;
 }

-.ui.basic.blue.button,
-.ui.basic.blue.buttons .button,
 .ui.basic.primary.button,
 .ui.basic.primary.buttons .button {
  box-shadow: inset 0 0 0 1px var(--color-primary) !important;
  color: #fff !important;
 }

-.ui.basic.blue.button:hover,
-.ui.basic.blue.buttons .button:hover,
 .ui.basic.primary.button:hover,
 .ui.basic.primary.buttons .button:hover {
  box-shadow: inset 0 0 0 1px var(--color-primary-dark-2) !important;
 }

-.ui.basic.blue.button:focus,
-.ui.basic.blue.buttons .button:focus,
 .ui.basic.primary.button:focus,
 .ui.basic.primary.buttons .button:focus {
  box-shadow: inset 0 0 0 1px var(--color-primary-dark-3) !important;
 }

-.ui.blue.label,
-.ui.blue.labels .label,
+.ui.basic.secondary.buttons .button,
+.ui.basic.secondary.button {
+  color: var(--color-secondary-dark-6) !important;
+}
+
+.ui.basic.secondary.buttons .button:hover,
+.ui.basic.secondary.button:hover,
+.ui.basic.secondary.buttons .button:active,
+.ui.basic.secondary.button:active {
+  color: var(--color-secondary-dark-8) !important;
+}
+
 .ui.primary.label,
 .ui.primary.labels .label {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary-dark-2) !important;
 }

-.ui.basic.labels .blue.label,
-.ui.ui.ui.basic.blue.label,
 .ui.basic.labels .primary.label,
 .ui.ui.ui.basic.primary.label {
  background: transparent !important;
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@ -301,7 +301,7 @@
        font-weight: normal;
      }

-      .ui.tiny.blue.buttons {
+      .ui.tiny.primary.buttons {
        @media @mediaSm {
          width: 100%;
        }
@ -1168,7 +1168,7 @@
            border-color: var(--color-secondary-dark-1) !important;
          }

-          .ui.label.basic.blue {
+          .ui.label.basic.primary {
            background-color: var(--color-reaction-active-bg) !important;
            border-color: var(--color-primary-alpha-80) !important;
          }
@ -2411,7 +2411,7 @@
      color: var(--color-primary) !important;
    }

-    .ui.label.basic.blue {
+    .ui.label.basic.primary {
      background-color: var(--color-reaction-active-bg) !important;
      border-color: var(--color-secondary) !important;
    }