Refactor text utility classes to Tailwind CSS (#36703)

Replace Fomantic/custom CSS text utility classes with their Tailwind
equivalents:

- `.text.<color>` compound classes → `tw-text-<color>` classes
- `.text.small` (`font-size: 0.75em`) → `tw-text-xs` (11px)
- `.text.truncate` (`overflow-x: hidden; text-overflow: ellipsis;
white-space: nowrap; display: inline-block`) → `tw-inline-block
tw-truncate`

Remove the now-unused CSS rules from `base.css` and `dashboard.css`.

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

models/issues/review.go

@@ -215,25 +215,25 @@ func (r *Review) LoadAttributes(ctx context.Context) (err error) {
 	return err
 }
 
-// HTMLTypeColorName returns the color used in the ui indicating the review
+// HTMLTypeColorClass returns the CSS class used in the ui indicating the review
-func (r *Review) HTMLTypeColorName() string {
+func (r *Review) HTMLTypeColorClass() string {
 	switch r.Type {
 	case ReviewTypeApprove:
 		if !r.Official {
-			return "grey"
+			return "tw-text-text-light"
 		}
 		if r.Stale {
-			return "yellow"
+			return "tw-text-yellow"
 		}
-		return "green"
+		return "tw-text-green"
 	case ReviewTypeComment:
-		return "grey"
+		return "tw-text-text-light"
 	case ReviewTypeReject:
-		return "red"
+		return "tw-text-red"
 	case ReviewTypeRequest:
-		return "yellow"
+		return "tw-text-yellow"
 	}
-	return "grey"
+	return "tw-text-text-light"
 }
 
 // TooltipContent returns the locale string describing the review type

services/markup/renderhelper_issueicontitle_test.go

@@ -26,7 +26,7 @@ func TestRenderHelperIssueIconTitle(t *testing.T) {
 		IssueIndex: 1,
 	})
 	assert.NoError(t, err)
-	assert.Equal(t, `<a href="/link"><span>octicon-issue-opened(16/text green)</span> issue1 (#1)</a>`, string(htm))
+	assert.Equal(t, `<a href="/link"><span>octicon-issue-opened(16/tw-text-green)</span> issue1 (#1)</a>`, string(htm))
 
 	ctx, _ = contexttest.MockContext(t, "/", contexttest.MockContextOption{Render: templates.PageRenderer()})
 	htm, err = renderRepoIssueIconTitle(ctx, markup.RenderIssueIconTitleOptions{
@@ -36,7 +36,7 @@ func TestRenderHelperIssueIconTitle(t *testing.T) {
 		IssueIndex: 1,
 	})
 	assert.NoError(t, err)
-	assert.Equal(t, `<a href="/link"><span>octicon-issue-opened(16/text green)</span> issue1 (user2/repo1#1)</a>`, string(htm))
+	assert.Equal(t, `<a href="/link"><span>octicon-issue-opened(16/tw-text-green)</span> issue1 (user2/repo1#1)</a>`, string(htm))
 
 	ctx, _ = contexttest.MockContext(t, "/", contexttest.MockContextOption{Render: templates.PageRenderer()})
 	_, err = renderRepoIssueIconTitle(ctx, markup.RenderIssueIconTitleOptions{

templates/admin/org/list.tmpl

@@ -54,7 +54,7 @@
 							<td>
 								<a href="{{.HomeLink}}">{{if and DefaultShowFullName .FullName}}{{.FullName}} ({{.Name}}){{else}}{{.Name}}{{end}}</a>
 								{{if .Visibility.IsPrivate}}
-									<span class="text gold">{{svg "octicon-lock"}}</span>
+									<span class="tw-text-gold">{{svg "octicon-lock"}}</span>
 								{{end}}
 								{{if eq .Type 3}}{{/* Reserved organization */}}
 									<span class="ui mini label">{{ctx.Locale.Tr "admin.users.reserved"}}</span>

templates/admin/packages/list.tmpl

@@ -57,7 +57,7 @@
 							<td>
 								<a href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>
 								{{if .Owner.Visibility.IsPrivate}}
-									<span class="text gold">{{svg "octicon-lock"}}</span>
+									<span class="tw-text-gold">{{svg "octicon-lock"}}</span>
 								{{end}}
 							</td>
 							<td>{{.Package.Type.Name}}</td>
@@ -72,7 +72,7 @@
 							<td>{{FileSize .CalculateBlobSize}}</td>
 							<td>{{DateUtils.AbsoluteShort .Version.CreatedUnix}}</td>
 							<td>
-								<a class="text red show-modal" href data-modal="#admin-package-delete-modal"
+								<a class="tw-text-red show-modal" href data-modal="#admin-package-delete-modal"
 									data-modal-form.action="{{$.Link}}/delete?page={{$.Page.Paginater.Current}}&sort={{$.SortType}}&id={{.Version.ID}}"
 									data-modal-package-name="{{.Package.Name}}" data-modal-package-version="{{.Version.Version}}"
 								>{{svg "octicon-trash"}}</a>

templates/admin/repo/list.tmpl

@@ -49,7 +49,7 @@
 							<td>
 								<a class="tw-break-anywhere" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>
 								{{if .Owner.Visibility.IsPrivate}}
-									<span class="text gold">{{svg "octicon-lock"}}</span>
+									<span class="tw-text-gold">{{svg "octicon-lock"}}</span>
 								{{end}}
 							</td>
 							<td>
@@ -85,7 +85,7 @@
 							<td>{{DateUtils.AbsoluteShort .UpdatedUnix}}</td>
 							<td>{{DateUtils.AbsoluteShort .CreatedUnix}}</td>
 							<td>
-								<a class="text red show-modal" href data-modal="#admin-repo-delete-modal"
+								<a class="tw-text-red show-modal" href data-modal="#admin-repo-delete-modal"
 									data-modal-form.action="{{$.Link}}/delete?page={{$.Page.Paginater.Current}}&sort={{$.SortType}}&id={{.ID}}"
 									data-modal-repo-name="{{.Name}}"
 								>{{svg "octicon-trash"}}</a>

templates/admin/stacktrace-row.tmpl

@@ -20,7 +20,7 @@
 				<a class="link-action" data-url="{{.root.Link}}/cancel/{{.Process.PID}}"
 					data-modal-confirm-header="{{ctx.Locale.Tr "admin.monitor.process.cancel"}}"
 					data-modal-confirm-content="{{ctx.Locale.Tr "admin.monitor.process.cancel_desc"}}"
-				>{{svg "octicon-trash" 16 "text-red"}}</a>
+				>{{svg "octicon-trash" 16 "tw-text-red"}}</a>
 			{{end}}
 		</div>
 	</div>

templates/devtest/flex-list.tmpl

@@ -48,7 +48,7 @@
 					</div>
 					<div class="flex-item-body">
 						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content
-						<span class="text truncate">Truncate very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content</span>
+						<span class="tw-inline-block tw-truncate">Truncate very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content</span>
 					</div>
 				</div>
 				<div class="flex-item-trailing">
@@ -65,7 +65,7 @@
 				<div class="flex-item-main">
 					<div class="flex-item-header">
 						<div class="flex-item-title">
-							<a class="text primary" href="{{$.Link}}">
+							<a class="tw-text-primary" href="{{$.Link}}">
 								gitea-org / gitea
 							</a>
 							<span class="flex-text-inline" data-tooltip-content="{{ctx.Locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
@@ -74,8 +74,8 @@
 							<a class="muted" href="{{$.Link}}">
 								<span class="flex-text-inline"><i class="color-icon tw-mr-2 tw-bg-blue"></i>Go</span>
 							</a>
-							<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a>
+							<a class="tw-text-text-light flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a>
-							<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
+							<a class="tw-text-text-light flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
 						</div>
 					</div>
 					<div class="flex-item-body">

templates/install.tmpl

@@ -160,7 +160,7 @@
 					<div>
 						<!-- Email -->
 						<details class="optional field">
-							<summary class="right-content tw-py-2{{if .Err_SMTP}} text red{{end}}">
+							<summary class="right-content tw-py-2{{if .Err_SMTP}} tw-text-red{{end}}">
 								{{ctx.Locale.Tr "install.email_title"}}
 							</summary>
 							<div class="inline field">
@@ -200,7 +200,7 @@
 
 						<!-- Server and other services -->
 						<details class="optional field">
-							<summary class="right-content tw-py-2{{if .Err_Services}} text red{{end}}">
+							<summary class="right-content tw-py-2{{if .Err_Services}} tw-text-red{{end}}">
 								{{ctx.Locale.Tr "install.server_service_title"}}
 							</summary>
 							<div class="inline field">
@@ -298,7 +298,7 @@
 
 						<!-- Admin -->
 						<details class="optional field">
-							<summary class="right-content tw-py-2{{if .Err_Admin}} text red{{end}}">
+							<summary class="right-content tw-py-2{{if .Err_Admin}} tw-text-red{{end}}">
 								{{ctx.Locale.Tr "install.admin_title"}}
 							</summary>
 							<p class="center">{{ctx.Locale.Tr "install.admin_setting_desc"}}</p>

templates/org/header.tmpl

@@ -19,7 +19,7 @@
 			</span>
 		</div>
 		{{if .RenderedDescription}}<div class="render-content markup">{{.RenderedDescription}}</div>{{end}}
-		<div class="text light meta tw-mt-1">
+		<div class="tw-text-text-light meta tw-mt-1">
 			{{if .Org.Location}}<div class="flex-text-block">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>{{end}}
 			{{if .Org.Website}}<div class="flex-text-block">{{svg "octicon-link"}} <a class="muted" target="_blank" rel="me" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
 			{{if .IsSigned}}

templates/org/home.tmpl

@@ -49,7 +49,7 @@
 				{{if .NumMembers}}
 					<h4 class="ui top attached header tw-flex">
 						<strong class="tw-flex-1">{{ctx.Locale.Tr "org.members"}}</strong>
-						<a class="text grey tw-flex tw-items-center" href="{{.OrgLink}}/members"><span>{{.NumMembers}}</span> {{svg "octicon-chevron-right"}}</a>
+						<a class="tw-text-text-light tw-flex tw-items-center" href="{{.OrgLink}}/members"><span>{{.NumMembers}}</span> {{svg "octicon-chevron-right"}}</a>
 					</h4>
 					<div class="ui attached segment members">
 						{{$isMember := .IsOrganizationMember}}
@@ -63,13 +63,13 @@
 				{{if .IsOrganizationMember}}
 					<div class="ui top attached header tw-flex">
 						<strong class="tw-flex-1">{{ctx.Locale.Tr "org.teams"}}</strong>
-						<a class="text grey tw-flex tw-items-center" href="{{.OrgLink}}/teams"><span>{{.Org.NumTeams}}</span> {{svg "octicon-chevron-right"}}</a>
+						<a class="tw-text-text-light tw-flex tw-items-center" href="{{.OrgLink}}/teams"><span>{{.Org.NumTeams}}</span> {{svg "octicon-chevron-right"}}</a>
 					</div>
 					<div class="ui attached table segment teams">
 						{{range .Teams}}
 							<div class="item">
 								<a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong class="team-name">{{.Name}}</strong></a>
-								<p class="text grey">
+								<p class="tw-text-text-light">
 									<a class="muted" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong>{{.NumMembers}}</strong> {{ctx.Locale.Tr "org.lower_members"}}</a> ·
 									<a class="muted" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/repositories"><strong>{{.NumRepos}}</strong> {{ctx.Locale.Tr "org.lower_repositories"}}</a>
 								</p>

templates/org/member/members.tmpl

@@ -28,7 +28,7 @@
 								{{ctx.Locale.Tr "admin.users.2fa"}}
 								<strong>
 									{{if index $.MembersTwoFaStatus .ID}}
-										<span class="text green">{{svg "octicon-check"}}</span>
+										<span class="tw-text-green">{{svg "octicon-check"}}</span>
 									{{else}}
 										{{svg "octicon-x"}}
 									{{end}}

templates/org/settings/options_dangerzone.tmpl

@@ -87,7 +87,7 @@
 			<div class="field">
 				<label>
 					{{ctx.Locale.Tr "org.settings.name_confirm"}}
-					<span class="text red">{{.Org.Name}}</span>
+					<span class="tw-text-red">{{.Org.Name}}</span>
 				</label>
 			</div>
 			<div class="required field">
@@ -125,7 +125,7 @@
 			<div class="field">
 				<label>
 					{{ctx.Locale.Tr "org.settings.name_confirm"}}
-					<span class="text red">{{.Org.Name}}</span>
+					<span class="tw-text-red">{{.Org.Name}}</span>
 				</label>
 			</div>
 			<div class="required field">

templates/org/team/members.tmpl

@@ -45,7 +45,7 @@
 							</div>
 						{{else}}
 							<div class="flex-item">
-								<span class="text grey tw-italic">{{ctx.Locale.Tr "org.teams.members.none"}}</span>
+								<span class="tw-text-text-light tw-italic">{{ctx.Locale.Tr "org.teams.members.none"}}</span>
 							</div>
 						{{end}}
 					</div>

templates/org/team/repositories.tmpl

@@ -32,7 +32,7 @@
 									{{template "repo/icon" .}}
 								</div>
 								<div class="flex-item-main">
-									<a class="flex-item-title text primary" href="{{$.Org.HomeLink}}/{{.Name | PathEscape}}">
+									<a class="flex-item-title tw-text-primary" href="{{$.Org.HomeLink}}/{{.Name | PathEscape}}">
 										{{$.Org.Name}}/{{.Name}}
 									</a>
 								</div>
@@ -46,7 +46,7 @@
 							</div>
 						{{else}}
 							<div class="flex-item">
-								<span class="text grey tw-italic">{{ctx.Locale.Tr "org.teams.repos.none"}}</span>
+								<span class="tw-text-text-light tw-italic">{{ctx.Locale.Tr "org.teams.repos.none"}}</span>
 							</div>
 						{{end}}
 					</div>

templates/org/team/sidebar.tmpl

@@ -21,7 +21,7 @@
 			{{if .Team.Description}}
 				{{.Team.Description}}
 			{{else}}
-				<span class="text grey tw-italic">{{ctx.Locale.Tr "org.teams.no_desc"}}</span>
+				<span class="tw-text-text-light tw-italic">{{ctx.Locale.Tr "org.teams.no_desc"}}</span>
 			{{end}}
 		</div>
 		{{if eq .Team.LowerName "owners"}}

templates/org/team/teams.tmpl

@@ -14,7 +14,7 @@
 			{{range .Teams}}
 				<div class="column">
 					<div class="ui top attached header">
-						<a class="text black" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong>{{.Name}}</strong></a>
+						<a class="tw-text-text" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong>{{.Name}}</strong></a>
 						<div class="ui right">
 							<a class="ui primary tiny button" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}">{{ctx.Locale.Tr "view"}}</a>
 							{{if .IsMember ctx $.SignedUser.ID}}

templates/package/content/maven.tmpl

@@ -65,7 +65,7 @@
 						<i class="icon">{{svg "octicon-package-dependencies" 16 ""}}</i>
 						<div class="content">
 							<div class="header">{{.GroupID}}:{{.ArtifactID}}</div>
-							<div class="description text small">{{.Version}}</div>
+							<div class="description tw-text-xs">{{.Version}}</div>
 						</div>
 					</div>
 				{{end}}

templates/package/shared/view.tmpl

@@ -76,7 +76,7 @@
 			{{range .PackageDescriptor.Files}}
 			<div class="item">
 				<a href="{{$packageVersionLink}}/files/{{.File.ID}}">{{.File.Name}}</a>
-				<span class="text small tw-whitespace-nowrap">{{FileSize .Blob.Size}}</span>
+				<span class="tw-text-xs tw-whitespace-nowrap">{{FileSize .Blob.Size}}</span>
 			</div>
 			{{end}}
 		</div>
@@ -88,7 +88,7 @@
 			{{range .LatestVersions}}
 			<div class="item tw-flex">
 				<a class="tw-flex-1 gt-ellipsis" title="{{.Version}}" href="{{$.PackageDescriptor.PackageWebLink}}/{{PathEscape .LowerVersion}}">{{.Version}}</a>
-				<span class="text small">{{DateUtils.AbsoluteShort .CreatedUnix}}</span>
+				<span class="tw-text-xs">{{DateUtils.AbsoluteShort .CreatedUnix}}</span>
 			</div>
 			{{end}}
 		</div>

templates/projects/list.tmpl

@@ -67,7 +67,7 @@
 					{{else}}
 						<a class="link-action flex-text-inline" href data-url="{{.Link ctx}}/close">{{svg "octicon-skip" 14}}{{ctx.Locale.Tr "repo.projects.close"}}</a>
 					{{end}}
-					<a class="link-action flex-text-inline text red" href data-modal-confirm="#repo-project-delete-modal" data-url="{{.Link ctx}}/delete">{{svg "octicon-trash" 14}}{{ctx.Locale.Tr "repo.issues.label_delete"}}</a>
+					<a class="link-action flex-text-inline tw-text-red" href data-modal-confirm="#repo-project-delete-modal" data-url="{{.Link ctx}}/delete">{{svg "octicon-trash" 14}}{{ctx.Locale.Tr "repo.issues.label_delete"}}</a>
 				</div>
 				{{end}}
 			</div>

templates/repo/actions/list.tmpl

@@ -14,7 +14,7 @@
 							<span class="gt-ellipsis">{{.Entry.Name}}</span>
 
 							{{if .ErrMsg}}
-								<span class="flex-text-inline" data-tooltip-content="{{.ErrMsg}}">{{svg "octicon-alert" 16 "text red"}}</span>
+								<span class="flex-text-inline" data-tooltip-content="{{.ErrMsg}}">{{svg "octicon-alert" 16 "tw-text-red"}}</span>
 							{{end}}
 
 							{{if $.ActionsConfig.IsWorkflowDisabled .Entry.Name}}

templates/repo/actions/runs_list.tmpl

@@ -29,7 +29,7 @@
 					{{$errMsg := index $.RunErrors $run.ID}}
 					{{if $errMsg}}
 						<span class="flex-text-inline" data-tooltip-content="{{$errMsg}}">
-							{{svg "octicon-alert" 16 "text red"}}
+							{{svg "octicon-alert" 16 "tw-text-red"}}
 						</span>
 					{{end}}
 				</div>

templates/repo/actions/status.tmpl

@@ -6,18 +6,18 @@
 {{- $className := Iif .className .className "" -}}
 <span data-tooltip-content="{{ctx.Locale.Tr (printf "actions.status.%s" .status)}}">
 {{if eq .status "success"}}
-	{{svg "octicon-check-circle-fill" $size (printf "text green %s" $className)}}
+	{{svg "octicon-check-circle-fill" $size (printf "tw-text-green %s" $className)}}
 {{else if eq .status "skipped"}}
-	{{svg "octicon-skip" $size (printf "text grey %s" $className)}}
+	{{svg "octicon-skip" $size (printf "tw-text-text-light %s" $className)}}
 {{else if eq .status "cancelled"}}
-	{{svg "octicon-stop" $size (printf "text grey %s" $className)}}
+	{{svg "octicon-stop" $size (printf "tw-text-text-light %s" $className)}}
 {{else if eq .status "waiting"}}
-	{{svg "octicon-circle" $size (printf "text grey %s" $className)}}
+	{{svg "octicon-circle" $size (printf "tw-text-text-light %s" $className)}}
 {{else if eq .status "blocked"}}
-	{{svg "octicon-blocked" $size (printf "text yellow %s" $className)}}
+	{{svg "octicon-blocked" $size (printf "tw-text-yellow %s" $className)}}
 {{else if eq .status "running"}}
-	{{svg "gitea-running" $size (printf "text yellow rotate-clockwise %s" $className)}}
+	{{svg "gitea-running" $size (printf "tw-text-yellow rotate-clockwise %s" $className)}}
 {{else}}{{/*failure, unknown*/}}
-	{{svg "octicon-x-circle-fill" $size (printf "text red %s" $className)}}
+	{{svg "octicon-x-circle-fill" $size (printf "tw-text-red %s" $className)}}
 {{end}}
 </span>

templates/repo/actions/workflow_dispatch_inputs.tmpl

@@ -40,7 +40,7 @@
 {{range .workflows}}
 	{{if and .ErrMsg (eq .Entry.Name $.CurWorkflow)}}
 		<div class="ui field">
-			<div>{{svg "octicon-alert" 16 "text red"}} {{.ErrMsg}}</div>
+			<div>{{svg "octicon-alert" 16 "tw-text-red"}} {{.ErrMsg}}</div>
 		</div>
 	{{end}}
 {{end}}

templates/repo/branch/list.tmpl

@@ -192,7 +192,7 @@
 								{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
 									{{if .DBBranch.IsDeleted}}
 										<button class="btn interact-bg tw-p-2 link-action restore-branch-button" data-url="{{$.Link}}/restore?branch_id={{.DBBranch.ID}}&name={{.DBBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{ctx.Locale.Tr "repo.branch.restore" (.DBBranch.Name)}}">
-											<span class="text blue">
+											<span class="tw-text-blue">
 												{{svg "octicon-reply"}}
 											</span>
 										</button>
@@ -250,7 +250,7 @@
 	<form class="ui form" action="{{$.Repository.Link}}/branches/rename" method="post">
 		<div class="content">
 			<div class="field default-branch-warning">
-				<span class="text red">{{ctx.Locale.Tr "repo.branch.warning_rename_default_branch"}}</span>
+				<span class="tw-text-red">{{ctx.Locale.Tr "repo.branch.warning_rename_default_branch"}}</span>
 			</div>
 			<div class="field">
 				<span class="text" data-rename-branch-to="{{ctx.Locale.Tr "repo.branch.rename_branch_to"}}"></span>

templates/repo/commit_page.tmpl

@@ -140,11 +140,11 @@
 				{{end}}
 			</div>
 
-			<span class="text grey">{{DateUtils.TimeSince .Commit.Author.When}}</span>
+			<span class="tw-text-text-light">{{DateUtils.TimeSince .Commit.Author.When}}</span>
 
 			<div class="flex-text-inline">
 				{{if or (ne .Commit.Committer.Name .Commit.Author.Name) (ne .Commit.Committer.Email .Commit.Author.Email)}}
-					<span class="text grey">{{ctx.Locale.Tr "repo.diff.committed_by"}}</span>
+					<span class="tw-text-text-light">{{ctx.Locale.Tr "repo.diff.committed_by"}}</span>
 					{{if and .Verification.CommittingUser .Verification.CommittingUser.ID}}
 						{{ctx.AvatarUtils.Avatar .Verification.CommittingUser 20}}
 						<a href="{{.Verification.CommittingUser.HomeLink}}"><strong>{{.Commit.Committer.Name}}</strong></a>
@@ -192,7 +192,7 @@
 				{{else}}
 					<strong>{{.NoteCommit.Author.Name}}</strong>
 				{{end}}
-				<span class="text grey">{{DateUtils.TimeSince .NoteCommit.Author.When}}</span>
+				<span class="tw-text-text-light">{{DateUtils.TimeSince .NoteCommit.Author.When}}</span>
 			</div>
 			<div class="ui bottom attached info segment git-notes">
 				<pre class="commit-body">{{.NoteRendered | SanitizeHTML}}</pre>

templates/repo/commit_status.tmpl

@@ -1,19 +1,19 @@
 <!-- make sure this matches the color logic in web_src/js/components/DashboardRepoList.vue -->
 {{if eq .State "pending"}}
-	{{svg "octicon-dot-fill" 18 "commit-status icon text yellow"}}
+	{{svg "octicon-dot-fill" 18 "commit-status icon tw-text-yellow"}}
 {{end}}
 {{if eq .State "success"}}
-	{{svg "octicon-check" 18 "commit-status icon text green"}}
+	{{svg "octicon-check" 18 "commit-status icon tw-text-green"}}
 {{end}}
 {{if eq .State "error"}}
-	{{svg "gitea-exclamation" 18 "commit-status icon text red"}}
+	{{svg "gitea-exclamation" 18 "commit-status icon tw-text-red"}}
 {{end}}
 {{if eq .State "failure"}}
-	{{svg "octicon-x" 18 "commit-status icon text red"}}
+	{{svg "octicon-x" 18 "commit-status icon tw-text-red"}}
 {{end}}
 {{if eq .State "warning"}}
-	{{svg "gitea-exclamation" 18 "commit-status icon text yellow"}}
+	{{svg "gitea-exclamation" 18 "commit-status icon tw-text-yellow"}}
 {{end}}
 {{if eq .State "skipped"}}
-	{{svg "octicon-skip" 18 "commit-status icon text grey"}}
+	{{svg "octicon-skip" 18 "commit-status icon tw-text-text-light"}}
 {{end}}

templates/repo/diff/comments.tmpl

@@ -13,11 +13,11 @@
 		<div class="comment-header avatar-content-left-arrow">
 			<div class="comment-header-left">
 				{{if .OriginalAuthor}}
-					<span class="text black tw-font-semibold tw-mr-1">
+					<span class="tw-text-text tw-font-semibold tw-mr-1">
 						{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
 						{{.OriginalAuthor}}
 					</span>
-					<span class="text grey muted-links">
+					<span class="tw-text-text-light muted-links">
 						{{ctx.Locale.Tr "repo.issues.commented_at" .HashTag $createdStr}}
 					</span>
 					<span class="text migrate">
@@ -26,7 +26,7 @@
 						{{end}}
 					</span>
 				{{else}}
-					<span class="text grey muted-links">
+					<span class="tw-text-text-light muted-links">
 						{{template "shared/user/namelink" .Poster}}
 						{{ctx.Locale.Tr "repo.issues.commented_at" .HashTag $createdStr}}
 					</span>

templates/repo/diff/compare.tmpl

@@ -46,12 +46,12 @@
 						<div class="ui grid">
 							<div class="two column row">
 								<a class="reference column" href="#" data-target=".base-branch-list">
-									<span class="text black">
+									<span class="tw-text-text">
 										{{svg "octicon-git-branch"}} {{ctx.Locale.Tr "repo.branches"}}
 									</span>
 								</a>
 								<a class="reference column" href="#" data-target=".base-tag-list">
-									<span class="text black">
+									<span class="tw-text-text">
 										{{svg "octicon-tag"}} {{ctx.Locale.Tr "repo.tags"}}
 									</span>
 								</a>
@@ -117,12 +117,12 @@
 						<div class="ui grid">
 							<div class="two column row">
 								<a class="reference column" href="#" data-target=".head-branch-list">
-									<span class="text black">
+									<span class="tw-text-text">
 										{{svg "octicon-git-branch"}} {{ctx.Locale.Tr "repo.branches"}}
 									</span>
 								</a>
 								<a class="reference column" href="#" data-target=".head-tag-list">
-									<span class="text black">
+									<span class="tw-text-text">
 										{{svg "octicon-tag"}} {{ctx.Locale.Tr "repo.tags"}}
 									</span>
 								</a>

templates/repo/diff/conversation.tmpl

@@ -9,7 +9,7 @@
 	<div class="conversation-holder" data-path="{{$comment.TreePath}}" data-side="{{if lt $comment.Line 0}}left{{else}}right{{end}}" data-idx="{{$comment.UnsignedLine}}">
 		{{if $resolved}}
 			<div class="resolved-placeholder">
-				<div class="flex-text-block tw-flex-wrap grey text">
+				<div class="flex-text-block tw-flex-wrap tw-text-text-light">
 					{{svg "octicon-check"}}
 					<b>{{$resolveDoer.Name}}</b> {{ctx.Locale.Tr "repo.issues.review.resolved_by"}}
 					{{if $invalid}}

templates/repo/issue/branch_selector_field.tmpl

@@ -39,7 +39,7 @@ Still needs to figure out:
 		<div class="branch-tag-divider"></div>
 		<div id="branch-list" class="scrolling menu reference-list-menu">
 			{{if or .Reference (not .Issue)}}
-				<div class="item text small" data-id="" data-name="{{ctx.Locale.Tr "repo.issues.no_ref"}}" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
+				<div class="item tw-text-xs" data-id="" data-name="{{ctx.Locale.Tr "repo.issues.no_ref"}}" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
 			{{end}}
 			{{range .Branches}}
 				<div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector" title="{{.}}">{{.}}</div>
@@ -49,7 +49,7 @@ Still needs to figure out:
 		</div>
 		<div id="tag-list" class="scrolling menu reference-list-menu tw-hidden">
 			{{if or .Reference (not .Issue)}}
-				<div class="item text small" data-id="" data-name="{{ctx.Locale.Tr "repo.issues.no_ref"}}" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
+				<div class="item tw-text-xs" data-id="" data-name="{{ctx.Locale.Tr "repo.issues.no_ref"}}" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
 			{{end}}
 			{{range .Tags}}
 				<div class="item" data-id="refs/tags/{{.}}" data-name="tags/{{.}}" data-id-selector="#ref_selector">{{.}}</div>

templates/repo/issue/card.tmpl

@@ -22,7 +22,7 @@
 			{{end}}
 		</div>
 		<div class="meta">
-			<span class="text light grey muted-links">
+			<span class="tw-text-grey-light muted-links">
 				{{if not $.Page.Repository}}{{.Repo.FullName}}{{end}}#{{.Index}}
 				{{$timeStr := DateUtils.TimeSince .GetLastEventTimestamp}}
 				{{if .OriginalAuthor}}
@@ -46,8 +46,8 @@
 		{{range index $.Page.LinkedPRs .ID}}
 		<div class="meta tw-my-1">
 			<a href="{{.Repo.Link}}/pulls/{{.Index}}">
-				<span class="tw-m-0 text {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "tw-mr-1 tw-align-middle"}}</span>
+				<span class="tw-m-0 {{if .PullRequest.HasMerged}}tw-text-purple{{else if .IsClosed}}tw-text-red{{else}}tw-text-green{{end}}">{{svg "octicon-git-merge" 16 "tw-mr-1 tw-align-middle"}}</span>
-				<span class="tw-align-middle">{{.Title}} <span class="text light grey">#{{.Index}}</span></span>
+				<span class="tw-align-middle">{{.Title}} <span class="tw-text-grey-light">#{{.Index}}</span></span>
 			</a>
 		</div>
 		{{end}}

templates/repo/issue/milestone_issues.tmpl

@@ -36,7 +36,7 @@
 					{{else}}
 
 						{{if .Milestone.DeadlineString}}
-							<span{{if .IsOverdue}} class="text red"{{end}}>
+							<span{{if .IsOverdue}} class="tw-text-red"{{end}}>
 								{{svg "octicon-calendar"}}
 								{{DateUtils.AbsoluteShort (.Milestone.DeadlineString|DateUtils.ParseLegacy)}}
 							</span>

templates/repo/issue/milestones.tmpl

@@ -57,7 +57,7 @@
 									{{ctx.Locale.Tr "repo.milestones.closed" $closedDate}}
 								{{else}}
 									{{if .DeadlineString}}
-										<span class="flex-text-inline {{if .IsOverdue}}text red{{end}}">
+										<span class="flex-text-inline {{if .IsOverdue}}tw-text-red{{end}}">
 											{{svg "octicon-calendar" 14}}
 											{{DateUtils.AbsoluteShort (.DeadlineString|DateUtils.ParseLegacy)}}
 										</span>
@@ -76,7 +76,7 @@
 								{{else}}
 									<a class="link-action flex-text-inline" href data-url="{{$.Link}}/{{.ID}}/close">{{svg "octicon-x" 14}}{{ctx.Locale.Tr "repo.milestones.close"}}</a>
 								{{end}}
-								<a class="link-action flex-text-inline text red" href data-modal-confirm="#repo-milestone-delete-modal" data-url="{{$.RepoLink}}/milestones/delete?id={{.ID}}">{{svg "octicon-trash" 14}}{{ctx.Locale.Tr "repo.issues.label_delete"}}</a>
+								<a class="link-action flex-text-inline tw-text-red" href data-modal-confirm="#repo-milestone-delete-modal" data-url="{{$.RepoLink}}/milestones/delete?id={{.ID}}">{{svg "octicon-trash" 14}}{{ctx.Locale.Tr "repo.issues.label_delete"}}</a>
 							</div>
 						{{end}}
 					</div>

templates/repo/issue/sidebar/due_date.tmpl

@@ -3,7 +3,7 @@
 <div class="ui form tw-mt-2">
 	{{if .Issue.DeadlineUnix}}
 		<div class="tw-flex tw-justify-between tw-items-center tw-gap-2">
-			<div class="due-date {{if .Issue.IsOverdue}}text red{{end}}" {{if .Issue.IsOverdue}}data-tooltip-content="{{ctx.Locale.Tr "repo.issues.due_date_overdue"}}"{{end}}>
+			<div class="due-date {{if .Issue.IsOverdue}}tw-text-red{{end}}" {{if .Issue.IsOverdue}}data-tooltip-content="{{ctx.Locale.Tr "repo.issues.due_date_overdue"}}"{{end}}>
 				{{svg "octicon-calendar"}} {{DateUtils.AbsoluteLong .Issue.DeadlineUnix}}
 			</div>
 			<div class="flex-text-block">

templates/repo/issue/sidebar/issue_dependencies.tmpl

@@ -25,7 +25,7 @@
 							<a class="muted issue-dependency-title gt-ellipsis" href="{{.Issue.Link}}" data-tooltip-content="#{{.Issue.Index}} {{.Issue.Title | ctx.RenderUtils.RenderEmoji}}">
 								#{{.Issue.Index}} {{.Issue.Title | ctx.RenderUtils.RenderEmoji}}
 							</a>
-							<div class="text small gt-ellipsis" data-tooltip-content="{{.Repository.OwnerName}}/{{.Repository.Name}}">
+							<div class="tw-text-xs gt-ellipsis" data-tooltip-content="{{.Repository.OwnerName}}/{{.Repository.Name}}">
 								{{.Repository.OwnerName}}/{{.Repository.Name}}
 							</div>
 						</div>
@@ -59,7 +59,7 @@
 							<a class="muted issue-dependency-title gt-ellipsis" href="{{.Issue.Link}}" data-tooltip-content="#{{.Issue.Index}} {{.Issue.Title | ctx.RenderUtils.RenderEmoji}}">
 								#{{.Issue.Index}} {{.Issue.Title | ctx.RenderUtils.RenderEmoji}}
 							</a>
-							<div class="text small gt-ellipsis" data-tooltip-content="{{.Repository.OwnerName}}/{{.Repository.Name}}">
+							<div class="tw-text-xs gt-ellipsis" data-tooltip-content="{{.Repository.OwnerName}}/{{.Repository.Name}}">
 								{{.Repository.OwnerName}}/{{.Repository.Name}}
 							</div>
 						</div>
@@ -84,7 +84,7 @@
 										#{{.Issue.Index}} {{.Issue.Title | ctx.RenderUtils.RenderEmoji}}
 									</span>
 								</div>
-								<div class="text small gt-ellipsis" data-tooltip-content="{{.Repository.OwnerName}}/{{.Repository.Name}}">
+								<div class="tw-text-xs gt-ellipsis" data-tooltip-content="{{.Repository.OwnerName}}/{{.Repository.Name}}">
 									{{.Repository.OwnerName}}/{{.Repository.Name}}
 								</div>
 							</div>

templates/repo/issue/sidebar/reviewer_list.tmpl

@@ -82,7 +82,7 @@
 						{{end}}
 					{{end}}
 					<span {{if .Review.TooltipContent}}data-tooltip-content="{{ctx.Locale.Tr .Review.TooltipContent}}"{{end}}>
-						{{svg (printf "octicon-%s" .Review.Type.Icon) 16 (printf "text %s" (.Review.HTMLTypeColorName))}}
+						{{svg (printf "octicon-%s" .Review.Type.Icon) 16 .Review.HTMLTypeColorClass}}
 					</span>
 				</div>
 			</div>
@@ -98,7 +98,7 @@
 				</div>
 				<div class="flex-text-inline">
 					<span {{if .TooltipContent}}data-tooltip-content="{{ctx.Locale.Tr .TooltipContent}}"{{end}}>
-						{{svg (printf "octicon-%s" .Type.Icon) 16 (printf "text %s" (.HTMLTypeColorName))}}
+						{{svg (printf "octicon-%s" .Type.Icon) 16 .HTMLTypeColorClass}}
 					</span>
 				</div>
 			</div>

templates/repo/issue/view_content.tmpl

@@ -16,11 +16,11 @@
 					<div class="comment-header avatar-content-left-arrow" role="heading" aria-level="3">
 						<div class="comment-header-left">
 							{{if .Issue.OriginalAuthor}}
-								<span class="text black tw-font-semibold">
+								<span class="tw-text-text tw-font-semibold">
 									{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
 									{{.Issue.OriginalAuthor}}
 								</span>
-								<span class="text grey muted-links">
+								<span class="tw-text-text-light muted-links">
 									{{ctx.Locale.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr}}
 								</span>
 								<span class="text migrate">
@@ -30,7 +30,7 @@
 								<a class="inline-timeline-avatar" href="{{.Issue.Poster.HomeLink}}">
 									{{ctx.AvatarUtils.Avatar .Issue.Poster 24}}
 								</a>
-								<span class="text grey muted-links">
+								<span class="tw-text-text-light muted-links">
 									{{template "shared/user/authorlink" .Issue.Poster}}
 									{{ctx.Locale.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr}}
 								</span>

templates/repo/issue/view_content/attachments.tmpl

@@ -19,7 +19,7 @@
 				</a>
 			</div>
 			<div class="tw-p-2 tw-flex tw-items-center">
-				<span class="ui text grey">{{.Size | FileSize}}</span>
+				<span class="ui tw-text-text-light">{{.Size | FileSize}}</span>
 			</div>
 		</div>
 	{{end -}}

templates/repo/issue/view_content/comments.tmpl

@@ -29,7 +29,7 @@
 					<div class="comment-header avatar-content-left-arrow" role="heading" aria-level="3">
 						<div class="comment-header-left">
 							{{if .OriginalAuthor}}
-								<span class="text black tw-font-semibold tw-mr-1">
+								<span class="tw-text-text tw-font-semibold tw-mr-1">
 									{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 									{{.OriginalAuthor}}
 								</span>
@@ -403,7 +403,7 @@
 								{{end}}
 								<span class="comment-text-line">
 									{{if .OriginalAuthor}}
-										<span class="text black tw-font-semibold">
+										<span class="tw-text-text tw-font-semibold">
 											{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 											{{.OriginalAuthor}}
 										</span>

templates/repo/issue/view_content/comments_authorlink.tmpl

@@ -1,5 +1,5 @@
 {{if .comment.OriginalAuthor}}
-	<span class="text black">
+	<span class="tw-text-text">
 		{{svg (MigrationIcon .ctxData.Repository.GetOriginalURLHostname)}}
 		{{.comment.OriginalAuthor}}
 	</span>

templates/repo/issue/view_content/conversation.tmpl

@@ -69,9 +69,9 @@ The variables in "ctx.Data" are different in each case, making this template fra
 											{{ctx.AvatarUtils.Avatar .Poster 20}}
 										</a>
 									{{end}}
-									<span class="text grey muted-links">
+									<span class="tw-text-text-light muted-links">
 										{{if .OriginalAuthor}}
-											<span class="text black">
+											<span class="tw-text-text">
 												{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 												{{.OriginalAuthor}}
 											</span>

templates/repo/issue/view_content/pull_merge_box.tmpl

@@ -10,23 +10,23 @@
 >
 	{{$statusCheckData := .StatusCheckData}}
 	{{$requiredStatusCheckState := $statusCheckData.RequiredChecksState}}
-	<div class="timeline-avatar text {{if .Issue.PullRequest.HasMerged}}purple
+	<div class="timeline-avatar {{if .Issue.PullRequest.HasMerged}}tw-text-purple
-	{{- else if .Issue.IsClosed}}grey
+	{{- else if .Issue.IsClosed}}tw-text-text-light
-	{{- else if .IsPullWorkInProgress}}grey
+	{{- else if .IsPullWorkInProgress}}tw-text-text-light
-	{{- else if .IsFilesConflicted}}grey
+	{{- else if .IsFilesConflicted}}tw-text-text-light
-	{{- else if .IsPullRequestBroken}}red
+	{{- else if .IsPullRequestBroken}}tw-text-red
-	{{- else if .IsBlockedByApprovals}}red
+	{{- else if .IsBlockedByApprovals}}tw-text-red
-	{{- else if .IsBlockedByRejection}}red
+	{{- else if .IsBlockedByRejection}}tw-text-red
-	{{- else if .IsBlockedByOfficialReviewRequests}}red
+	{{- else if .IsBlockedByOfficialReviewRequests}}tw-text-red
-	{{- else if .IsBlockedByOutdatedBranch}}red
+	{{- else if .IsBlockedByOutdatedBranch}}tw-text-red
-	{{- else if .IsBlockedByChangedProtectedFiles}}red
+	{{- else if .IsBlockedByChangedProtectedFiles}}tw-text-red
-	{{- else if and .EnableStatusCheck (or $requiredStatusCheckState.IsFailure $requiredStatusCheckState.IsError)}}red
+	{{- else if and .EnableStatusCheck (or $requiredStatusCheckState.IsFailure $requiredStatusCheckState.IsError)}}tw-text-red
-	{{- else if and .EnableStatusCheck (or (not $.LatestCommitStatus) $requiredStatusCheckState.IsPending $requiredStatusCheckState.IsWarning)}}yellow
+	{{- else if and .EnableStatusCheck (or (not $.LatestCommitStatus) $requiredStatusCheckState.IsPending $requiredStatusCheckState.IsWarning)}}tw-text-yellow
-	{{- else if and .AllowMerge .RequireSigned (not .WillSign)}}red
+	{{- else if and .AllowMerge .RequireSigned (not .WillSign)}}tw-text-red
-	{{- else if .Issue.PullRequest.IsChecking}}yellow
+	{{- else if .Issue.PullRequest.IsChecking}}tw-text-yellow
-	{{- else if .Issue.PullRequest.IsEmpty}}grey
+	{{- else if .Issue.PullRequest.IsEmpty}}tw-text-text-light
-	{{- else if .Issue.PullRequest.CanAutoMerge}}green
+	{{- else if .Issue.PullRequest.CanAutoMerge}}tw-text-green
-	{{- else}}red{{end}}">{{svg "octicon-git-merge" 40}}</div>
+	{{- else}}tw-text-red{{end}}">{{svg "octicon-git-merge" 40}}</div>
 	<div class="content">
 		{{if .LatestCommitStatus}}
 		<div class="ui attached segment fitted">
@@ -190,7 +190,7 @@
 					{{end}}
 					{{if .WillSign}}
 						<div class="item">
-							{{svg "octicon-lock" 16 "text green"}}
+							{{svg "octicon-lock" 16 "tw-text-green"}}
 							{{ctx.Locale.Tr "repo.signing.will_sign" .SigningKeyMergeDisplay}}
 						</div>
 					{{else if .IsSigned}}
@@ -306,7 +306,7 @@
 					{{else}}
 						{{/* no merge style was set in repo setting: not or ($prUnit.PullRequestsConfig.AllowMerge ...) */}}
 						<div class="divider"></div>
-						<div class="item text red">
+						<div class="item tw-text-red">
 							{{svg "octicon-x"}}
 							{{ctx.Locale.Tr "repo.pulls.no_merge_desc"}}
 						</div>
@@ -326,27 +326,27 @@
 			{{else}}
 				{{/* Merge conflict without specific file. Suggest manual merge, only if all reviews and status checks OK. */}}
 				{{if .IsBlockedByApprovals}}
-					<div class="item text red">
+					<div class="item tw-text-red">
 						{{svg "octicon-x"}}
 						{{ctx.Locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
 					</div>
 				{{else if .IsBlockedByRejection}}
-					<div class="item text red">
+					<div class="item tw-text-red">
 						{{svg "octicon-x"}}
 						{{ctx.Locale.Tr "repo.pulls.blocked_by_rejection"}}
 					</div>
 				{{else if .IsBlockedByOfficialReviewRequests}}
-					<div class="item text red">
+					<div class="item tw-text-red">
 						{{svg "octicon-x"}}
 						{{ctx.Locale.Tr "repo.pulls.blocked_by_official_review_requests"}}
 					</div>
 				{{else if .IsBlockedByOutdatedBranch}}
-					<div class="item text red">
+					<div class="item tw-text-red">
 						{{svg "octicon-x"}}
 						{{ctx.Locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
 					</div>
 				{{else if .IsBlockedByChangedProtectedFiles}}
-					<div class="item text red">
+					<div class="item tw-text-red">
 						{{svg "octicon-x"}}
 						{{ctx.Locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n"}}
 					</div>
@@ -356,17 +356,17 @@
 						{{end}}
 					</ul>
 				{{else if and .EnableStatusCheck (not $requiredStatusCheckState.IsSuccess)}}
-					<div class="item text red">
+					<div class="item tw-text-red">
 						{{svg "octicon-x"}}
 						{{ctx.Locale.Tr "repo.pulls.required_status_check_failed"}}
 					</div>
 				{{else if and .RequireSigned (not .WillSign)}}
-					<div class="item text red">
+					<div class="item tw-text-red">
 						{{svg "octicon-x"}}
 						{{ctx.Locale.Tr "repo.pulls.require_signed_wont_sign"}}
 					</div>
 				{{else}}
-					<div class="item text red">
+					<div class="item tw-text-red">
 						{{svg "octicon-x"}}
 						{{ctx.Locale.Tr "repo.pulls.cannot_auto_merge_desc"}}
 					</div>

templates/repo/migrate/migrating.tmpl

@@ -68,7 +68,7 @@
 			<div class="field">
 				<label>
 					{{ctx.Locale.Tr "repo.settings.transfer_form_title"}}
-					<span class="text red">{{.Repository.Name}}</span>
+					<span class="tw-text-red">{{.Repository.Name}}</span>
 				</label>
 			</div>
 			<div class="required field">

templates/repo/pulls/status.tmpl

@@ -40,7 +40,7 @@
 		{{range .CommitStatuses}}
 			<div class="commit-status-item">
 				{{template "repo/commit_status" .}}
-				<div class="status-context gt-ellipsis">{{.Context}} <span class="text light-2">{{.Description}}</span></div>
+				<div class="status-context gt-ellipsis">{{.Context}} <span class="tw-text-text-light-2">{{.Description}}</span></div>
 				<div class="ui status-details">
 					{{if and $statusCheckData $statusCheckData.IsContextRequired}}
 						{{if (call $statusCheckData.IsContextRequired .Context)}}<div class="ui label">{{ctx.Locale.Tr "repo.pulls.status_checks_requested"}}</div>{{end}}
@@ -52,7 +52,7 @@
 		{{if $statusCheckData}}
 			{{range $statusCheckData.MissingRequiredChecks}}
 				<div class="commit-status-item">
-					{{svg "octicon-dot-fill" 18 "commit-status icon text yellow"}}
+					{{svg "octicon-dot-fill" 18 "commit-status icon tw-text-yellow"}}
 					<div class="status-context gt-ellipsis">{{.}}</div>
 					<div class="ui label">{{ctx.Locale.Tr "repo.pulls.status_checks_requested"}}</div>
 				</div>

templates/repo/pulse.tmpl

@@ -59,21 +59,21 @@
 <div class="ui attached segment horizontal segments">
 	{{if .Permission.CanRead ctx.Consts.RepoUnitTypePullRequests}}
 		<a href="#merged-pull-requests" class="ui attached segment text center">
-			<span class="text purple">{{svg "octicon-git-pull-request"}}</span> <strong>{{.Activity.MergedPRCount}}</strong><br>
+			<span class="tw-text-purple">{{svg "octicon-git-pull-request"}}</span> <strong>{{.Activity.MergedPRCount}}</strong><br>
 			{{ctx.Locale.TrN .Activity.MergedPRCount "repo.activity.merged_prs_count_1" "repo.activity.merged_prs_count_n"}}
 		</a>
 		<a href="#proposed-pull-requests" class="ui attached segment text center">
-			<span class="text green">{{svg "octicon-git-branch"}}</span> <strong>{{.Activity.OpenedPRCount}}</strong><br>
+			<span class="tw-text-green">{{svg "octicon-git-branch"}}</span> <strong>{{.Activity.OpenedPRCount}}</strong><br>
 			{{ctx.Locale.TrN .Activity.OpenedPRCount "repo.activity.opened_prs_count_1" "repo.activity.opened_prs_count_n"}}
 		</a>
 	{{end}}
 	{{if .Permission.CanRead ctx.Consts.RepoUnitTypeIssues}}
 		<a href="#closed-issues" class="ui attached segment text center">
-			<span class="text red">{{svg "octicon-issue-closed"}}</span> <strong>{{.Activity.ClosedIssueCount}}</strong><br>
+			<span class="tw-text-red">{{svg "octicon-issue-closed"}}</span> <strong>{{.Activity.ClosedIssueCount}}</strong><br>
 			{{ctx.Locale.TrN .Activity.ClosedIssueCount "repo.activity.closed_issues_count_1" "repo.activity.closed_issues_count_n"}}
 		</a>
 		<a href="#new-issues" class="ui attached segment text center">
-			<span class="text green">{{svg "octicon-issue-opened"}}</span> <strong>{{.Activity.OpenedIssueCount}}</strong><br>
+			<span class="tw-text-green">{{svg "octicon-issue-opened"}}</span> <strong>{{.Activity.OpenedIssueCount}}</strong><br>
 			{{ctx.Locale.TrN .Activity.OpenedIssueCount "repo.activity.new_issues_count_1" "repo.activity.new_issues_count_n"}}
 		</a>
 	{{end}}
@@ -100,9 +100,9 @@
 				<strong>{{ctx.Locale.TrN .Activity.Code.ChangedFiles "repo.activity.git_stats_file_1" "repo.activity.git_stats_file_n" .Activity.Code.ChangedFiles}}</strong>
 				{{ctx.Locale.TrN .Activity.Code.ChangedFiles "repo.activity.git_stats_files_changed_1" "repo.activity.git_stats_files_changed_n"}}
 				{{ctx.Locale.Tr "repo.activity.git_stats_additions"}}
-				<strong class="text green">{{ctx.Locale.TrN .Activity.Code.Additions "repo.activity.git_stats_addition_1" "repo.activity.git_stats_addition_n" .Activity.Code.Additions}}</strong>
+				<strong class="tw-text-green">{{ctx.Locale.TrN .Activity.Code.Additions "repo.activity.git_stats_addition_1" "repo.activity.git_stats_addition_n" .Activity.Code.Additions}}</strong>
 				{{ctx.Locale.Tr "repo.activity.git_stats_and_deletions"}}
-				<strong class="text red">{{ctx.Locale.TrN .Activity.Code.Deletions "repo.activity.git_stats_deletion_1" "repo.activity.git_stats_deletion_n" .Activity.Code.Deletions}}</strong>.
+				<strong class="tw-text-red">{{ctx.Locale.TrN .Activity.Code.Deletions "repo.activity.git_stats_deletion_1" "repo.activity.git_stats_deletion_n" .Activity.Code.Deletions}}</strong>.
 			</div>
 			<div class="ui attached segment">
 				<div id="repo-activity-top-authors-chart"></div>

templates/repo/release/list.tmpl

@@ -44,7 +44,7 @@
 								{{end}}
 							</div>
 						</div>
-						<p class="text grey">
+						<p class="tw-text-text-light">
 							<span class="author">
 							{{if $release.OriginalAuthor}}
 								{{svg (MigrationIcon $release.Repo.GetOriginalURLHostname) 20 "tw-mr-1"}}{{$release.OriginalAuthor}}

templates/repo/release/new.tmpl

@@ -83,7 +83,7 @@
 					<div class="flex-text-block tw-flex-1">
 						<input name="attachment-edit-{{.UUID}}" class="tw-max-w-[48em]" required value="{{.Name}}">
 						<input name="attachment-del-{{.UUID}}" type="hidden" value="false">
-						<span class="text grey tw-flex-shrink-0">{{.Size | FileSize}}</span>
+						<span class="tw-text-text-light tw-flex-shrink-0">{{.Size | FileSize}}</span>
 						<span data-tooltip-content="{{ctx.Locale.Tr "repo.release.download_count" (ctx.Locale.PrettyNumber .DownloadCount)}}">
 							{{svg "octicon-info"}}
 						</span>

templates/repo/settings/collaboration.tmpl

@@ -58,7 +58,7 @@
 					{{range $t, $team := .Teams}}
 						<div class="flex-item">
 							<div class="flex-item-main">
-								<a class="flex-item-title text primary" href="{{AppSubUrl}}/org/{{$.OrgName|PathEscape}}/teams/{{.LowerName|PathEscape}}">
+								<a class="flex-item-title tw-text-primary" href="{{AppSubUrl}}/org/{{$.OrgName|PathEscape}}/teams/{{.LowerName|PathEscape}}">
 									{{.Name}}
 								</a>
 								<div class="flex-item-body flex-text-block">

templates/repo/settings/deploy_keys.tmpl

@@ -46,7 +46,7 @@
 					{{range .Deploykeys}}
 						<div class="flex-item">
 							<div class="flex-item-leading">
-								<span class="text {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
+								<span class="{{if .HasRecentActivity}}tw-text-green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
 							</div>
 							<div class="flex-item-main">
 								<div class="flex-item-title">{{.Name}}</div>
@@ -54,7 +54,7 @@
 									{{.Fingerprint}}
 								</div>
 								<div class="flex-item-body">
-									<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} —  {{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="text green"{{end}}>{{DateUtils.AbsoluteShort .UpdatedUnix}}</span>{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}} - <span>{{ctx.Locale.Tr "settings.can_read_info"}}{{if not .IsReadOnly}} / {{ctx.Locale.Tr "settings.can_write_info"}} {{end}}</span></i>
+									<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} —  {{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="tw-text-green"{{end}}>{{DateUtils.AbsoluteShort .UpdatedUnix}}</span>{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}} - <span>{{ctx.Locale.Tr "settings.can_read_info"}}{{if not .IsReadOnly}} / {{ctx.Locale.Tr "settings.can_write_info"}} {{end}}</span></i>
 								</div>
 							</div>
 							<div class="flex-item-trailing">

templates/repo/settings/githooks.tmpl

@@ -8,7 +8,7 @@
 				<div class="item"><span>{{ctx.Locale.Tr "repo.settings.githooks_desc"}}</span></div>
 				{{range .Hooks}}
 				<div class="item">
-					<span class="text {{if .IsActive}}green{{else}}grey{{end}}">{{svg "octicon-dot-fill" 22}}</span>
+					<span class="{{if .IsActive}}tw-text-green{{else}}tw-text-text-light{{end}}">{{svg "octicon-dot-fill" 22}}</span>
 					<span class="gt-ellipsis tw-flex-1">{{.Name}}</span>
 					<a class="muted tw-p-2" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">{{svg "octicon-pencil"}}</a>
 				</div>

templates/repo/settings/lfs_file_find.tmpl

@@ -20,7 +20,7 @@
 								</span>
 							</td>
 							<td>
-								<span class="text grey">{{svg "octicon-git-branch"}}{{.BranchName}}</span>
+								<span class="tw-text-text-light">{{svg "octicon-git-branch"}}{{.BranchName}}</span>
 							</td>
 							<td>
 								{{if .ParentHashes}}

templates/repo/settings/options.tmpl

@@ -105,7 +105,7 @@
 							<tbody>
 								<tr>
 									<td colspan="4">
-										<div class="text red tw-py-4">{{ctx.Locale.Tr "repo.settings.mirror_settings.direction.pull"}}: {{ctx.Locale.Tr "error.occurred"}}</div>
+										<div class="tw-text-red tw-py-4">{{ctx.Locale.Tr "repo.settings.mirror_settings.direction.pull"}}: {{ctx.Locale.Tr "error.occurred"}}</div>
 									</td>
 								</tr>
 							</tbody>
@@ -890,7 +890,7 @@
 					<div class="field">
 						<label>
 							{{ctx.Locale.Tr "repo.settings.transfer_form_title"}}
-							<span class="text red">{{.Repository.Name}}</span>
+							<span class="tw-text-red">{{.Repository.Name}}</span>
 						</label>
 					</div>
 					<div class="required field">
@@ -920,7 +920,7 @@
 					<div class="field">
 						<label>
 							{{ctx.Locale.Tr "repo.settings.transfer_form_title"}}
-							<span class="text red">{{.Repository.Name}}</span>
+							<span class="tw-text-red">{{.Repository.Name}}</span>
 						</label>
 					</div>
 					<div class="required field">
@@ -952,7 +952,7 @@
 				<div class="field">
 					<label>
 						{{ctx.Locale.Tr "repo.settings.transfer_form_title"}}
-						<span class="text red">{{.Repository.Name}}</span>
+						<span class="tw-text-red">{{.Repository.Name}}</span>
 					</label>
 				</div>
 				<div class="required field">
@@ -989,7 +989,7 @@
 				<div class="field">
 					<label>
 						{{ctx.Locale.Tr "repo.settings.transfer_form_title"}}
-						<span class="text red">{{.Repository.Name}}</span>
+						<span class="tw-text-red">{{.Repository.Name}}</span>
 					</label>
 				</div>
 				<div class="required field">
@@ -1020,7 +1020,7 @@
 						<p>{{ctx.Locale.Tr "repo.settings.visibility.private.bullet_title"}}</p>
 						<ul>
 							<li>{{ctx.Locale.Tr "repo.settings.visibility.private.bullet_one"}}</li>
-							<li>{{ctx.Locale.Tr "repo.settings.visibility.private.bullet_two"}}{{if .Repository.NumForks}}<span class="text red">{{ctx.Locale.Tr "repo.visibility_fork_helper"}}</span>{{end}}</li>
+							<li>{{ctx.Locale.Tr "repo.settings.visibility.private.bullet_two"}}{{if .Repository.NumForks}}<span class="tw-text-red">{{ctx.Locale.Tr "repo.visibility_fork_helper"}}</span>{{end}}</li>
 						</ul>
 					{{end}}
 			</div>
@@ -1047,7 +1047,7 @@
 				<div class="field">
 					<label>
 						{{ctx.Locale.Tr "repo.settings.transfer_form_title"}}
-						<span class="text red">{{.Repository.Name}}</span>
+						<span class="tw-text-red">{{.Repository.Name}}</span>
 					</label>
 				</div>
 				<div class="required field">

templates/repo/settings/webhook/base_list.tmpl

@@ -12,12 +12,12 @@
 		<div class="item"><span>{{.Description}}</span></div>
 		{{range .Webhooks}}
 			<div class="item">
-				<span class="text {{if eq .LastStatus 1}}green{{else if eq .LastStatus 2}}red{{else}}grey{{end}}">{{svg "octicon-dot-fill" 22}}</span>
+				<span class="{{if eq .LastStatus 1}}tw-text-green{{else if eq .LastStatus 2}}tw-text-red{{else}}tw-text-text-light{{end}}">{{svg "octicon-dot-fill" 22}}</span>
 				<div class="gt-ellipsis tw-flex-1">
 					<a title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
 				</div>
 				<a class="muted tw-p-2" href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a>
-				<a class="text red tw-p-2 link-action"
+				<a class="tw-text-red tw-p-2 link-action"
 					data-url="{{$.Link}}/delete?id={{.ID}}"
 					data-modal-confirm="{{ctx.Locale.Tr "repo.settings.webhook_deletion_desc"}}"
 				>{{svg "octicon-trash"}}</a>

templates/repo/settings/webhook/history.tmpl

@@ -20,15 +20,15 @@
 					<div class="flex-text-block tw-justify-between">
 						<div class="flex-text-inline">
 							{{if .IsSucceed}}
-								<span class="text green">{{svg "octicon-check"}}</span>
+								<span class="tw-text-green">{{svg "octicon-check"}}</span>
 							{{else if not .IsDelivered}}
-								<span class="text orange">{{svg "octicon-stopwatch"}}</span>
+								<span class="tw-text-orange">{{svg "octicon-stopwatch"}}</span>
 							{{else}}
-								<span class="text red">{{svg "octicon-alert"}}</span>
+								<span class="tw-text-red">{{svg "octicon-alert"}}</span>
 							{{end}}
 							<button class="btn interact-bg tw-p-2 toggle show-panel" data-panel="#info-{{.ID}}">{{.UUID}}</button>
 						</div>
-						<span class="text grey">
+						<span class="tw-text-text-light">
 							{{DateUtils.TimeSince .Delivered}}
 						</span>
 					</div>

templates/repo/view_file.tmpl

@@ -17,7 +17,7 @@
 			{{template "repo/latest_commit" .}}
 			{{if .LatestCommit}}
 				{{if .LatestCommit.Committer}}
-					<div class="text grey age flex-text-block">
+					<div class="tw-text-text-light age flex-text-block">
 						{{DateUtils.TimeSince .LatestCommit.Committer.When}}
 					</div>
 				{{end}}

templates/repo/view_list.tmpl

@@ -21,7 +21,7 @@
 					{{$submoduleLink := $submoduleFile.SubmoduleWebLinkTree ctx}}
 					{{if $submoduleLink}}
 						<a class="entry-name" href="{{$submoduleLink.RepoWebLink}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
-						@ <a class="text primary" href="{{$submoduleLink.CommitWebLink}}">{{ShortSha $submoduleFile.RefID}}</a>
+						@ <a class="tw-text-primary" href="{{$submoduleLink.CommitWebLink}}">{{ShortSha $submoduleFile.RefID}}</a>
 					{{else}}
 						<span class="entry-name" title="{{$entry.Name}}">{{$entry.Name}}</span>
 						@ {{ShortSha $submoduleFile.RefID}}
@@ -36,7 +36,7 @@
 								{{$subJumpablePathName}}
 							{{else}}
 								{{$subJumpablePathPrefixes := slice $subJumpablePathFields 0 $subJumpablePathFieldLast}}
-								<span class="text light-2">{{StringUtils.Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}}
+								<span class="tw-text-text-light-2">{{StringUtils.Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}}
 							{{end}}
 						</a>
 					{{else}}

templates/shared/issueicon.tmpl

@@ -1,26 +1,26 @@
-{{/* the logic should be kept the same as getIssueIcon/getIssueColor in JS code */}}
+{{/* the logic should be kept the same as getIssueIcon/getIssueColorClass in JS code */}}
 {{- if .IsPull -}}
 	{{- if not .PullRequest -}}
 		No PullRequest
 	{{- else -}}
 		{{- if .IsClosed -}}
 			{{- if .PullRequest.HasMerged -}}
-				{{- svg "octicon-git-merge" 16 "text purple" -}}
+				{{- svg "octicon-git-merge" 16 "tw-text-purple" -}}
 			{{- else -}}
-				{{- svg "octicon-git-pull-request-closed" 16 "text red" -}}
+				{{- svg "octicon-git-pull-request-closed" 16 "tw-text-red" -}}
 			{{- end -}}
 		{{- else -}}
 			{{- if .PullRequest.IsWorkInProgress ctx -}}
-				{{- svg "octicon-git-pull-request-draft" 16 "text grey" -}}
+				{{- svg "octicon-git-pull-request-draft" 16 "tw-text-text-light" -}}
 			{{- else -}}
-				{{- svg "octicon-git-pull-request" 16 "text green" -}}
+				{{- svg "octicon-git-pull-request" 16 "tw-text-green" -}}
 			{{- end -}}
 		{{- end -}}
 	{{- end -}}
 {{- else -}}
 	{{- if .IsClosed -}}
-		{{- svg "octicon-issue-closed" 16 "text red" -}}
+		{{- svg "octicon-issue-closed" 16 "tw-text-red" -}}
 	{{- else -}}
-		{{- svg "octicon-issue-opened" 16 "text green" -}}
+		{{- svg "octicon-issue-opened" 16 "tw-text-green" -}}
 	{{- end -}}
 {{- end -}}

templates/shared/issuelist.tmpl

@@ -29,7 +29,7 @@
 						</span>
 					</div>
 					{{if .TotalTrackedTime}}
-					<div class="text grey flex-text-block">
+					<div class="tw-text-text-light flex-text-block">
 							{{svg "octicon-clock" 16}}
 							{{.TotalTrackedTime | Sec2Hour}}
 					</div>
@@ -98,7 +98,7 @@
 					{{end}}
 					{{if ne .DeadlineUnix 0}}
 						<span class="due-date flex-text-inline" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.due_date"}}">
-							<span{{if .IsOverdue}} class="text red"{{end}}>
+							<span{{if .IsOverdue}} class="tw-text-red"{{end}}>
 								{{svg "octicon-calendar" 14}}
 								{{DateUtils.AbsoluteShort .DeadlineUnix}}
 							</span>
@@ -138,7 +138,7 @@
 			{{if or .Assignees .NumComments}}
 			<div class="flex-item-trailing">
 				{{if .Assignees}}
-				<div class="text grey">
+				<div class="tw-text-text-light">
 					{{range .Assignees}}
 						<a class="ui assignee tw-no-underline" href="{{.HomeLink}}" data-tooltip-content="{{.GetDisplayName}}">
 							{{ctx.AvatarUtils.Avatar . 20}}
@@ -147,7 +147,7 @@
 				</div>
 				{{end}}
 				{{if .NumComments}}
-				<div class="text grey">
+				<div class="tw-text-text-light">
 					<a class="tw-no-underline muted flex-text-block" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
 						{{svg "octicon-comment" 16}}{{.NumComments}}
 					</a>

templates/shared/repo/list.tmpl

@@ -12,9 +12,9 @@
 				<div class="flex-item-header">
 					<div class="flex-item-title">
 						{{if and $.ShowRepoOwnerOnList .Owner}}
-						<a class="text primary name" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/
+						<a class="tw-text-primary name" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/
 						{{end}}
-						<a class="text primary name" href="{{.Link}}">{{.Name}}</a>
+						<a class="tw-text-primary name" href="{{.Link}}">{{.Name}}</a>
 						<span class="label-list">
 							{{if .IsArchived}}
 								<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.archived"}}</span>

templates/shared/user/authorlink.tmpl

@@ -1 +1 @@
-<a class="muted text black tw-font-semibold"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>{{if .IsTypeBot}}&nbsp;<span class="ui basic label tw-p-1 tw-align-baseline">bot</span>{{end}}
+<a class="muted tw-text-text tw-font-semibold"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>{{if .IsTypeBot}}&nbsp;<span class="ui basic label tw-p-1 tw-align-baseline">bot</span>{{end}}

templates/shared/user/block_user_dialog.tmpl

@@ -6,7 +6,7 @@
 			<input type="hidden" name="action" value="block" />
 			<input type="hidden" name="blockee" class="modal-blockee" />
 			<div class="field">
-				<label>{{ctx.Locale.Tr "user.block.user_to_block"}}: <span class="text red modal-blockee-name"></span></label>
+				<label>{{ctx.Locale.Tr "user.block.user_to_block"}}: <span class="tw-text-red modal-blockee-name"></span></label>
 			</div>
 			<div class="field">
 				<label for="block-note">{{ctx.Locale.Tr "user.block.note.title"}}</label>

templates/shared/user/org_profile_avatar.tmpl

@@ -4,7 +4,7 @@
 			<div class="column">
 				<div class="ui header tw-flex tw-items-center tw-break-anywhere">
 					{{ctx.AvatarUtils.Avatar . 100}}
-					<span class="text grey"><a class="muted" href="{{.HomeLink}}">{{.DisplayName}}</a></span>
+					<span class="tw-text-text-light"><a class="muted" href="{{.HomeLink}}">{{.DisplayName}}</a></span>
 					<span class="org-visibility">
 						{{if .Visibility.IsLimited}}<div class="ui medium basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
 						{{if .Visibility.IsPrivate}}<div class="ui medium basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}

templates/shared/user/profile_big_avatar.tmpl

@@ -21,16 +21,16 @@
 		<div class="tw-mt-2">
 			<a class="muted" href="{{.ContextUser.HomeLink}}?tab=followers">{{svg "octicon-person" 18 "tw-mr-1"}}{{.NumFollowers}} {{ctx.Locale.Tr "user.followers"}}</a> · <a class="muted" href="{{.ContextUser.HomeLink}}?tab=following">{{.NumFollowing}} {{ctx.Locale.Tr "user.following"}}</a>
 			{{if .EnableFeed}}
-				<a href="{{.ContextUser.HomeLink}}.rss"><i class="ui text grey tw-ml-2" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</i></a>
+				<a href="{{.ContextUser.HomeLink}}.rss"><i class="ui tw-text-text-light tw-ml-2" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</i></a>
 			{{end}}
 		</div>
 	</div>
 	<div class="extra content tw-break-anywhere">
 		<ul>
 			{{if .UserBlocking}}
-				<li class="text red">{{svg "octicon-circle-slash"}} {{ctx.Locale.Tr "user.block.blocked"}}</li>
+				<li class="tw-text-red">{{svg "octicon-circle-slash"}} {{ctx.Locale.Tr "user.block.blocked"}}</li>
 				{{if .UserBlocking.Note}}
-					<li class="text small red">{{ctx.Locale.Tr "user.block.note"}}: {{.UserBlocking.Note}}</li>
+					<li class="tw-text-xs tw-text-red">{{ctx.Locale.Tr "user.block.note"}}: {{.UserBlocking.Note}}</li>
 				{{end}}
 			{{end}}
 			{{if .ContextUser.Location}}

templates/user/dashboard/feeds.tmpl

@@ -93,7 +93,7 @@
 							<div class="flex-text-block">
 								<img loading="lazy" alt class="ui avatar" src="{{$push.AvatarLink ctx .AuthorEmail}}" title="{{.AuthorName}}" width="16" height="16">
 								<a class="ui sha label" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
-								<span class="text truncate">
+								<span class="tw-inline-block tw-truncate">
 									{{ctx.RenderUtils.RenderCommitMessage .Message $repo}}
 								</span>
 							</div>
@@ -103,26 +103,26 @@
 						<a href="{{AppSubUrl}}/{{$push.CompareURL}}">{{ctx.Locale.Tr "action.compare_commits" $push.Len}} »</a>
 					{{end}}
 				{{else if .GetOpType.InActions "create_issue"}}
-					<span class="text truncate issue title">{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}</span>
+					<span class="tw-inline-block tw-truncate issue title">{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}</span>
 				{{else if .GetOpType.InActions "create_pull_request"}}
-					<span class="text truncate issue title">{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}</span>
+					<span class="tw-inline-block tw-truncate issue title">{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}</span>
 				{{else if .GetOpType.InActions "comment_issue" "approve_pull_request" "reject_pull_request" "comment_pull"}}
-					<a href="{{.GetCommentLink ctx}}" class="text truncate issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
+					<a href="{{.GetCommentLink ctx}}" class="tw-inline-block tw-truncate issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
 					{{$comment := index .GetIssueInfos 1}}
 					{{if $comment}}
 						<div class="render-content markup tw-text-14">{{ctx.RenderUtils.MarkdownToHtml $comment}}</div>
 					{{end}}
 				{{else if .GetOpType.InActions "merge_pull_request"}}
-					<div class="flex-item-body text black">{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}</div>
+					<div class="flex-item-body tw-text-text">{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}</div>
 				{{else if .GetOpType.InActions "close_issue" "reopen_issue" "close_pull_request" "reopen_pull_request"}}
-					<span class="text truncate issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</span>
+					<span class="tw-inline-block tw-truncate issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</span>
 				{{else if .GetOpType.InActions "pull_review_dismissed"}}
-				<div class="flex-item-body text black">{{ctx.Locale.Tr "action.review_dismissed_reason"}}</div>
+				<div class="flex-item-body tw-text-text">{{ctx.Locale.Tr "action.review_dismissed_reason"}}</div>
-				<div class="flex-item-body text black">{{index .GetIssueInfos 2 | ctx.RenderUtils.RenderEmoji}}</div>
+				<div class="flex-item-body tw-text-text">{{index .GetIssueInfos 2 | ctx.RenderUtils.RenderEmoji}}</div>
 				{{end}}
 			</div>
 			<div class="flex-item-trailing">
-				{{svg (printf "octicon-%s" (ActionIcon .GetOpType)) 32 "text grey tw-mr-1"}}
+				{{svg (printf "octicon-%s" (ActionIcon .GetOpType)) 32 "tw-text-text-light tw-mr-1"}}
 			</div>
 		</div>
 	{{end}}

templates/user/dashboard/milestones.tmpl

@@ -26,7 +26,7 @@
 										{{- end -}}
 									{{- end -}}
 								]&sort={{$.SortType}}&state={{$.State}}&q={{$.Keyword}}" title="{{.FullName}}">
-								<span class="text truncate">{{$Repo.FullName}}</span>
+								<span class="tw-inline-block tw-truncate tw-w-3/4">{{$Repo.FullName}}</span>
 								<div class="ui {{if $.IsShowClosed}}red{{else}}green{{end}} label">{{index $.Counts $Repo.ID}}</div>
 							</a>
 						{{end}}
@@ -116,7 +116,7 @@
 											{{ctx.Locale.Tr "repo.milestones.closed" $closedDate}}
 										{{else}}
 											{{if .DeadlineString}}
-												<span class="flex-text-inline {{if .IsOverdue}}text red{{end}}">
+												<span class="flex-text-inline {{if .IsOverdue}}tw-text-red{{end}}">
 													{{svg "octicon-calendar" 14}}
 													{{DateUtils.AbsoluteShort (.DeadlineString|DateUtils.ParseLegacy)}}
 												</span>

templates/user/notification/notification_div.tmpl

@@ -28,14 +28,14 @@
 						{{if $one.Issue}}
 							{{template "shared/issueicon" $one.Issue}}
 						{{else}}
-							{{svg "octicon-repo" 16 "text grey"}}
+							{{svg "octicon-repo" 16 "tw-text-text-light"}}
 						{{end}}
 					</div>
 					<a class="notifications-link silenced tw-flex-1" href="{{$one.Link ctx}}">
 						<div class="flex-text-block tw-text-[0.95em]">
-							{{$one.Repository.FullName}} {{if $one.Issue}}<span class="text light-3">#{{$one.Issue.Index}}</span>{{end}}
+							{{$one.Repository.FullName}} {{if $one.Issue}}<span class="tw-text-text-light-3">#{{$one.Issue.Index}}</span>{{end}}
 							{{if eq $one.Status $statusPinned}}
-								{{svg "octicon-pin" 13 "text blue"}}
+								{{svg "octicon-pin" 13 "tw-text-blue"}}
 							{{end}}
 						</div>
 						<div class="tw-text-16 tw-py-0.5">

templates/user/settings/applications.tmpl

@@ -11,7 +11,7 @@
 				{{range .Tokens}}
 					<div class="flex-item">
 						<div class="flex-item-leading">
-							<span class="text {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.token_state_desc"}}"{{end}}>
+							<span class="{{if .HasRecentActivity}}tw-text-green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.token_state_desc"}}"{{end}}>
 								{{svg "fontawesome-send" 32}}
 							</span>
 						</div>
@@ -36,7 +36,7 @@
 								</ul>
 							</details>
 							<div class="flex-item-body">
-								<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} — {{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="text green"{{end}}>{{DateUtils.AbsoluteShort .UpdatedUnix}}</span>{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}}</i>
+								<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} — {{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="tw-text-green"{{end}}>{{DateUtils.AbsoluteShort .UpdatedUnix}}</span>{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}}</i>
 							</div>
 						</div>
 						<div class="flex-item-trailing">

templates/user/settings/keys_gpg.tmpl

@@ -48,7 +48,7 @@
 		{{range .GPGKeys}}
 			<div class="flex-item">
 				<div class="flex-item-leading">
-					<span class="text {{if or .ExpiredUnix.IsZero ($.PageStartTime.Before .ExpiredUnix.AsTime)}}green{{end}}">{{svg "octicon-key" 32}}</span>
+					<span class="{{if or .ExpiredUnix.IsZero ($.PageStartTime.Before .ExpiredUnix.AsTime)}}tw-text-green{{end}}">{{svg "octicon-key" 32}}</span>
 				</div>
 				<div class="flex-item-main">
 					{{if .Verified}}

templates/user/settings/keys_principal.tmpl

@@ -17,7 +17,7 @@
 			{{range .Principals}}
 				<div class="flex-item">
 					<div class="flex-item-leading">
-						<span class="text {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.principal_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
+						<span class="{{if .HasRecentActivity}}tw-text-green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.principal_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
 					</div>
 					<div class="flex-item-main">
 						<div class="flex-item-title">{{.Name}}</div>

templates/user/settings/keys_ssh.tmpl

@@ -41,7 +41,7 @@
 		{{range $index, $key := .Keys}}
 			<div class="flex-item">
 				<div class="flex-item-leading">
-					<span class="text {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
+					<span class="{{if .HasRecentActivity}}tw-text-green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
 				</div>
 				<div class="flex-item-main">
 						{{if .Verified}}
@@ -52,7 +52,7 @@
 								{{.Fingerprint}}
 						</div>
 						<div class="flex-item-body">
-								<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} —	{{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="text green"{{end}}>{{DateUtils.AbsoluteShort .UpdatedUnix}}</span>{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}}</i>
+								<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} —	{{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="tw-text-green"{{end}}>{{DateUtils.AbsoluteShort .UpdatedUnix}}</span>{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}}</i>
 						</div>
 				</div>
 				<div class="flex-item-trailing">

templates/user/settings/profile.tmpl

@@ -8,19 +8,19 @@
 			<form class="ui form" action="{{.Link}}" method="post">
 				<div class="required field {{if .Err_Name}}error{{end}}">
 					<label for="username">{{ctx.Locale.Tr "username"}}
-						<span class="text red tw-hidden" id="name-change-prompt"> {{ctx.Locale.Tr "settings.change_username_prompt"}}</span>
+						<span class="tw-text-red tw-hidden" id="name-change-prompt"> {{ctx.Locale.Tr "settings.change_username_prompt"}}</span>
-						<span class="text red tw-hidden" id="name-change-redirect-prompt"> {{ctx.Locale.Tr "settings.change_username_redirect_prompt"}}</span>
+						<span class="tw-text-red tw-hidden" id="name-change-redirect-prompt"> {{ctx.Locale.Tr "settings.change_username_redirect_prompt"}}</span>
 					</label>
 					<input id="username" name="name" value="{{.SignedUser.Name}}" data-name="{{.SignedUser.Name}}" required {{if or (not .SignedUser.IsLocal) ($.UserDisabledFeatures.Contains "change_username") .IsReverseProxy}}disabled{{end}} maxlength="40">
 					{{if or (not .SignedUser.IsLocal) ($.UserDisabledFeatures.Contains "change_username") .IsReverseProxy}}
-					<p class="help text blue">{{ctx.Locale.Tr "settings.password_username_disabled"}}</p>
+					<p class="help tw-text-blue">{{ctx.Locale.Tr "settings.password_username_disabled"}}</p>
 					{{end}}
 				</div>
 				<div class="field {{if .Err_FullName}}error{{end}}">
 					<label for="full_name">{{ctx.Locale.Tr "settings.full_name"}}</label>
 					<input id="full_name" name="full_name" value="{{.SignedUser.FullName}}" {{if ($.UserDisabledFeatures.Contains "change_full_name")}}disabled{{end}} maxlength="100">
 					{{if ($.UserDisabledFeatures.Contains "change_full_name")}}
-					<p class="help text blue">{{ctx.Locale.Tr "settings.password_full_name_disabled"}}</p>
+					<p class="help tw-text-blue">{{ctx.Locale.Tr "settings.password_full_name_disabled"}}</p>
 					{{end}}
 				</div>
 				<div class="field {{if .Err_Email}}error{{end}}">

templates/user/settings/repos.tmpl

@@ -13,7 +13,7 @@
 								<div class="content">
 									{{if $repo}}
 										{{if $repo.IsPrivate}}
-											<span class="text gold icon">{{svg "octicon-lock"}}</span>
+											<span class="tw-text-gold icon">{{svg "octicon-lock"}}</span>
 										{{else if $repo.IsFork}}
 											<span class="icon">{{svg "octicon-repo-forked"}}</span>
 										{{else if $repo.IsMirror}}
@@ -24,7 +24,7 @@
 											<span class="icon">{{svg "octicon-repo"}}</span>
 										{{end}}
 										<a class="muted name" href="{{$repo.Link}}">{{$repo.OwnerName}}/{{$repo.Name}}</a>
-										<span class="text light-3" {{if not (eq $repo.Size 0)}} data-tooltip-content="{{$repo.SizeDetailsString}}"{{end}}>{{FileSize $repo.Size}}</span>
+										<span class="tw-text-text-light-3" {{if not (eq $repo.Size 0)}} data-tooltip-content="{{$repo.SizeDetailsString}}"{{end}}>{{FileSize $repo.Size}}</span>
 										{{if $repo.IsFork}}
 											{{ctx.Locale.Tr "repo.forked_from"}}
 											<span><a href="{{$repo.BaseRepo.Link}}">{{$repo.BaseRepo.OwnerName}}/{{$repo.BaseRepo.Name}}</a></span>
@@ -84,7 +84,7 @@
 							<div class="item">
 								<div class="content flex-text-block">
 									{{if .IsPrivate}}
-										{{svg "octicon-lock" 16 "text gold"}}
+										{{svg "octicon-lock" 16 "tw-text-gold"}}
 									{{else if .IsFork}}
 										{{svg "octicon-repo-forked"}}
 									{{else if .IsMirror}}

templates/user/settings/security/accountlinks.tmpl

@@ -36,7 +36,7 @@
 						{{$loginSource.Name}}
 					</span>
 					{{if $loginSource.IsActive}}
-					<span class="flex-text-body text primary">{{ctx.Locale.Tr "repo.settings.active"}}</span>
+					<span class="flex-text-body tw-text-primary">{{ctx.Locale.Tr "repo.settings.active"}}</span>
 					{{end}}
 				</div>
 				<div class="flex-item-trailing">

tests/integration/repo_commits_test.go

@@ -145,11 +145,11 @@ func TestRepoCommitsWithStatus(t *testing.T) {
 		testRepoCommitsWithStatus(t, "/api/v1/repos/user2/repo1/commits/v1.1/statuses", "/api/v1/repos/user2/repo1/commits/v1.1/status", state)
 	}
 
-	t.Run("pending", func(t *testing.T) { testRefMaster(t, "pending", "octicon-dot-fill", "yellow") })
+	t.Run("pending", func(t *testing.T) { testRefMaster(t, "pending", "octicon-dot-fill", "tw-text-yellow") })
-	t.Run("success", func(t *testing.T) { testRefMaster(t, "success", "octicon-check", "green") })
+	t.Run("success", func(t *testing.T) { testRefMaster(t, "success", "octicon-check", "tw-text-green") })
-	t.Run("error", func(t *testing.T) { testRefMaster(t, "error", "gitea-exclamation", "red") })
+	t.Run("error", func(t *testing.T) { testRefMaster(t, "error", "gitea-exclamation", "tw-text-red") })
-	t.Run("failure", func(t *testing.T) { testRefMaster(t, "failure", "octicon-x", "red") })
+	t.Run("failure", func(t *testing.T) { testRefMaster(t, "failure", "octicon-x", "tw-text-red") })
-	t.Run("warning", func(t *testing.T) { testRefMaster(t, "warning", "gitea-exclamation", "yellow") })
+	t.Run("warning", func(t *testing.T) { testRefMaster(t, "warning", "gitea-exclamation", "tw-text-yellow") })
 	t.Run("BranchWithSlash", func(t *testing.T) {
 		_ = db.TruncateBeans(t.Context(), &git_model.CommitStatus{})
 

web_src/css/base.css

@@ -553,67 +553,6 @@ img.ui.avatar,
   margin-top: calc(var(--page-spacing) - 1rem);
 }
 
-.text.primary {
-  color: var(--color-primary) !important;
-}
-
-.text.red {
-  color: var(--color-red) !important;
-}
-
-.text.orange {
-  color: var(--color-orange) !important;
-}
-
-.text.yellow {
-  color: var(--color-yellow) !important;
-}
-
-.text.green {
-  color: var(--color-green) !important;
-}
-
-.text.blue {
-  color: var(--color-blue) !important;
-}
-
-.text.purple {
-  color: var(--color-purple) !important;
-}
-
-/* it is different from tw-text-black: this one changes in dark theme */
-.text.black {
-  color: var(--color-text) !important;
-}
-
-.text.grey {
-  color: var(--color-text-light) !important;
-}
-
-.text.light {
-  color: var(--color-text-light) !important;
-}
-
-.text.light-2 {
-  color: var(--color-text-light-2) !important;
-}
-
-.text.light-3 {
-  color: var(--color-text-light-3) !important;
-}
-
-.text.light.grey {
-  color: var(--color-grey-light) !important;
-}
-
-.text.gold {
-  color: var(--color-gold) !important;
-}
-
-.text.small {
-  font-size: 0.75em;
-}
-
 /* popover box shadows */
 .ui.dropdown .menu,
 .ui.upward.dropdown > .menu,
@@ -628,13 +567,6 @@ img.ui.avatar,
   box-shadow: 0 6px 18px var(--color-shadow) !important;
 }
 
-.ui .text.truncate {
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline-block;
-}
-
 .ui .message.flash-message {
   text-align: center;
 }

web_src/css/dashboard.css

@@ -22,11 +22,6 @@
   justify-content: space-between;
 }
 
-.dashboard.feeds .filter.menu .item .text.truncate,
-.dashboard.issues .filter.menu .item .text.truncate {
-  width: 75%;
-}
-
 /* Sort */
 .dashboard.feeds .filter.menu .jump.item,
 .dashboard.issues .filter.menu .jump.item {

web_src/js/components/ActionRunStatus.vue

@@ -19,12 +19,12 @@ withDefaults(defineProps<{
 
 <template>
   <span :data-tooltip-content="localeStatus ?? status" v-if="status">
-    <SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class="className" v-if="status === 'success'"/>
+    <SvgIcon name="octicon-check-circle-fill" class="tw-text-green" :size="size" :class="className" v-if="status === 'success'"/>
-    <SvgIcon name="octicon-skip" class="text grey" :size="size" :class="className" v-else-if="status === 'skipped'"/>
+    <SvgIcon name="octicon-skip" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'skipped'"/>
-    <SvgIcon name="octicon-stop" class="text grey" :size="size" :class="className" v-else-if="status === 'cancelled'"/>
+    <SvgIcon name="octicon-stop" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'cancelled'"/>
-    <SvgIcon name="octicon-circle" class="text grey" :size="size" :class="className" v-else-if="status === 'waiting'"/>
+    <SvgIcon name="octicon-circle" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'waiting'"/>
-    <SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class="className" v-else-if="status === 'blocked'"/>
+    <SvgIcon name="octicon-blocked" class="tw-text-yellow" :size="size" :class="className" v-else-if="status === 'blocked'"/>
-    <SvgIcon name="gitea-running" class="text yellow" :size="size" :class="'rotate-clockwise ' + className" v-else-if="status === 'running'"/>
+    <SvgIcon name="gitea-running" class="tw-text-yellow" :size="size" :class="'rotate-clockwise ' + className" v-else-if="status === 'running'"/>
-    <SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else/><!-- failure, unknown -->
+    <SvgIcon name="octicon-x-circle-fill" class="tw-text-red" :size="size" v-else/><!-- failure, unknown -->
   </span>
 </template>

web_src/js/components/ContextPopup.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 import {GET} from '../modules/fetch.ts';
-import {getIssueColor, getIssueIcon} from '../features/issue.ts';
+import {getIssueColorClass, getIssueIcon} from '../features/issue.ts';
 import {computed, onMounted, shallowRef} from 'vue';
 import type {Issue} from '../types.ts';
 
@@ -53,7 +53,7 @@ onMounted(async () => {
         on {{ createdAt }}
       </div>
       <div class="flex-text-block">
-        <svg-icon :name="getIssueIcon(issue)" :class="['text', getIssueColor(issue)]"/>
+        <svg-icon :name="getIssueIcon(issue)" :class="getIssueColorClass(issue)"/>
         <span class="issue-title tw-font-semibold tw-break-anywhere">
           {{ issue.title }}
           <span class="index">#{{ issue.number }}</span>

web_src/js/components/DashboardRepoList.vue

@@ -17,12 +17,12 @@ type CommitStatusMap = {
 
 // make sure this matches templates/repo/commit_status.tmpl
 const commitStatus: CommitStatusMap = {
-  pending: {name: 'octicon-dot-fill', color: 'yellow'},
+  pending: {name: 'octicon-dot-fill', color: 'tw-text-yellow'},
-  success: {name: 'octicon-check', color: 'green'},
+  success: {name: 'octicon-check', color: 'tw-text-green'},
-  error: {name: 'gitea-exclamation', color: 'red'},
+  error: {name: 'gitea-exclamation', color: 'tw-text-red'},
-  failure: {name: 'octicon-x', color: 'red'},
+  failure: {name: 'octicon-x', color: 'tw-text-red'},
-  warning: {name: 'gitea-exclamation', color: 'yellow'},
+  warning: {name: 'gitea-exclamation', color: 'tw-text-yellow'},
-  skipped: {name: 'octicon-skip', color: 'grey'},
+  skipped: {name: 'octicon-skip', color: 'tw-text-text-light'},
 };
 
 export default defineComponent({
@@ -430,14 +430,14 @@ export default defineComponent({
           <li class="tw-flex tw-items-center tw-py-2" v-for="(repo, index) in repos" :class="{'active': index === activeIndex}" :key="repo.id">
             <a class="repo-list-link muted" :href="repo.link">
               <svg-icon :name="repoIcon(repo)" :size="16" class="repo-list-icon"/>
-              <div class="text truncate">{{ repo.full_name }}</div>
+              <div class="tw-inline-block tw-truncate">{{ repo.full_name }}</div>
               <div v-if="repo.archived">
                 <svg-icon name="octicon-archive" :size="16"/>
               </div>
             </a>
             <a class="tw-flex tw-items-center" v-if="repo.latest_commit_status_state" :href="repo.latest_commit_status_state_link || null" :data-tooltip-content="repo.locale_latest_commit_status_state">
               <!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl -->
-              <svg-icon :name="statusIcon(repo.latest_commit_status_state)" :class="'tw-ml-2 commit-status icon text ' + statusColor(repo.latest_commit_status_state)" :size="16"/>
+              <svg-icon :name="statusIcon(repo.latest_commit_status_state)" :class="'tw-ml-2 commit-status icon ' + statusColor(repo.latest_commit_status_state)" :size="16"/>
             </a>
           </li>
         </ul>
@@ -494,14 +494,14 @@ export default defineComponent({
           <li class="tw-flex tw-items-center tw-py-2" v-for="org in organizations" :key="org.name">
             <a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)">
               <svg-icon name="octicon-organization" :size="16" class="repo-list-icon"/>
-              <div class="text truncate">{{ org.full_name ? `${org.full_name} (${org.name})` : org.name }}</div>
+              <div class="tw-inline-block tw-truncate">{{ org.full_name ? `${org.full_name} (${org.name})` : org.name }}</div>
               <div><!-- div to prevent underline of label on hover -->
                 <span class="ui tiny basic label" v-if="org.org_visibility !== 'public'">
                   {{ org.org_visibility === 'limited' ? textOrgVisibilityLimited: textOrgVisibilityPrivate }}
                 </span>
               </div>
             </a>
-            <div class="text light grey tw-flex tw-items-center tw-ml-2">
+            <div class="tw-text-grey-light tw-flex tw-items-center tw-ml-2">
               {{ org.num_repos }}
               <svg-icon name="octicon-repo" :size="16" class="tw-ml-1 tw-mt-0.5"/>
             </div>

web_src/js/components/DiffCommitSelector.vue

@@ -236,7 +236,7 @@ export default defineComponent({
         <div class="gt-ellipsis">
           {{ locale.show_all_commits }}
         </div>
-        <div class="gt-ellipsis text light-2 tw-mb-0">
+        <div class="gt-ellipsis tw-text-text-light-2 tw-mb-0">
           {{ locale.stats_num_commits }}
         </div>
       </div>
@@ -251,11 +251,11 @@ export default defineComponent({
         <div class="gt-ellipsis">
           {{ locale.show_changes_since_your_last_review }}
         </div>
-        <div class="gt-ellipsis text light-2">
+        <div class="gt-ellipsis tw-text-text-light-2">
           {{ commitsSinceLastReview }} commits
         </div>
       </div>
-      <span v-if="!isLoading" class="info text light-2">{{ locale.select_commit_hold_shift_for_range }}</span>
+      <span v-if="!isLoading" class="info tw-text-text-light-2">{{ locale.select_commit_hold_shift_for_range }}</span>
       <template v-for="(commit, idx) in commits" :key="commit.id">
         <div
           class="item" role="menuitem"
@@ -273,7 +273,7 @@ export default defineComponent({
             <div class="gt-ellipsis commit-list-summary">
               {{ commit.summary }}
             </div>
-            <div class="gt-ellipsis text light-2">
+            <div class="gt-ellipsis tw-text-text-light-2">
               {{ commit.committer_or_author_name }}
               <span class="text right">
                 <!-- TODO: make this respect the PreferredTimestampTense setting -->

web_src/js/components/DiffFileTreeItem.vue

@@ -12,13 +12,13 @@ const collapsed = shallowRef(props.item.IsViewed);
 
 function getIconForDiffStatus(pType: DiffStatus) {
   const diffTypes: Record<DiffStatus, { name: SvgName, classes: Array<string> }> = {
-    '': {name: 'octicon-blocked', classes: ['text', 'red']}, // unknown case
+    '': {name: 'octicon-blocked', classes: ['tw-text-red']}, // unknown case
-    'added': {name: 'octicon-diff-added', classes: ['text', 'green']},
+    'added': {name: 'octicon-diff-added', classes: ['tw-text-green']},
-    'modified': {name: 'octicon-diff-modified', classes: ['text', 'yellow']},
+    'modified': {name: 'octicon-diff-modified', classes: ['tw-text-yellow']},
-    'deleted': {name: 'octicon-diff-removed', classes: ['text', 'red']},
+    'deleted': {name: 'octicon-diff-removed', classes: ['tw-text-red']},
-    'renamed': {name: 'octicon-diff-renamed', classes: ['text', 'teal']},
+    'renamed': {name: 'octicon-diff-renamed', classes: ['tw-text-teal']},
-    'copied': {name: 'octicon-diff-renamed', classes: ['text', 'green']},
+    'copied': {name: 'octicon-diff-renamed', classes: ['tw-text-green']},
-    'typechange': {name: 'octicon-diff-modified', classes: ['text', 'green']}, // there is no octicon for copied, so renamed should be ok
+    'typechange': {name: 'octicon-diff-modified', classes: ['tw-text-green']}, // there is no octicon for copied, so renamed should be ok
   };
   return diffTypes[pType] ?? diffTypes[''];
 }

web_src/js/components/RepoActionView.vue

@@ -566,17 +566,17 @@ export default defineComponent({
               <li class="job-artifacts-item">
                 <template v-if="artifact.status !== 'expired'">
                   <a class="flex-text-inline" target="_blank" :href="run.link+'/artifacts/'+artifact.name">
-                    <SvgIcon name="octicon-file" class="text black"/>
+                    <SvgIcon name="octicon-file" class="tw-text-text"/>
                     <span class="gt-ellipsis">{{ artifact.name }}</span>
                   </a>
                   <a v-if="run.canDeleteArtifact" @click="deleteArtifact(artifact.name)">
-                    <SvgIcon name="octicon-trash" class="text black"/>
+                    <SvgIcon name="octicon-trash" class="tw-text-text"/>
                   </a>
                 </template>
-                <span v-else class="flex-text-inline text light grey">
+                <span v-else class="flex-text-inline tw-text-grey-light">
                   <SvgIcon name="octicon-file"/>
                   <span class="gt-ellipsis">{{ artifact.name }}</span>
-                  <span class="ui label text light grey tw-flex-shrink-0">{{ locale.artifactExpired }}</span>
+                  <span class="ui label tw-text-grey-light tw-flex-shrink-0">{{ locale.artifactExpired }}</span>
                 </span>
               </li>
             </template>

web_src/js/components/RepoBranchTagSelector.vue

@@ -267,7 +267,7 @@ export default defineComponent({
             <svg-icon name="octicon-git-branch" class="tw-mr-1"/>
             <span v-text="textCreateBranch.replace('%s', searchTerm)"/>
           </div>
-          <div class="text small">
+          <div class="tw-text-xs">
             {{ textCreateRefFrom.replace('%s', currentRefShortName) }}
           </div>
           <form ref="createNewRefForm" method="post" :action="createNewRefFormActionUrl">

web_src/js/components/RepoCodeFrequency.vue

@@ -153,7 +153,7 @@ const options: ChartOptions<'line'> = {
           <SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
           {{ locale.loadingInfo }}
         </div>
-        <div v-else class="text red">
+        <div v-else class="tw-text-red">
           <SvgIcon name="octicon-x-circle-fill"/>
           {{ errorText }}
         </div>

web_src/js/components/RepoContributors.vue

@@ -392,7 +392,7 @@ export default defineComponent({
           <SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
           {{ locale.loadingInfo }}
         </div>
-        <div v-else class="text red">
+        <div v-else class="tw-text-red">
           <SvgIcon name="octicon-x-circle-fill"/>
           {{ errorText }}
         </div>
@@ -424,8 +424,8 @@ export default defineComponent({
                   {{ contributor.total_commits.toLocaleString() }} {{ locale.contributionType.commits }}
                 </a>
               </strong>
-              <strong v-if="contributor.total_additions" class="text green">{{ contributor.total_additions.toLocaleString() }}++ </strong>
+              <strong v-if="contributor.total_additions" class="tw-text-green">{{ contributor.total_additions.toLocaleString() }}++ </strong>
-              <strong v-if="contributor.total_deletions" class="text red">
+              <strong v-if="contributor.total_deletions" class="tw-text-red">
                 {{ contributor.total_deletions.toLocaleString() }}--</strong>
             </p>
           </div>

web_src/js/components/RepoRecentCommits.vue

@@ -131,7 +131,7 @@ const options: ChartOptions<'bar'> = {
           <SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
           {{ locale.loadingInfo }}
         </div>
-        <div v-else class="text red">
+        <div v-else class="tw-text-red">
           <SvgIcon name="octicon-x-circle-fill"/>
           {{ errorText }}
         </div>

web_src/js/features/comp/TextExpander.ts

@@ -3,7 +3,7 @@ import {emojiString} from '../emoji.ts';
 import {svg} from '../../svg.ts';
 import {parseIssueHref, parseRepoOwnerPathInfo} from '../../utils.ts';
 import {createElementFromAttrs, createElementFromHTML} from '../../utils/dom.ts';
-import {getIssueColor, getIssueIcon} from '../issue.ts';
+import {getIssueColorClass, getIssueIcon} from '../issue.ts';
 import {debounce} from 'perfect-debounce';
 import type TextExpanderElement from '@github/text-expander-element';
 import type {TextExpanderChangeEvent, TextExpanderResult} from '@github/text-expander-element';
@@ -25,7 +25,7 @@ async function fetchIssueSuggestions(key: string, text: string): Promise<TextExp
   for (const issue of matches) {
     const li = createElementFromAttrs(
       'li', {role: 'option', class: 'tw-flex tw-gap-2', 'data-value': `${key}${issue.number}`},
-      createElementFromHTML(svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)])),
+      createElementFromHTML(svg(getIssueIcon(issue), 16, [getIssueColorClass(issue)])),
       createElementFromAttrs('span', null, `#${issue.number}`),
       createElementFromAttrs('span', null, issue.title),
     );

web_src/js/features/issue.ts

@@ -1,6 +1,6 @@
 import type {Issue} from '../types.ts';
 
-// the getIssueIcon/getIssueColor logic should be kept the same as "templates/shared/issueicon.tmpl"
+// the getIssueIcon/getIssueColorClass logic should be kept the same as "templates/shared/issueicon.tmpl"
 
 export function getIssueIcon(issue: Issue) {
   if (issue.pull_request) {
@@ -21,21 +21,21 @@ export function getIssueIcon(issue: Issue) {
   return 'octicon-issue-closed'; // Closed Issue
 }
 
-export function getIssueColor(issue: Issue) {
+export function getIssueColorClass(issue: Issue) {
   if (issue.pull_request) {
     if (issue.state === 'open') {
       if (issue.pull_request.draft) {
-        return 'grey'; // WIP PR
+        return 'tw-text-text-light'; // WIP PR
       }
-      return 'green'; // Open PR
+      return 'tw-text-green'; // Open PR
     } else if (issue.pull_request.merged) {
-      return 'purple'; // Merged PR
+      return 'tw-text-purple'; // Merged PR
     }
-    return 'red'; // Closed PR
+    return 'tw-text-red'; // Closed PR
   }
 
   if (issue.state === 'open') {
-    return 'green'; // Open Issue
+    return 'tw-text-green'; // Open Issue
   }
-  return 'red'; // Closed Issue
+  return 'tw-text-red'; // Closed Issue
 }

web_src/js/features/repo-issue-content.ts

@@ -20,7 +20,7 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
       ${i18nTextOptions}
       ${svg('octicon-triangle-down', 14, 'dropdown icon')}
       <div class="menu">
-        <div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
+        <div class="item tw-text-red" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
       </div>
     </div>
   </div>