From 66feafb3de2313c002c8041c817fb82dae7b95b2 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 23 Mar 2024 22:22:15 +0100
Subject: [PATCH] Migrate font-size helpers to tailwind (#30029)
Migrate `gt-font-*` to `tw-text-*` All tailwind-original class names are
also available and render like they would with 16px root font size.
We currently have root font size at 14px, but I would like to eventually
migrate us to 16px so that the tailwind docs apply to us unchangend and
because 16px is the recommended root font size for web pages in general.
Also the number 16 is much better dividable than 14 so will result in
more integers.
(cherry picked from commit 75e2e5c736687ae1897cf760a432b572feed56f5)
Conflicts:
templates/repo/header.tmpl
trivial context conflict
---
tailwind.config.js | 18 ++++++++++++++++++
templates/org/header.tmpl | 2 +-
templates/repo/header.tmpl | 2 +-
templates/repo/home.tmpl | 4 ++--
templates/user/dashboard/feeds.tmpl | 2 +-
.../user/notification/notification_div.tmpl | 4 ++--
web_src/css/helpers.css | 8 --------
web_src/js/components/RepoContributors.vue | 2 +-
8 files changed, 26 insertions(+), 16 deletions(-)
diff --git a/tailwind.config.js b/tailwind.config.js
index 01fc9ee24c..0754ab3631 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -73,5 +73,23 @@ export default {
semibold: 'var(--font-weight-semibold)',
bold: 'var(--font-weight-bold)',
},
+ fontSize: { // not using `rem` units because our root is currently 14px
+ 'xs': '12px',
+ 'sm': '14px',
+ 'base': '16px',
+ 'lg': '18px',
+ 'xl': '20px',
+ '2xl': '24px',
+ '3xl': '30px',
+ '4xl': '36px',
+ '5xl': '48px',
+ '6xl': '60px',
+ '7xl': '72px',
+ '8xl': '96px',
+ '9xl': '128px',
+ ...Object.fromEntries(Array.from({length: 100}, (_, i) => {
+ return [`${i}`, `${i === 0 ? '0' : `${i}px`}`];
+ })),
+ },
},
};
diff --git a/templates/org/header.tmpl b/templates/org/header.tmpl
index 204ba7e3c1..81373aa75c 100644
--- a/templates/org/header.tmpl
+++ b/templates/org/header.tmpl
@@ -7,7 +7,7 @@
{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
</span>
- <span class="tw-flex tw-items-center gt-gap-2 tw-ml-auto gt-font-16 tw-whitespace-nowrap">
+ <span class="tw-flex tw-items-center gt-gap-2 tw-ml-auto tw-text-16 tw-whitespace-nowrap">
{{if .EnableFeed}}
<a class="ui basic label button gt-mr-0" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
{{svg "octicon-rss" 24}}
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index a5bfb5f25b..53ce17dbcc 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -5,7 +5,7 @@
<div class="flex-item tw-items-center">
<div class="flex-item-leading">{{template "repo/icon" .}}</div>
<div class="flex-item-main">
- <div class="flex-item-title gt-font-18">
+ <div class="flex-item-title tw-text-18">
<a class="muted tw-font-normal" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/
<a class="muted" href="{{$.RepoLink}}">{{.Name}}</a></div>
</div>
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 60be13b132..503e97a928 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -6,7 +6,7 @@
{{template "repo/code/recently_pushed_new_branches" .}}
{{if and (not .HideRepoInfo) (not .IsBlame)}}
<div class="ui repo-description gt-word-break">
- <div id="repo-desc" class="gt-font-16">
+ <div id="repo-desc" class="tw-text-16">
{{$description := .Repository.DescriptionHTML $.Context}}
{{if $description}}<span class="description">{{$description | RenderCodeBlock}}</span>{{else if .IsRepositoryAdmin}}<span class="no-description text-italic">{{ctx.Locale.Tr "repo.no_desc"}}</span>{{end}}
<a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
@@ -29,7 +29,7 @@
</div>
<div class="tw-flex tw-items-center tw-flex-wrap gt-gap-2" id="repo-topics">
{{range .Topics}}<a class="ui repo-topic large label topic gt-m-0" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
- {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="btn interact-fg gt-font-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
+ {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="btn interact-fg tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
</div>
{{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl
index 382b0d4542..c58d7e22d7 100644
--- a/templates/user/dashboard/feeds.tmpl
+++ b/templates/user/dashboard/feeds.tmpl
@@ -107,7 +107,7 @@
<a href="{{.GetCommentLink ctx}}" class="text truncate issue title">{{(.GetIssueTitle ctx) | RenderEmoji $.Context | RenderCodeBlock}}</a>
{{$comment := index .GetIssueInfos 1}}
{{if $comment}}
- <div class="markup gt-font-14">{{RenderMarkdownToHtml ctx $comment}}</div>
+ <div class="markup tw-text-14">{{RenderMarkdownToHtml ctx $comment}}</div>
{{end}}
{{else if .GetOpType.InActions "merge_pull_request"}}
<div class="flex-item-body text black">{{index .GetIssueInfos 1}}</div>
diff --git a/templates/user/notification/notification_div.tmpl b/templates/user/notification/notification_div.tmpl
index 371da129ce..da5a920fd1 100644
--- a/templates/user/notification/notification_div.tmpl
+++ b/templates/user/notification/notification_div.tmpl
@@ -44,13 +44,13 @@
{{end}}
</div>
<a class="notifications-link tw-flex tw-flex-1 tw-flex-col silenced" href="{{.Link ctx}}">
- <div class="notifications-top-row gt-font-13">
+ <div class="notifications-top-row tw-text-13">
{{.Repository.FullName}} {{if .Issue}}<span class="text light-3">#{{.Issue.Index}}</span>{{end}}
{{if eq .Status 3}}
{{svg "octicon-pin" 13 "text blue gt-mt-1 gt-ml-2"}}
{{end}}
</div>
- <div class="notifications-bottom-row gt-font-16 gt-py-1">
+ <div class="notifications-bottom-row tw-text-16 gt-py-1">
<span class="issue-title">
{{if .Issue}}
{{.Issue.Title | RenderEmoji $.Context | RenderCodeBlock}}
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 346184f04b..848e17ebe7 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -163,14 +163,6 @@ Gitea's private styles use `g-` prefix.
.gt-gap-y-4 { row-gap: 1rem !important; }
.gt-gap-y-5 { row-gap: 2rem !important; }
-.gt-font-12 { font-size: 12px !important }
-.gt-font-13 { font-size: 13px !important }
-.gt-font-14 { font-size: 14px !important }
-.gt-font-15 { font-size: 15px !important }
-.gt-font-16 { font-size: 16px !important }
-.gt-font-17 { font-size: 17px !important }
-.gt-font-18 { font-size: 18px !important }
-
/*
gt-hidden must win all other "display: xxx !important" classes to get the chance to "hide" an element.
do not use:
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index adaf7f28f1..6de68a4aec 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -384,7 +384,7 @@ export default {
<h4 v-else class="contributor-name">
{{ contributor.name }}
</h4>
- <p class="gt-font-12 tw-flex gt-gap-2">
+ <p class="tw-text-12 tw-flex gt-gap-2">
<strong v-if="contributor.total_commits">{{ contributor.total_commits.toLocaleString() }} {{ locale.contributionType.commits }}</strong>
<strong v-if="contributor.total_additions" class="text green">{{ contributor.total_additions.toLocaleString() }}++ </strong>
<strong v-if="contributor.total_deletions" class="text red">