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
This commit is contained in:
silverwind 2024-03-23 22:22:15 +01:00 committed by Earl Warren
parent eaac4af245
commit 66feafb3de
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
8 changed files with 26 additions and 16 deletions

View file

@ -73,5 +73,23 @@ export default {
semibold: 'var(--font-weight-semibold)', semibold: 'var(--font-weight-semibold)',
bold: 'var(--font-weight-bold)', 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`}`];
})),
},
}, },
}; };

View file

@ -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.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}} {{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
</span> </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}} {{if .EnableFeed}}
<a class="ui basic label button gt-mr-0" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}"> <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}} {{svg "octicon-rss" 24}}

View file

@ -5,7 +5,7 @@
<div class="flex-item tw-items-center"> <div class="flex-item tw-items-center">
<div class="flex-item-leading">{{template "repo/icon" .}}</div> <div class="flex-item-leading">{{template "repo/icon" .}}</div>
<div class="flex-item-main"> <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 tw-font-normal" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/
<a class="muted" href="{{$.RepoLink}}">{{.Name}}</a></div> <a class="muted" href="{{$.RepoLink}}">{{.Name}}</a></div>
</div> </div>

View file

@ -6,7 +6,7 @@
{{template "repo/code/recently_pushed_new_branches" .}} {{template "repo/code/recently_pushed_new_branches" .}}
{{if and (not .HideRepoInfo) (not .IsBlame)}} {{if and (not .HideRepoInfo) (not .IsBlame)}}
<div class="ui repo-description gt-word-break"> <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}} {{$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}} {{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> <a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
@ -29,7 +29,7 @@
</div> </div>
<div class="tw-flex tw-items-center tw-flex-wrap gt-gap-2" id="repo-topics"> <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}} {{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> </div>
{{end}} {{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}} {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}

View file

@ -107,7 +107,7 @@
<a href="{{.GetCommentLink ctx}}" class="text truncate issue title">{{(.GetIssueTitle ctx) | RenderEmoji $.Context | RenderCodeBlock}}</a> <a href="{{.GetCommentLink ctx}}" class="text truncate issue title">{{(.GetIssueTitle ctx) | RenderEmoji $.Context | RenderCodeBlock}}</a>
{{$comment := index .GetIssueInfos 1}} {{$comment := index .GetIssueInfos 1}}
{{if $comment}} {{if $comment}}
<div class="markup gt-font-14">{{RenderMarkdownToHtml ctx $comment}}</div> <div class="markup tw-text-14">{{RenderMarkdownToHtml ctx $comment}}</div>
{{end}} {{end}}
{{else if .GetOpType.InActions "merge_pull_request"}} {{else if .GetOpType.InActions "merge_pull_request"}}
<div class="flex-item-body text black">{{index .GetIssueInfos 1}}</div> <div class="flex-item-body text black">{{index .GetIssueInfos 1}}</div>

View file

@ -44,13 +44,13 @@
{{end}} {{end}}
</div> </div>
<a class="notifications-link tw-flex tw-flex-1 tw-flex-col silenced" href="{{.Link ctx}}"> <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}} {{.Repository.FullName}} {{if .Issue}}<span class="text light-3">#{{.Issue.Index}}</span>{{end}}
{{if eq .Status 3}} {{if eq .Status 3}}
{{svg "octicon-pin" 13 "text blue gt-mt-1 gt-ml-2"}} {{svg "octicon-pin" 13 "text blue gt-mt-1 gt-ml-2"}}
{{end}} {{end}}
</div> </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"> <span class="issue-title">
{{if .Issue}} {{if .Issue}}
{{.Issue.Title | RenderEmoji $.Context | RenderCodeBlock}} {{.Issue.Title | RenderEmoji $.Context | RenderCodeBlock}}

View file

@ -163,14 +163,6 @@ Gitea's private styles use `g-` prefix.
.gt-gap-y-4 { row-gap: 1rem !important; } .gt-gap-y-4 { row-gap: 1rem !important; }
.gt-gap-y-5 { row-gap: 2rem !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. gt-hidden must win all other "display: xxx !important" classes to get the chance to "hide" an element.
do not use: do not use:

View file

@ -384,7 +384,7 @@ export default {
<h4 v-else class="contributor-name"> <h4 v-else class="contributor-name">
{{ contributor.name }} {{ contributor.name }}
</h4> </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_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_additions" class="text green">{{ contributor.total_additions.toLocaleString() }}++ </strong>
<strong v-if="contributor.total_deletions" class="text red"> <strong v-if="contributor.total_deletions" class="text red">