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>

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-skip" class="text grey" :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-circle" class="text grey" :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="gitea-running" class="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-check-circle-fill" class="tw-text-green" :size="size" :class="className" v-if="status === 'success'"/>
+    <SvgIcon name="octicon-skip" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'skipped'"/>
+    <SvgIcon name="octicon-stop" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'cancelled'"/>
+    <SvgIcon name="octicon-circle" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'waiting'"/>
+    <SvgIcon name="octicon-blocked" class="tw-text-yellow" :size="size" :class="className" v-else-if="status === 'blocked'"/>
+    <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="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'},
-  success: {name: 'octicon-check', color: 'green'},
-  error: {name: 'gitea-exclamation', color: 'red'},
-  failure: {name: 'octicon-x', color: 'red'},
-  warning: {name: 'gitea-exclamation', color: 'yellow'},
-  skipped: {name: 'octicon-skip', color: 'grey'},
+  pending: {name: 'octicon-dot-fill', color: 'tw-text-yellow'},
+  success: {name: 'octicon-check', color: 'tw-text-green'},
+  error: {name: 'gitea-exclamation', color: 'tw-text-red'},
+  failure: {name: 'octicon-x', color: 'tw-text-red'},
+  warning: {name: 'gitea-exclamation', color: 'tw-text-yellow'},
+  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
-    'added': {name: 'octicon-diff-added', classes: ['text', 'green']},
-    'modified': {name: 'octicon-diff-modified', classes: ['text', 'yellow']},
-    'deleted': {name: 'octicon-diff-removed', classes: ['text', 'red']},
-    'renamed': {name: 'octicon-diff-renamed', classes: ['text', 'teal']},
-    'copied': {name: 'octicon-diff-renamed', classes: ['text', 'green']},
-    'typechange': {name: 'octicon-diff-modified', classes: ['text', 'green']}, // there is no octicon for copied, so renamed should be ok
+    '': {name: 'octicon-blocked', classes: ['tw-text-red']}, // unknown case
+    'added': {name: 'octicon-diff-added', classes: ['tw-text-green']},
+    'modified': {name: 'octicon-diff-modified', classes: ['tw-text-yellow']},
+    'deleted': {name: 'octicon-diff-removed', classes: ['tw-text-red']},
+    'renamed': {name: 'octicon-diff-renamed', classes: ['tw-text-teal']},
+    'copied': {name: 'octicon-diff-renamed', classes: ['tw-text-green']},
+    '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_deletions" class="text red">
+              <strong v-if="contributor.total_additions" class="tw-text-green">{{ contributor.total_additions.toLocaleString() }}++ </strong>
+              <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>