From 3dd2346502163554fd3d77ae99850ae9b7350e05 Mon Sep 17 00:00:00 2001
From: whereareiam <mmm.g032@gmail.com>
Date: Sat, 3 Oct 2026 13:30:51 +0200
Subject: [PATCH] Controls: Share the counter, switch, empty state and label

Four small display pieces were written once per page: count pills on
profile tabs, release assets, the diff filter and issue state tabs; the
Releases/Tags switch on both of its pages; the bordered empty state on
profile and release pages; and a hand-built outline label for package
types beside Forgejo's native one.

They move to components/common as theme-counter, theme-switch and
theme-empty, and the package type uses the native ui basic label. The
copies had drifted, so the shared versions take GitHub's values: the
counter is 20px tall at weight 500 on the muted label background, and
the switch is weight 500 on both pages. Organization empty-state
overrides that a later profile rule always overrode are removed, along
with the unused org-empty rules.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CONTRIBUTING.md                            | 15 ++++-
 components/common/counter/counter.css      | 13 +++++
 components/common/counter/counter.test.ts  | 29 ++++++++++
 components/common/empty/empty.css          | 40 +++++++++++++
 components/common/switch/switch.css        | 32 +++++++++++
 public/assets/js/diff-file-tree.js         |  2 +-
 public/assets/js/issue-list.js             |  2 +-
 styles/components/diff_controls.ts         |  4 --
 styles/components/issues/issue_overview.ts |  7 ---
 styles/components/repo/release.ts          | 66 ----------------------
 styles/pages/organization.css              | 17 +-----
 styles/pages/profile-subpages.css          | 49 ----------------
 styles/pages/user-profile.css              | 10 ----
 templates/base/component_assets.tmpl       |  3 +
 templates/org/menu.tmpl                    | 10 ++--
 templates/repo/release/list.tmpl           |  6 +-
 templates/repo/tag/list.tmpl               |  2 +-
 templates/user/overview/header.tmpl        |  8 +--
 templates/user/profile.tmpl                |  2 +-
 templates/user/profile_empty.tmpl          |  2 +-
 templates/user/profile_packages.tmpl       |  4 +-
 21 files changed, 149 insertions(+), 174 deletions(-)
 create mode 100644 components/common/counter/counter.css
 create mode 100644 components/common/counter/counter.test.ts
 create mode 100644 components/common/empty/empty.css
 create mode 100644 components/common/switch/switch.css

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 296a4014..402f499b 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -204,9 +204,9 @@ For complex logic, it is recommended to extract it into functions under the `src
 
 ### Reuse shared page controls
 
-Use `components/common/*/*.css` for sidebars, search fields, selects, and compact buttons, and
-`components/common/dropdown/*` for dropdown variants. `templates/base/head_navbar.tmpl` loads the shared styles and
-controllers for all pages. Keep page layout rules in the page stylesheet and pass the page's existing routes,
+Use `components/common/*/*.css` for sidebars, search fields, selects, counters, switches, empty states, and compact
+buttons, and `components/common/dropdown/*` for dropdown variants. `templates/base/head_navbar.tmpl` loads the shared
+styles and controllers for all pages. Keep page layout rules in the page stylesheet and pass the page's existing routes,
 permissions, and form values into the shared controls.
 
 - **Sidebar:** add `theme-sidebar-layout` and a unique `data-theme-sidebar` storage key to the page, then use
@@ -234,6 +234,15 @@ permissions, and form values into the shared controls.
   a page stylesheet, with `theme-control-wide` for the 16px padding GitHub uses on profile pages or
   `theme-control-small` for 28px controls. Use `theme-icon-button` only for icon-only controls. Keep native `primary`,
   `secondary`, and permission checks on actions, and leave page stylesheets to layout such as `flex` and `order`.
+- **Counter:** add `theme-counter` to a count pill next to a tab, heading, or filter, including ones a script creates.
+  Keep only layout (`margin`, `flex`) under the page's own class.
+- **Segmented switch:** use `<nav class="theme-switch">` with links and `active` on the current one, as on the releases
+  and tags pages.
+- **Empty state:** use `theme-empty` for a bordered "nothing here" box holding an icon, an `h2` or `h3`, and an optional
+  paragraph. `templates/user/profile_empty.tmpl` renders one from `Icon`, `Title`, and `Description`. Short inline
+  messages inside a list or menu stay plain text.
+- **Label:** use Forgejo's native `ui basic label` for outline labels such as visibility or package type; do not build a
+  page-specific pill.
 - **Select:** wrap a native `<select class="theme-select">` in `<span class="theme-select-wrap">`. The options stay in
   the page template. See `templates/user/profile_packages.tmpl`.
 
diff --git a/components/common/counter/counter.css b/components/common/counter/counter.css
new file mode 100644
index 00000000..81fa8321
--- /dev/null
+++ b/components/common/counter/counter.css
@@ -0,0 +1,13 @@
+.theme-counter {
+  display: inline-block;
+  min-width: 20px;
+  padding: 0 6px;
+  border: 1px solid transparent;
+  border-radius: 2em;
+  background: var(--color-label-bg);
+  color: var(--color-label-text);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  text-align: center;
+}
diff --git a/components/common/counter/counter.test.ts b/components/common/counter/counter.test.ts
new file mode 100644
index 00000000..7d846149
--- /dev/null
+++ b/components/common/counter/counter.test.ts
@@ -0,0 +1,29 @@
+import { readFileSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { expect, it } from "vitest";
+
+const root = fileURLToPath(new URL("../../..", import.meta.url));
+const read = (file: string) => readFileSync(join(root, file), "utf8");
+const files = (directory: string, extension: string) =>
+  readdirSync(join(root, directory), { recursive: true })
+    .map(file => `${directory}/${String(file)}`)
+    .filter(file => file.endsWith(extension));
+
+it("renders every count pill through the shared counter", () => {
+  const pills = ["profile-nav-count", "github-release-asset-count", "diff-filter-count", "issue-state-count"];
+  const sources = [...files("templates", ".tmpl"), ...files("public/assets/js", ".js")].map(read).join("\n");
+  for (const pill of pills) {
+    const uses = sources.match(new RegExp(`"[^"]*\\b${pill}\\b[^"]*"`, "g")) ?? [];
+    expect(uses.length, `no use of ${pill}`).toBeGreaterThan(0);
+    for (const use of uses) expect(use).toContain("theme-counter");
+  }
+});
+
+it("keeps one segmented switch and one boxed empty state", () => {
+  const templates = files("templates", ".tmpl").map(read).join("\n");
+  expect(templates).not.toMatch(/github-(release|tags)-switch/);
+  expect(templates.match(/class="theme-switch"/g)).toHaveLength(2);
+  for (const box of templates.match(/class="[^"]*\b(profile-empty|github-release-empty)\b[^"]*"/g) ?? [])
+    expect(box).toContain("theme-empty");
+});
diff --git a/components/common/empty/empty.css b/components/common/empty/empty.css
new file mode 100644
index 00000000..f8179521
--- /dev/null
+++ b/components/common/empty/empty.css
@@ -0,0 +1,40 @@
+.theme-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  min-height: 220px;
+  padding: 40px 24px;
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+.theme-empty > .svg {
+  color: var(--color-text-light-1);
+}
+
+.theme-empty h2,
+.theme-empty h3 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.theme-empty p {
+  max-width: 520px;
+  margin: 0;
+  color: var(--color-text-light-1);
+  font-size: 14px;
+  line-height: 21px;
+}
+
+@media (max-width: 767px) {
+  .theme-empty {
+    min-height: 180px;
+    padding: 32px 16px;
+  }
+}
diff --git a/components/common/switch/switch.css b/components/common/switch/switch.css
new file mode 100644
index 00000000..f1f77925
--- /dev/null
+++ b/components/common/switch/switch.css
@@ -0,0 +1,32 @@
+.theme-switch {
+  display: flex;
+}
+
+.theme-switch > a {
+  padding: 5px 16px;
+  border: 1px solid var(--color-light-border);
+  color: var(--color-text);
+  font-weight: 500;
+  line-height: 20px;
+  text-decoration: none;
+}
+
+.theme-switch > a:first-child {
+  border-radius: var(--border-radius) 0 0 var(--border-radius);
+}
+
+.theme-switch > a:last-child {
+  margin-left: -1px;
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+
+.theme-switch > a:only-child {
+  margin-left: 0;
+  border-radius: var(--border-radius);
+}
+
+.theme-switch > a.active {
+  border-color: var(--github-bgColor-accent-emphasis);
+  background: var(--github-bgColor-accent-emphasis);
+  color: var(--github-button-primary-fgColor-rest);
+}
diff --git a/public/assets/js/diff-file-tree.js b/public/assets/js/diff-file-tree.js
index 0b11bb88..8c00eed7 100644
--- a/public/assets/js/diff-file-tree.js
+++ b/public/assets/js/diff-file-tree.js
@@ -71,7 +71,7 @@
         checkbox.value = ext;
         checkbox.checked = !excludedExtensions.has(ext);
         const badge = document.createElement("span");
-        badge.className = "diff-filter-count";
+        badge.className = "theme-counter diff-filter-count";
         badge.textContent = count;
         label.append(checkbox, document.createTextNode(ext), badge);
         options.append(label);
diff --git a/public/assets/js/issue-list.js b/public/assets/js/issue-list.js
index b6ea56bc..637909ab 100644
--- a/public/assets/js/issue-list.js
+++ b/public/assets/js/issue-list.js
@@ -69,7 +69,7 @@
       if (!match) continue;
       text.textContent = match[2];
       const badge = document.createElement("span");
-      badge.className = "issue-state-count";
+      badge.className = "theme-counter issue-state-count";
       badge.textContent = match[1].trim();
       anchor.append(badge);
     }
diff --git a/styles/components/diff_controls.ts b/styles/components/diff_controls.ts
index 76cca343..8aa51d84 100644
--- a/styles/components/diff_controls.ts
+++ b/styles/components/diff_controls.ts
@@ -123,10 +123,6 @@ export default css`
   }
   .diff-filter-count {
     margin-left: auto;
-    border-radius: 20px;
-    background: ${themeVars.color.hover.self};
-    padding: 0 6px;
-    font-size: 12px;
   }
   .diff-tree-options .theme-menu-popover {
     min-width: 192px;
diff --git a/styles/components/issues/issue_overview.ts b/styles/components/issues/issue_overview.ts
index 6482485f..73a09168 100644
--- a/styles/components/issues/issue_overview.ts
+++ b/styles/components/issues/issue_overview.ts
@@ -81,13 +81,6 @@ export default css`
       & .list-header-author {
         order: -1;
       }
-      & .issue-state-count {
-        border-radius: 20px;
-        padding: 0 6px;
-        background: ${themeVars.color.hover.self};
-        font-size: 12px;
-        line-height: 18px;
-      }
       &-right > .ui.menu {
         gap: 4px;
       }
diff --git a/styles/components/repo/release.ts b/styles/components/repo/release.ts
index fdf1f841..cf3a3c5b 100644
--- a/styles/components/repo/release.ts
+++ b/styles/components/repo/release.ts
@@ -191,32 +191,6 @@ const githubReleasePage = css`
     margin: 0 0 32px;
     padding: 24px 0;
   }
-  .github-release-switch {
-    display: flex;
-    gap: 0;
-  }
-  .github-release-switch a {
-    border: 1px solid ${themeVars.color.light.border};
-    color: ${themeVars.color.text.self};
-    padding: 7px 16px;
-    text-decoration: none;
-  }
-  .github-release-switch a:first-child {
-    border-radius: 6px 0 0 6px;
-  }
-  .github-release-switch a:last-child {
-    border-radius: 0 6px 6px 0;
-    margin-left: -1px;
-  }
-  .github-release-switch a:only-child {
-    border-radius: 6px;
-    margin-left: 0;
-  }
-  .github-release-switch a.active {
-    background: ${themeVars.github.bgColor.accent.emphasis};
-    border-color: ${themeVars.github.bgColor.accent.emphasis};
-    color: ${themeVars.github.button.primary.fgColor.rest};
-  }
   .github-release-actions {
     align-items: center;
     display: flex;
@@ -500,11 +474,6 @@ const releaseRefinements = css`
     .github-release-toolbar {
       margin-bottom: 48px;
     }
-    .github-release-switch a {
-      padding: 5px 16px;
-      font-weight: 500;
-      line-height: 20px;
-    }
     .github-release-search {
       width: 248px;
       flex: 0 0 248px;
@@ -644,12 +613,6 @@ const releaseRefinements = css`
         margin-top: 0;
       }
       .github-release-asset-count {
-        display: inline-block;
-        border-radius: 24px;
-        background: var(--color-hover);
-        font-size: 12px;
-        line-height: 20px;
-        padding: 0 6px;
         vertical-align: middle;
         margin-left: 4px;
       }
@@ -690,10 +653,7 @@ const releaseRefinements = css`
       }
     }
     .github-release-empty {
-      text-align: center;
       padding: 64px 24px;
-      border: 1px solid var(--color-light-border);
-      border-radius: 6px;
     }
     @media (max-width: 767.98px) {
       > .ui.container {
@@ -820,32 +780,6 @@ const githubTagPage = css`
     margin-bottom: 16px;
     padding: 24px 0;
   }
-  .github-tags-switch {
-    display: flex;
-  }
-  .github-tags-switch a {
-    border: 1px solid var(--color-light-border);
-    color: var(--color-text);
-    line-height: 20px;
-    padding: 5px 16px;
-    text-decoration: none;
-  }
-  .github-tags-switch a:first-child {
-    border-radius: 6px 0 0 6px;
-  }
-  .github-tags-switch a:last-child {
-    border-radius: 0 6px 6px 0;
-    margin-left: -1px;
-  }
-  .github-tags-switch a:only-child {
-    border-radius: 6px;
-    margin-left: 0;
-  }
-  .github-tags-switch a.active {
-    background: var(--github-bgColor-accent-emphasis);
-    border-color: var(--github-bgColor-accent-emphasis);
-    color: var(--github-button-primary-fgColor-rest);
-  }
   .github-tags-search {
     width: 248px;
   }
diff --git a/styles/pages/organization.css b/styles/pages/organization.css
index 4c313e6b..dafcb60c 100644
--- a/styles/pages/organization.css
+++ b/styles/pages/organization.css
@@ -108,8 +108,6 @@ body:has(.organization-global-header) .page-content:is(.organization, .packages)
   padding: 5px 8px;
 }
 
-.github-org .profile-empty,
-.organization .org-empty,
 .organization .org-package-list > .empty {
   display: flex;
   flex-direction: column;
@@ -123,21 +121,8 @@ body:has(.organization-global-header) .page-content:is(.organization, .packages)
   text-align: center;
 }
 
-.github-org .profile-empty {
-  border: 0;
-}
-
-.github-org .profile-empty h2,
-.organization .org-empty h2 {
-  margin: 0;
-  font-size: 20px;
-}
-
-.organization .org-empty p,
-.github-org .profile-empty > .svg,
-.organization .org-empty > .svg {
+.github-org .profile-empty > .svg {
   margin: 0;
-  color: var(--color-text-light-1);
 }
 
 .github-org .org-overview-sidebar > .ui.header {
diff --git a/styles/pages/profile-subpages.css b/styles/pages/profile-subpages.css
index 92f25739..24ff0952 100644
--- a/styles/pages/profile-subpages.css
+++ b/styles/pages/profile-subpages.css
@@ -7,40 +7,6 @@
   line-height: 28px;
 }
 
-:is(.github-profile, .github-org) .profile-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  min-height: 220px;
-  padding: 40px 24px;
-  border: 1px solid var(--color-secondary);
-  border-radius: var(--border-radius);
-  text-align: center;
-  overflow-wrap: anywhere;
-}
-
-:is(.github-profile, .github-org) .profile-empty > .svg {
-  color: var(--color-text-light-1);
-}
-
-:is(.github-profile, .github-org) .profile-empty h2,
-:is(.github-profile, .github-org) .profile-empty h3 {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 28px;
-}
-
-:is(.github-profile, .github-org) .profile-empty p {
-  max-width: 520px;
-  margin: 0;
-  color: var(--color-text-light-1);
-  font-size: 14px;
-  line-height: 21px;
-}
-
 :is(.github-profile, .github-org) .profile-activity #visibility-hint {
   margin: 0 0 24px;
   padding: 0;
@@ -348,16 +314,6 @@
   line-height: 24px;
 }
 
-:is(.github-profile, .github-org) .profile-type-label {
-  padding: 0 6px;
-  border: 1px solid var(--color-secondary);
-  border-radius: 2em;
-  color: var(--color-text-light-1);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 18px;
-}
-
 :is(.github-profile, .github-org) .profile-packages .flex-item-body {
   display: block;
   margin-top: 4px;
@@ -472,11 +428,6 @@
     gap: 4px;
   }
 
-  :is(.github-profile, .github-org) .profile-empty {
-    min-height: 180px;
-    padding: 32px 16px;
-  }
-
   :is(.github-profile, .github-org) .profile-search-controls {
     flex-wrap: wrap;
   }
diff --git a/styles/pages/user-profile.css b/styles/pages/user-profile.css
index f22984a0..fc97f1c0 100644
--- a/styles/pages/user-profile.css
+++ b/styles/pages/user-profile.css
@@ -473,17 +473,7 @@
 
 .profile-global-header .profile-nav-count {
   flex: none;
-  min-width: 20px;
   margin: 0;
-  padding: 0 6px;
-  border: 0;
-  border-radius: 2em;
-  background: var(--color-label-bg);
-  color: var(--color-label-text);
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 18px;
-  text-align: center;
 }
 
 @media (max-width: 767px) {
diff --git a/templates/base/component_assets.tmpl b/templates/base/component_assets.tmpl
index 9a9b0dd5..b42b49df 100644
--- a/templates/base/component_assets.tmpl
+++ b/templates/base/component_assets.tmpl
@@ -1,7 +1,10 @@
 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/button/button.css">
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/counter/counter.css">
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/empty/empty.css">
 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/list-heading/list-heading.css">
 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/search/search.css">
 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/select/select.css">
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/switch/switch.css">
 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/sidebar/sidebar.css">
 <script src="{{AssetUrlPrefix}}/js/components/common/sidebar/sidebar.js" defer></script>
 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/dropdown/dropdown.css">
diff --git a/templates/org/menu.tmpl b/templates/org/menu.tmpl
index 6dd5097a..ec0961bd 100644
--- a/templates/org/menu.tmpl
+++ b/templates/org/menu.tmpl
@@ -8,7 +8,7 @@
 		<a class="{{if and .PageIsViewRepositories $repositories}}active {{end}}item" href="{{$.Org.HomeLink}}?tab=repositories"{{if and .PageIsViewRepositories $repositories}} aria-current="page"{{end}}>
 			{{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}}
 			{{if .RepoCount}}
-				<span class="profile-nav-count">{{.RepoCount}}</span>
+				<span class="theme-counter profile-nav-count">{{.RepoCount}}</span>
 			{{end}}
 			<span hidden test-name="repository-count">{{.RepoCount}}</span>
 		</a>
@@ -16,7 +16,7 @@
 		<a class="{{if .PageIsViewProjects}}active {{end}}item" href="{{$.Org.HomeLink}}/-/projects"{{if .PageIsViewProjects}} aria-current="page"{{end}}>
 			{{svg "octicon-project-symlink"}} {{ctx.Locale.Tr "user.projects"}}
 			{{if .ProjectCount}}
-				<span class="profile-nav-count">{{.ProjectCount}}</span>
+				<span class="theme-counter profile-nav-count">{{.ProjectCount}}</span>
 			{{end}}
 			<span hidden test-name="project-count">{{.ProjectCount}}</span>
 		</a>
@@ -25,7 +25,7 @@
 		<a class="{{if .IsPackagesPage}}active {{end}}item" href="{{$.Org.HomeLink}}/-/packages"{{if .IsPackagesPage}} aria-current="page"{{end}}>
 			{{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}}
 			{{if .PackageCount}}
-				<span class="profile-nav-count">{{.PackageCount}}</span>
+				<span class="theme-counter profile-nav-count">{{.PackageCount}}</span>
 			{{end}}
 			<span hidden test-name="package-count">{{.PackageCount}}</span>
 		</a>
@@ -39,7 +39,7 @@
 		<a class="{{if $.PageIsOrgTeams}}active {{end}}item" href="{{$.OrgLink}}/teams"{{if .PageIsOrgTeams}} aria-current="page"{{end}}>
 			{{svg "octicon-people"}} {{ctx.Locale.Tr "org.teams"}}
 			{{if .NumTeams}}
-				<span class="profile-nav-count">{{.NumTeams}}</span>
+				<span class="theme-counter profile-nav-count">{{.NumTeams}}</span>
 			{{end}}
 		</a>
 		{{end}}
@@ -47,7 +47,7 @@
 		{{if .NumMembers}}
 		<a class="{{if $.PageIsOrgMembers}}active {{end}}item" href="{{$.OrgLink}}/members"{{if .PageIsOrgMembers}} aria-current="page"{{end}}>
 			{{svg "octicon-person"}} {{ctx.Locale.Tr "org.members"}}
-			<span class="profile-nav-count">{{.NumMembers}}</span>
+			<span class="theme-counter profile-nav-count">{{.NumMembers}}</span>
 		</a>
 		{{end}}
 		<span hidden test-name="member-count">{{.NumMembers}}</span>
diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index 1c22982d..66415370 100644
--- a/templates/repo/release/list.tmpl
+++ b/templates/repo/release/list.tmpl
@@ -4,7 +4,7 @@
 	<div class="ui container">
 		{{template "base/alert" .}}
 		<div class="github-release-toolbar">
-  <nav class="github-release-switch" aria-label="Releases and Tags">
+  <nav class="theme-switch" aria-label="Releases and Tags">
     <a aria-current="page" class="active" href="{{.RepoLink}}/releases">Releases</a>
     {{if and ($.Permission.CanRead $.UnitTypeCode)}}<a href="{{.RepoLink}}/tags">Tags</a>{{end}}
   </nav>
@@ -96,7 +96,7 @@
 							<div class="github-release-footer">
 							<details class="download" {{if eq $idx 0}}open{{end}}>
 								<summary>
-									Assets <span class="github-release-asset-count">{{if $hasArchiveLinks}}{{Eval (len $release.Attachments) "+" 2}}{{else}}{{len $release.Attachments}}{{end}}</span>
+									Assets <span class="theme-counter github-release-asset-count">{{if $hasArchiveLinks}}{{Eval (len $release.Attachments) "+" 2}}{{else}}{{len $release.Attachments}}{{end}}</span>
 								</summary>
 								<ul class="list">
 									{{range $release.Attachments}}
@@ -148,7 +148,7 @@
 
 </div>
 {{else}}
-<div class="github-release-empty">
+<div class="theme-empty github-release-empty">
 	{{svg "octicon-tag" 32}}
 	<h2>{{if .Keyword}}No releases found{{else}}There aren’t any releases here{{end}}</h2>
 	<p>{{if .Keyword}}Try a different search.{{else}}Releases package software, release notes, and downloads for your project.{{end}}</p>
diff --git a/templates/repo/tag/list.tmpl b/templates/repo/tag/list.tmpl
index 25c25f55..9a555ca8 100644
--- a/templates/repo/tag/list.tmpl
+++ b/templates/repo/tag/list.tmpl
@@ -6,7 +6,7 @@
 		{{$canReadReleases := $.Permission.CanRead $.UnitTypeReleases}}
 		{{$canReadCode := $.Permission.CanRead $.UnitTypeCode}}
 		<div class="github-tags-toolbar">
-			<nav class="github-tags-switch" aria-label="Releases and Tags">
+			<nav class="theme-switch" aria-label="Releases and Tags">
 				{{if $canReadReleases}}<a href="{{.RepoLink}}/releases">Releases</a>{{end}}
 				{{if $canReadCode}}<a class="active" aria-current="page" href="{{.RepoLink}}/tags">Tags</a>{{end}}
 			</nav>
diff --git a/templates/user/overview/header.tmpl b/templates/user/overview/header.tmpl
index e2833ceb..14353694 100644
--- a/templates/user/overview/header.tmpl
+++ b/templates/user/overview/header.tmpl
@@ -10,7 +10,7 @@
 		<a class="{{if eq .TabName "repositories"}}active {{end}} item" href="{{.ContextUser.HomeLink}}?tab=repositories"{{if eq .TabName "repositories"}} aria-current="page"{{end}}>
 			{{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}}
 			{{if .RepoCount}}
-				<span class="profile-nav-count">{{.RepoCount}}</span>
+				<span class="theme-counter profile-nav-count">{{.RepoCount}}</span>
 			{{end}}
 			<span hidden test-name="repository-count">{{.RepoCount}}</span>
 		</a>
@@ -18,7 +18,7 @@
 		<a href="{{.ContextUser.HomeLink}}/-/projects"{{if .PageIsViewProjects}} aria-current="page"{{end}} class="{{if .PageIsViewProjects}}active {{end}}item">
 			{{svg "octicon-project-symlink"}} {{ctx.Locale.Tr "user.projects"}}
 			{{if .ProjectCount}}
-				<span class="profile-nav-count">{{.ProjectCount}}</span>
+				<span class="theme-counter profile-nav-count">{{.ProjectCount}}</span>
 			{{end}}
 			<span hidden test-name="project-count">{{.ProjectCount}}</span>
 		</a>
@@ -27,7 +27,7 @@
 			<a href="{{.ContextUser.HomeLink}}/-/packages"{{if .IsPackagesPage}} aria-current="page"{{end}} class="{{if .IsPackagesPage}}active {{end}}item">
 				{{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}}
 				{{if .PackageCount}}
-					<span class="profile-nav-count">{{.PackageCount}}</span>
+					<span class="theme-counter profile-nav-count">{{.PackageCount}}</span>
 				{{end}}
 				<span hidden test-name="package-count">{{.PackageCount}}</span>
 			</a>
@@ -52,7 +52,7 @@
 			<a class="{{if eq .TabName "stars"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=stars"{{if eq .TabName "stars"}} aria-current="page"{{end}}>
 				{{svg "octicon-star"}} {{ctx.Locale.Tr "user.starred"}}
 				{{if .ContextUser.NumStars}}
-					<span class="profile-nav-count">{{.ContextUser.NumStars}}</span>
+					<span class="theme-counter profile-nav-count">{{.ContextUser.NumStars}}</span>
 				{{end}}
 			</a>
 			{{else}}
diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl
index 06ff84bd..13e85f80 100644
--- a/templates/user/profile.tmpl
+++ b/templates/user/profile.tmpl
@@ -70,7 +70,7 @@
 		{{if .FollowingFeeds}}
 			{{template "user/dashboard/ap_feed" .}}
 		{{else}}
-			<div class="profile-empty">{{template "user/dashboard/ap_feed_guide" .}}</div>
+			<div class="theme-empty profile-empty">{{template "user/dashboard/ap_feed_guide" .}}</div>
 		{{end}}
 	{{end}}
 	</section>
diff --git a/templates/user/profile_empty.tmpl b/templates/user/profile_empty.tmpl
index 877072ff..78b04c9b 100644
--- a/templates/user/profile_empty.tmpl
+++ b/templates/user/profile_empty.tmpl
@@ -1,4 +1,4 @@
-<div class="profile-empty">
+<div class="theme-empty profile-empty">
 	{{svg .Icon 32}}
 	<h3>{{.Title}}</h3>
 	{{if .Description}}<p>{{.Description}}</p>{{end}}
diff --git a/templates/user/profile_packages.tmpl b/templates/user/profile_packages.tmpl
index a82b212c..70000f9c 100644
--- a/templates/user/profile_packages.tmpl
+++ b/templates/user/profile_packages.tmpl
@@ -24,7 +24,7 @@
 			<div class="flex-item-main">
 				<div class="flex-item-title">
 					<a href="{{.VersionWebLink}}">{{.Package.Name}}</a>
-					<span class="profile-type-label">{{.Package.Type.Name}}</span>
+					<span class="ui basic label">{{.Package.Type.Name}}</span>
 				</div>
 				<div class="flex-item-body">
 					<span class="profile-package-version">{{.Version.LowerVersion}}</span>
@@ -44,7 +44,7 @@
 	</div>
 	{{else}}
 		{{if not .HasPackages}}
-			<div class="profile-empty">
+			<div class="theme-empty profile-empty">
 				{{svg "octicon-package" 48}}
 				<h2>{{ctx.Locale.Tr "packages.empty"}}</h2>
 				{{if and .Repository .CanWritePackages}}