docs: 📝 remove outdated note about gitea version in README

feat: ✨ auto switch dark-light themes

.github/workflows/release.yml

@@ -8,15 +8,15 @@ jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
       - run: npm ci
       - run: npm run build
       - name: Create tarball
-        run: tar czf catppuccin-gitea.tar.gz --directory=./dist .
+        run: tar czf gitea-lugit-theme.tar.gz --directory=./dist .
       - name: Add zips to release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         with:
-          files: ./lugit-theme.tar.gz
+          files: ./gitea-lugit-theme.tar.gz

.gitignore

@@ -90,7 +90,7 @@ out
 
 # Nuxt.js build / generate output
 .nuxt
-# dist
+dist
 
 # Gatsby files
 .cache/

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [0.2.1] - 2024-10-19
+
+### Fixes
+- fix: 🚑 some css customizations not showing after 1.22.3 gitea update
+
+## [0.2.0] - 2024-10-19
+
+### Added
+- Pinned the project to the Gitea 1.22.3 version.

README.md

@@ -4,22 +4,34 @@
 
 *Theme for `lucaslabs` internal gitea server.*
 
-## `dark`
+> [!IMPORTANT]
+> From version `v1.0.0` onwards, `gitea>=1.23` is required.
+> In case you're looking for `gitea@1.22.x` support, [`v0.2.2`](https://github.com/lucas-labs/gitea-lugit-theme/releases/tag/v0.2.2)
+> is the last version that supports it.
 
-![dark theme](figs/dark.png)
+## Preview
 
-## `light`
+![repository](figs/repo.png)
 
-![light theme](figs/light.png)
+<details>
+<summary>Issue Page</summary>
+<img src="figs/issue.png" alt="issue" width="100%">
+</details>
 
-## `auto`
+<details>
+<summary>Settings Page</summary>
+<img src="figs/settings.png" alt="settings" width="100%">
+</details>
 
-Switches between `dark` and `light` automatically based on the user's system preference.
+<details>
+<summary>PR Page</summary>
+<img src="figs/pr.png" alt="pr" width="100%">
+</details>
 
 ## Usage
 
-1. Clone this repo
-2. Place the files in the `dist` folder in your `$GITEA_CUSTOM` directory.
+1. Go to the [releases page](https://github.com/lucas-labs/gitea-lugit-theme/releases) and get the latest `gitea-lugit-theme.tar.gz` release file.
+2. Place the `templates` and `public` folder in your `$GITEA_CUSTOM` directory.
 3. Append the themes in your `app.ini` file:
 
 ```ini
@@ -32,14 +44,11 @@ DEFAULT_THEME=dark # optional
 
 4. Restart `gitea`.
 
-> 🗒️ **Note**\
-> Works with `gitea` version `v1.20`.
-
 ## Credits
 
 - [`catppuccin/gitea`](https://github.com/catppuccin/gitea), these themes are based on them.
 
-## Dev
+## Development
 
 ### build
 ```bash
@@ -59,32 +68,6 @@ $ npm run serve -- --server ~/gitea/custom
 $ npm run serve -- -- --server c:/gitea/custom
 ```
 
+## Contributing
 
-# Changes in templates
-
-## `home.tmpl`
-
-Here we remove everything (default gitea welcome page). We only keep the logo and the header with the login button.
-
-## `base/head_navbar.tmpl`
-
-The only change here is to make the logo smaller.
-
-```diff
-- <img height="30" width="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
-+ <img height="24" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
-```
-
-## `repo/home.tmpl`
-
-+ adds `<div class="lugit-repo-header-data">...</div>` as a wrapper for the repo header data (description + labels)
-+ adds `<div class="lugit-repo-content">` as a wrapper for the repo content (files, commits, branches, etc.)
-
-Later we use css to go from default 1 column layout to 2 column layout more similar to github's design.
-
-```diff
-- <div class="ui container {{if .IsBlame}}fluid padded{{end}}>
-+ <div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IIsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
-```
-
-Adds the class `lugit-repo-list-view` to the container of the repo content (only when we are not viewing a file or in blame view). This allows us to change the layout of the main repo view, except when viewing a file or in blame view.
+Feel free to open an issue or a pull request. Contributions are welcome!

dist/public/assets/css/theme-auto.css

@@ -1 +0,0 @@
-@import "./theme-light.css"(prefers-color-scheme:light);@import "./theme-dark.css"(prefers-color-scheme:dark);

dist/public/assets/img/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" height="32"><path d="M32 0v160H0V0Zm48 0v32h48v32H80V32H48v64h80v32H72v32h88V0Z" style="fill:#a6c6f7"/></svg>

dist/public/assets/img/loading.svg

@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 160">
-  <defs>
-    <style>
-      .a, .b {
-        fill: #a6c6f7;
-      }
-
-      .a {
-        opacity: 0.4;
-      }
-    </style>
-  </defs>
-  <path class="a" d="M432,48V80H320V48h48V0h32V48ZM48,80H80V0H48Zm96,0h32V32H144ZM0,80H32V0H0ZM224,0V32h48V64H224V32H192V80H304V0ZM352,0H320V32h32Z"/>
-  <path class="b" d="M352,160H320V80h32Zm48-32V80H368v80h80V128ZM80,80H48v48H80Zm64,0v48H80v32h96V80ZM32,80H0v80H32Zm160,0V96h80v32H216v32h88V80Z"/>
-</svg>

dist/public/assets/img/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 160" height="32"><path d="M32 0v160H0V0Zm368 128V80.701h32V48h-32V0h-32v48h-48v112h32V80.701h16V160h80v-32ZM48 0v128h32V0Zm96 32v96H80v32h96V32Zm80-32v32h48v32h-48V32h-32v64h80v32h-56v32h88V0Zm128 0h-32v32h32Z" style="fill:#a6c6f7"/></svg>

dist/templates/base/head_navbar.tmpl

@@ -1,205 +0,0 @@
-{{$notificationUnreadCount := 0}}
-{{if and .IsSigned .NotificationUnreadCount}}
-	{{$notificationUnreadCount = call .NotificationUnreadCount}}
-{{end}}
-
-<nav id="navbar" aria-label="{{ctx.Locale.Tr "aria.navbar"}}">
-	<div class="navbar-left ui secondary menu">
-		<!-- the logo -->
-		<a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}">
-			<img height="24" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
-		</a>
-
-		<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
-		<div class="ui secondary menu item navbar-mobile-right">
-			{{if .IsSigned}}
-			<a id="mobile-notifications-icon" class="item gt-w-auto gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
-				<div class="gt-relative">
-					{{svg "octicon-bell"}}
-					<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
-				</div>
-			</a>
-			{{end}}
-			<button class="item gt-w-auto ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
-		</div>
-
-		<!-- navbar links non-mobile -->
-		{{if and .IsSigned .MustChangePassword}}
-			{{/* No links */}}
-		{{else if .IsSigned}}
-			{{if not .UnitIssuesGlobalDisabled}}
-				<a class="item{{if .PageIsIssues}} active{{end}}" href="{{AppSubUrl}}/issues">{{ctx.Locale.Tr "issues"}}</a>
-			{{end}}
-			{{if not .UnitPullsGlobalDisabled}}
-				<a class="item{{if .PageIsPulls}} active{{end}}" href="{{AppSubUrl}}/pulls">{{ctx.Locale.Tr "pull_requests"}}</a>
-			{{end}}
-			{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
-				{{if .ShowMilestonesDashboardPage}}
-					<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{ctx.Locale.Tr "milestones"}}</a>
-				{{end}}
-			{{end}}
-			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a>
-		{{else if .IsLandingPageOrganizations}}
-			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{ctx.Locale.Tr "explore"}}</a>
-		{{else}}
-			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a>
-		{{end}}
-
-		{{template "custom/extra_links" .}}
-
-		{{if not .IsSigned}}
-			<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.com">{{ctx.Locale.Tr "help"}}</a>
-		{{end}}
-	</div>
-
-	<!-- the full dropdown menus -->
-	<div class="navbar-right ui secondary menu">
-		{{if and .IsSigned .MustChangePassword}}
-			<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
-				<span class="text gt-df gt-ac">
-					{{ctx.AvatarUtils.Avatar .SignedUser 24 "gt-mr-2"}}
-					<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
-				</span>
-				<div class="menu user-menu">
-					<div class="ui header">
-						{{ctx.Locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
-					</div>
-
-					<div class="divider"></div>
-					<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout">
-						{{svg "octicon-sign-out"}}
-						{{ctx.Locale.Tr "sign_out"}}
-					</a>
-				</div><!-- end content avatar menu -->
-			</div><!-- end dropdown avatar menu -->
-		{{else if .IsSigned}}
-			{{if EnableTimetracking}}
-			<a class="active-stopwatch-trigger item gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}">
-				<div class="gt-relative">
-					{{svg "octicon-stopwatch"}}
-					<span class="header-stopwatch-dot"></span>
-				</div>
-				<span class="mobile-only gt-ml-3">{{ctx.Locale.Tr "active_stopwatch"}}</span>
-			</a>
-			<div class="active-stopwatch-popup item tippy-target gt-p-3">
-				<div class="gt-df gt-ac">
-					<a class="stopwatch-link gt-df gt-ac" href="{{.ActiveStopwatch.IssueLink}}">
-						{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
-						<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
-						<span class="ui primary label stopwatch-time gt-my-0 gt-mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
-							{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
-						</span>
-					</a>
-					<form class="stopwatch-commit" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
-						{{.CsrfTokenHtml}}
-						<button
-							type="submit"
-							class="ui button mini compact basic icon"
-							data-tooltip-content="{{ctx.Locale.Tr "repo.issues.stop_tracking"}}"
-						>{{svg "octicon-square-fill"}}</button>
-					</form>
-					<form class="stopwatch-cancel" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
-						{{.CsrfTokenHtml}}
-						<button
-							type="submit"
-							class="ui button mini compact basic icon"
-							data-tooltip-content="{{ctx.Locale.Tr "repo.issues.cancel_tracking"}}"
-						>{{svg "octicon-trash"}}</button>
-					</form>
-				</div>
-			</div>
-			{{end}}
-
-			<a class="item not-mobile gt-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
-				<div class="gt-relative">
-					{{svg "octicon-bell"}}
-					<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
-				</div>
-			</a>
-
-			<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{ctx.Locale.Tr "create_new"}}">
-				<span class="text">
-					{{svg "octicon-plus"}}
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
-					<span class="mobile-only">{{ctx.Locale.Tr "create_new"}}</span>
-				</span>
-				<div class="menu">
-					<a class="item" href="{{AppSubUrl}}/repo/create">
-						{{svg "octicon-plus"}} {{ctx.Locale.Tr "new_repo"}}
-					</a>
-					{{if not .DisableMigrations}}
-						<a class="item" href="{{AppSubUrl}}/repo/migrate">
-							{{svg "octicon-repo-push"}} {{ctx.Locale.Tr "new_migrate"}}
-						</a>
-					{{end}}
-					{{if .SignedUser.CanCreateOrganization}}
-					<a class="item" href="{{AppSubUrl}}/org/create">
-						{{svg "octicon-organization"}} {{ctx.Locale.Tr "new_org"}}
-					</a>
-					{{end}}
-				</div><!-- end content create new menu -->
-			</div><!-- end dropdown menu create new -->
-
-			<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
-				<span class="text gt-df gt-ac">
-					{{ctx.AvatarUtils.Avatar .SignedUser 24 "gt-mr-2"}}
-					<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
-				</span>
-				<div class="menu user-menu">
-					<div class="ui header">
-						{{ctx.Locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
-					</div>
-
-					<div class="divider"></div>
-					<a class="item" href="{{.SignedUser.HomeLink}}">
-						{{svg "octicon-person"}}
-						{{ctx.Locale.Tr "your_profile"}}
-					</a>
-					{{if not .DisableStars}}
-						<a class="item" href="{{.SignedUser.HomeLink}}?tab=stars">
-							{{svg "octicon-star"}}
-							{{ctx.Locale.Tr "your_starred"}}
-						</a>
-					{{end}}
-					<a class="item" href="{{AppSubUrl}}/notifications/subscriptions">
-						{{svg "octicon-bell"}}
-						{{ctx.Locale.Tr "notification.subscriptions"}}
-					</a>
-					<a class="{{if .PageIsUserSettings}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
-						{{svg "octicon-tools"}}
-						{{ctx.Locale.Tr "your_settings"}}
-					</a>
-					<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.com">
-						{{svg "octicon-question"}}
-						{{ctx.Locale.Tr "help"}}
-					</a>
-					{{if .IsAdmin}}
-						<div class="divider"></div>
-
-						<a class="{{if .PageIsAdmin}}active {{end}}item" href="{{AppSubUrl}}/admin">
-							{{svg "octicon-server"}}
-							{{ctx.Locale.Tr "admin_panel"}}
-						</a>
-					{{end}}
-
-					<div class="divider"></div>
-					<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout">
-						{{svg "octicon-sign-out"}}
-						{{ctx.Locale.Tr "sign_out"}}
-					</a>
-				</div><!-- end content avatar menu -->
-			</div><!-- end dropdown avatar menu -->
-		{{else}}
-			{{if .ShowRegistrationButton}}
-				<a class="item{{if .PageIsSignUp}} active{{end}}" href="{{AppSubUrl}}/user/sign_up">
-					{{svg "octicon-person"}} {{ctx.Locale.Tr "register"}}
-				</a>
-			{{end}}
-			<a class="item{{if .PageIsSignIn}} active{{end}}" rel="nofollow" href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}">
-				{{svg "octicon-sign-in"}} {{ctx.Locale.Tr "sign_in"}}
-			</a>
-		{{end}}
-	</div><!-- end full right menu -->
-</nav>

dist/templates/home.tmpl

@@ -1,9 +0,0 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}" class="page-content home">
-	<div class="gt-mb-5 gt-px-5">
-		<div class="center">
-			<img class="logo" width="220" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.locale.Tr "logo"}}">
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}

dist/templates/repo/home.tmpl

@@ -1,170 +0,0 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}">
-	{{template "repo/header" .}}
-	<div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
-		<div class="lugit-repo-header-data">
-			{{template "base/alert" .}}
-			{{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">
-					<h5>{{ctx.Locale.Tr "repo.repo_desc"}}</h5>
-					{{$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>
-				</div>
-				{{if .RepoSearchEnabled}}
-					<div class="ui repo-search">
-						<form class="ui form ignore-dirty" action="{{.RepoLink}}/search" method="get">
-							<div class="field">
-								<div class="ui small action input{{if .CodeIndexerUnavailable}} disabled left icon{{end}}"{{if .CodeIndexerUnavailable}} data-tooltip-content="{{ctx.Locale.Tr "repo.search.code_search_unavailable"}}"{{end}}>
-									<input name="q" value="{{.Keyword}}"{{if .CodeIndexerUnavailable}} disabled{{end}} placeholder="{{ctx.Locale.Tr "repo.search.search_repo"}}">
-									{{if .CodeIndexerUnavailable}}
-										<i class="icon">{{svg "octicon-alert"}}</i>
-									{{end}}
-									<button class="ui small icon button"{{if .CodeIndexerUnavailable}} disabled{{end}} type="submit">
-										{{svg "octicon-search"}}
-									</button>
-								</div>
-							</div>
-						</form>
-					</div>
-				{{end}}
-			</div>
-			<div class="gt-df gt-ac gt-fw 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}}
-			</div>
-			{{end}}
-			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
-			<div class="ui form gt-hidden gt-df gt-mt-4" id="topic_edit">
-				<div class="field gt-f1 gt-mr-3">
-					<div class="ui fluid multiple search selection dropdown" data-text-count-prompt="{{ctx.Locale.Tr "repo.topic.count_prompt"}}" data-text-format-prompt="{{ctx.Locale.Tr "repo.topic.format_prompt"}}">
-						<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
-						{{range .Topics}}
-							{{/* keey the same layout as Fomantic UI generated labels */}}
-							<a class="ui label transition visible gt-cursor-default gt-dib" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
-						{{end}}
-						<div class="text"></div>
-					</div>
-				</div>
-				<div>
-					<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
-					<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{ctx.Locale.Tr "save"}}</button>
-				</div>
-			</div>
-			{{end}}
-			{{if .Repository.IsArchived}}
-				<div class="ui warning message gt-text-center">
-					{{if .Repository.ArchivedUnix.IsZero}}
-						{{ctx.Locale.Tr "repo.archive.title"}}
-					{{else}}
-						{{ctx.Locale.Tr "repo.archive.title_date" (DateTime "long" .Repository.ArchivedUnix) | Safe}}
-					{{end}}
-				</div>
-			{{end}}
-		</div>
-		<div class="lugit-repo-content">
-			{{template "repo/sub_menu" .}}
-			<div class="repo-button-row">
-				<div class="gt-df gt-ac gt-fw gt-gap-y-3">
-					{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "gt-mr-2"}}
-					{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
-						{{$cmpBranch := ""}}
-						{{if ne .Repository.ID .BaseRepo.ID}}
-							{{$cmpBranch = printf "%s/%s:" (.Repository.OwnerName|PathEscape) (.Repository.Name|PathEscape)}}
-						{{end}}
-						{{$cmpBranch = print $cmpBranch (.BranchName|PathEscapeSegments)}}
-						{{$compareLink := printf "%s/compare/%s...%s" .BaseRepo.Link (.BaseRepo.DefaultBranch|PathEscapeSegments) $cmpBranch}}
-						<a id="new-pull-request" role="button" class="ui compact basic button" href="{{$compareLink}}"
-							data-tooltip-content="{{if .PullRequestCtx.Allowed}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}">
-							{{svg "octicon-git-pull-request"}}
-						</a>
-					{{end}}
-					<!-- Show go to file and breadcrumbs if not on home page -->
-					{{$n := len .TreeNames}}
-					{{$l := Eval $n "-" 1}}
-					{{if eq $n 0}}
-						<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">{{ctx.Locale.Tr "repo.find_file.go_to_file"}}</a>
-					{{end}}
-
-					{{if and .CanWriteCode .IsViewBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}}
-						<button class="ui dropdown basic compact jump button gt-mr-2"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
-							{{ctx.Locale.Tr "repo.editor.add_file"}}
-							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-							<div class="menu">
-								<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-									{{ctx.Locale.Tr "repo.editor.new_file"}}
-								</a>
-								{{if .RepositoryUploadEnabled}}
-								<a class="item" href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-									{{ctx.Locale.Tr "repo.editor.upload_file"}}
-								</a>
-								{{end}}
-								<a class="item" href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-									{{ctx.Locale.Tr "repo.editor.patch"}}
-								</a>
-							</div>
-						</button>
-					{{end}}
-
-					{{if and (eq $n 0) (.Repository.IsTemplate)}}
-						<a role="button" class="ui primary compact button" href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}">
-							{{ctx.Locale.Tr "repo.use_template"}}
-						</a>
-					{{end}}
-					{{if ne $n 0}}
-						<span class="breadcrumb repo-path gt-ml-2">
-							<a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a>
-							{{- range $i, $v := .TreeNames -}}
-								<span class="breadcrumb-divider">/</span>
-								{{- if eq $i $l -}}
-									<span class="active section" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</span>
-								{{- else -}}
-									{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</a></span>
-								{{- end -}}
-							{{- end -}}
-						</span>
-					{{end}}
-				</div>
-				<div class="gt-df gt-ac">
-					<!-- Only show clone panel in repository home page -->
-					{{if eq $n 0}}
-						<div class="ui action tiny input" id="clone-panel">
-							{{template "repo/clone_buttons" .}}
-							<button id="more-btn" class="ui basic small compact jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
-								{{svg "octicon-kebab-horizontal"}}
-								<div class="menu">
-									{{if not $.DisableDownloadSourceArchives}}
-										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.download_zip"}}</a>
-										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.download_tar"}}</a>
-										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.bundle" rel="nofollow">{{svg "octicon-package" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.download_bundle"}}</a>
-										{{if .CitiationExist}}
-											<a class="item" id="cite-repo-button">{{svg "octicon-cross-reference" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.cite_this_repo"}}</a>
-										{{end}}
-									{{end}}
-									<a class="item js-clone-url-vsc" href="vscode://vscode.git/clone?url={{.CloneButtonOriginLink.HTTPS}}">{{svg "gitea-vscode" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.clone_in_vsc"}}</a>
-								</div>
-							</button>
-							{{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}}
-						</div>
-						{{template "repo/cite/cite_modal" .}}
-					{{end}}
-					{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame)}}
-						<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
-							{{svg "octicon-history" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.file_history"}}
-						</a>
-					{{end}}
-				</div>
-			</div>
-			{{if .IsViewFile}}
-				{{template "repo/view_file" .}}
-			{{else if .IsBlame}}
-				{{template "repo/blame" .}}
-			{{else}}
-				{{template "repo/view_list" .}}
-			{{end}}
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lucas-labs/lugit-theme",
-    "version": "0.1.0",
+    "version": "0.2.2",
     "type": "module",
     "description": "Custom theme for lucaslabs' internal git server",
     "main": "index.js",
@@ -21,7 +21,7 @@
         "fabric": "5.3",
         "imagemin-zopfli": "^7.0.0",
         "prettier": "^2.8.8",
-        "sass": "^1.63.6",
+        "sass": "1.63.6",
         "svgo": "^3.0.2"
     },
     "dependencies": {

src/templates/base/head_navbar.tmpl

@@ -1,205 +0,0 @@
-{{$notificationUnreadCount := 0}}
-{{if and .IsSigned .NotificationUnreadCount}}
-	{{$notificationUnreadCount = call .NotificationUnreadCount}}
-{{end}}
-
-<nav id="navbar" aria-label="{{ctx.Locale.Tr "aria.navbar"}}">
-	<div class="navbar-left ui secondary menu">
-		<!-- the logo -->
-		<a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}">
-			<img height="24" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
-		</a>
-
-		<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
-		<div class="ui secondary menu item navbar-mobile-right">
-			{{if .IsSigned}}
-			<a id="mobile-notifications-icon" class="item gt-w-auto gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
-				<div class="gt-relative">
-					{{svg "octicon-bell"}}
-					<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
-				</div>
-			</a>
-			{{end}}
-			<button class="item gt-w-auto ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
-		</div>
-
-		<!-- navbar links non-mobile -->
-		{{if and .IsSigned .MustChangePassword}}
-			{{/* No links */}}
-		{{else if .IsSigned}}
-			{{if not .UnitIssuesGlobalDisabled}}
-				<a class="item{{if .PageIsIssues}} active{{end}}" href="{{AppSubUrl}}/issues">{{ctx.Locale.Tr "issues"}}</a>
-			{{end}}
-			{{if not .UnitPullsGlobalDisabled}}
-				<a class="item{{if .PageIsPulls}} active{{end}}" href="{{AppSubUrl}}/pulls">{{ctx.Locale.Tr "pull_requests"}}</a>
-			{{end}}
-			{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
-				{{if .ShowMilestonesDashboardPage}}
-					<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{ctx.Locale.Tr "milestones"}}</a>
-				{{end}}
-			{{end}}
-			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a>
-		{{else if .IsLandingPageOrganizations}}
-			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{ctx.Locale.Tr "explore"}}</a>
-		{{else}}
-			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a>
-		{{end}}
-
-		{{template "custom/extra_links" .}}
-
-		{{if not .IsSigned}}
-			<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.com">{{ctx.Locale.Tr "help"}}</a>
-		{{end}}
-	</div>
-
-	<!-- the full dropdown menus -->
-	<div class="navbar-right ui secondary menu">
-		{{if and .IsSigned .MustChangePassword}}
-			<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
-				<span class="text gt-df gt-ac">
-					{{ctx.AvatarUtils.Avatar .SignedUser 24 "gt-mr-2"}}
-					<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
-				</span>
-				<div class="menu user-menu">
-					<div class="ui header">
-						{{ctx.Locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
-					</div>
-
-					<div class="divider"></div>
-					<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout">
-						{{svg "octicon-sign-out"}}
-						{{ctx.Locale.Tr "sign_out"}}
-					</a>
-				</div><!-- end content avatar menu -->
-			</div><!-- end dropdown avatar menu -->
-		{{else if .IsSigned}}
-			{{if EnableTimetracking}}
-			<a class="active-stopwatch-trigger item gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}">
-				<div class="gt-relative">
-					{{svg "octicon-stopwatch"}}
-					<span class="header-stopwatch-dot"></span>
-				</div>
-				<span class="mobile-only gt-ml-3">{{ctx.Locale.Tr "active_stopwatch"}}</span>
-			</a>
-			<div class="active-stopwatch-popup item tippy-target gt-p-3">
-				<div class="gt-df gt-ac">
-					<a class="stopwatch-link gt-df gt-ac" href="{{.ActiveStopwatch.IssueLink}}">
-						{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
-						<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
-						<span class="ui primary label stopwatch-time gt-my-0 gt-mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
-							{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
-						</span>
-					</a>
-					<form class="stopwatch-commit" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
-						{{.CsrfTokenHtml}}
-						<button
-							type="submit"
-							class="ui button mini compact basic icon"
-							data-tooltip-content="{{ctx.Locale.Tr "repo.issues.stop_tracking"}}"
-						>{{svg "octicon-square-fill"}}</button>
-					</form>
-					<form class="stopwatch-cancel" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
-						{{.CsrfTokenHtml}}
-						<button
-							type="submit"
-							class="ui button mini compact basic icon"
-							data-tooltip-content="{{ctx.Locale.Tr "repo.issues.cancel_tracking"}}"
-						>{{svg "octicon-trash"}}</button>
-					</form>
-				</div>
-			</div>
-			{{end}}
-
-			<a class="item not-mobile gt-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
-				<div class="gt-relative">
-					{{svg "octicon-bell"}}
-					<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
-				</div>
-			</a>
-
-			<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{ctx.Locale.Tr "create_new"}}">
-				<span class="text">
-					{{svg "octicon-plus"}}
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
-					<span class="mobile-only">{{ctx.Locale.Tr "create_new"}}</span>
-				</span>
-				<div class="menu">
-					<a class="item" href="{{AppSubUrl}}/repo/create">
-						{{svg "octicon-plus"}} {{ctx.Locale.Tr "new_repo"}}
-					</a>
-					{{if not .DisableMigrations}}
-						<a class="item" href="{{AppSubUrl}}/repo/migrate">
-							{{svg "octicon-repo-push"}} {{ctx.Locale.Tr "new_migrate"}}
-						</a>
-					{{end}}
-					{{if .SignedUser.CanCreateOrganization}}
-					<a class="item" href="{{AppSubUrl}}/org/create">
-						{{svg "octicon-organization"}} {{ctx.Locale.Tr "new_org"}}
-					</a>
-					{{end}}
-				</div><!-- end content create new menu -->
-			</div><!-- end dropdown menu create new -->
-
-			<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
-				<span class="text gt-df gt-ac">
-					{{ctx.AvatarUtils.Avatar .SignedUser 24 "gt-mr-2"}}
-					<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
-				</span>
-				<div class="menu user-menu">
-					<div class="ui header">
-						{{ctx.Locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
-					</div>
-
-					<div class="divider"></div>
-					<a class="item" href="{{.SignedUser.HomeLink}}">
-						{{svg "octicon-person"}}
-						{{ctx.Locale.Tr "your_profile"}}
-					</a>
-					{{if not .DisableStars}}
-						<a class="item" href="{{.SignedUser.HomeLink}}?tab=stars">
-							{{svg "octicon-star"}}
-							{{ctx.Locale.Tr "your_starred"}}
-						</a>
-					{{end}}
-					<a class="item" href="{{AppSubUrl}}/notifications/subscriptions">
-						{{svg "octicon-bell"}}
-						{{ctx.Locale.Tr "notification.subscriptions"}}
-					</a>
-					<a class="{{if .PageIsUserSettings}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
-						{{svg "octicon-tools"}}
-						{{ctx.Locale.Tr "your_settings"}}
-					</a>
-					<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.com">
-						{{svg "octicon-question"}}
-						{{ctx.Locale.Tr "help"}}
-					</a>
-					{{if .IsAdmin}}
-						<div class="divider"></div>
-
-						<a class="{{if .PageIsAdmin}}active {{end}}item" href="{{AppSubUrl}}/admin">
-							{{svg "octicon-server"}}
-							{{ctx.Locale.Tr "admin_panel"}}
-						</a>
-					{{end}}
-
-					<div class="divider"></div>
-					<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout">
-						{{svg "octicon-sign-out"}}
-						{{ctx.Locale.Tr "sign_out"}}
-					</a>
-				</div><!-- end content avatar menu -->
-			</div><!-- end dropdown avatar menu -->
-		{{else}}
-			{{if .ShowRegistrationButton}}
-				<a class="item{{if .PageIsSignUp}} active{{end}}" href="{{AppSubUrl}}/user/sign_up">
-					{{svg "octicon-person"}} {{ctx.Locale.Tr "register"}}
-				</a>
-			{{end}}
-			<a class="item{{if .PageIsSignIn}} active{{end}}" rel="nofollow" href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}">
-				{{svg "octicon-sign-in"}} {{ctx.Locale.Tr "sign_in"}}
-			</a>
-		{{end}}
-	</div><!-- end full right menu -->
-</nav>

src/templates/home.tmpl

@@ -1,9 +0,0 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}" class="page-content home">
-	<div class="gt-mb-5 gt-px-5">
-		<div class="center">
-			<img class="logo" width="220" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.locale.Tr "logo"}}">
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}

src/templates/repo/home.tmpl

@@ -1,170 +0,0 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}">
-	{{template "repo/header" .}}
-	<div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
-		<div class="lugit-repo-header-data">
-			{{template "base/alert" .}}
-			{{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">
-					<h5>{{ctx.Locale.Tr "repo.repo_desc"}}</h5>
-					{{$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>
-				</div>
-				{{if .RepoSearchEnabled}}
-					<div class="ui repo-search">
-						<form class="ui form ignore-dirty" action="{{.RepoLink}}/search" method="get">
-							<div class="field">
-								<div class="ui small action input{{if .CodeIndexerUnavailable}} disabled left icon{{end}}"{{if .CodeIndexerUnavailable}} data-tooltip-content="{{ctx.Locale.Tr "repo.search.code_search_unavailable"}}"{{end}}>
-									<input name="q" value="{{.Keyword}}"{{if .CodeIndexerUnavailable}} disabled{{end}} placeholder="{{ctx.Locale.Tr "repo.search.search_repo"}}">
-									{{if .CodeIndexerUnavailable}}
-										<i class="icon">{{svg "octicon-alert"}}</i>
-									{{end}}
-									<button class="ui small icon button"{{if .CodeIndexerUnavailable}} disabled{{end}} type="submit">
-										{{svg "octicon-search"}}
-									</button>
-								</div>
-							</div>
-						</form>
-					</div>
-				{{end}}
-			</div>
-			<div class="gt-df gt-ac gt-fw 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}}
-			</div>
-			{{end}}
-			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
-			<div class="ui form gt-hidden gt-df gt-mt-4" id="topic_edit">
-				<div class="field gt-f1 gt-mr-3">
-					<div class="ui fluid multiple search selection dropdown" data-text-count-prompt="{{ctx.Locale.Tr "repo.topic.count_prompt"}}" data-text-format-prompt="{{ctx.Locale.Tr "repo.topic.format_prompt"}}">
-						<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
-						{{range .Topics}}
-							{{/* keey the same layout as Fomantic UI generated labels */}}
-							<a class="ui label transition visible gt-cursor-default gt-dib" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
-						{{end}}
-						<div class="text"></div>
-					</div>
-				</div>
-				<div>
-					<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
-					<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{ctx.Locale.Tr "save"}}</button>
-				</div>
-			</div>
-			{{end}}
-			{{if .Repository.IsArchived}}
-				<div class="ui warning message gt-text-center">
-					{{if .Repository.ArchivedUnix.IsZero}}
-						{{ctx.Locale.Tr "repo.archive.title"}}
-					{{else}}
-						{{ctx.Locale.Tr "repo.archive.title_date" (DateTime "long" .Repository.ArchivedUnix) | Safe}}
-					{{end}}
-				</div>
-			{{end}}
-		</div>
-		<div class="lugit-repo-content">
-			{{template "repo/sub_menu" .}}
-			<div class="repo-button-row">
-				<div class="gt-df gt-ac gt-fw gt-gap-y-3">
-					{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "gt-mr-2"}}
-					{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
-						{{$cmpBranch := ""}}
-						{{if ne .Repository.ID .BaseRepo.ID}}
-							{{$cmpBranch = printf "%s/%s:" (.Repository.OwnerName|PathEscape) (.Repository.Name|PathEscape)}}
-						{{end}}
-						{{$cmpBranch = print $cmpBranch (.BranchName|PathEscapeSegments)}}
-						{{$compareLink := printf "%s/compare/%s...%s" .BaseRepo.Link (.BaseRepo.DefaultBranch|PathEscapeSegments) $cmpBranch}}
-						<a id="new-pull-request" role="button" class="ui compact basic button" href="{{$compareLink}}"
-							data-tooltip-content="{{if .PullRequestCtx.Allowed}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}">
-							{{svg "octicon-git-pull-request"}}
-						</a>
-					{{end}}
-					<!-- Show go to file and breadcrumbs if not on home page -->
-					{{$n := len .TreeNames}}
-					{{$l := Eval $n "-" 1}}
-					{{if eq $n 0}}
-						<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">{{ctx.Locale.Tr "repo.find_file.go_to_file"}}</a>
-					{{end}}
-
-					{{if and .CanWriteCode .IsViewBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}}
-						<button class="ui dropdown basic compact jump button gt-mr-2"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
-							{{ctx.Locale.Tr "repo.editor.add_file"}}
-							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-							<div class="menu">
-								<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-									{{ctx.Locale.Tr "repo.editor.new_file"}}
-								</a>
-								{{if .RepositoryUploadEnabled}}
-								<a class="item" href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-									{{ctx.Locale.Tr "repo.editor.upload_file"}}
-								</a>
-								{{end}}
-								<a class="item" href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-									{{ctx.Locale.Tr "repo.editor.patch"}}
-								</a>
-							</div>
-						</button>
-					{{end}}
-
-					{{if and (eq $n 0) (.Repository.IsTemplate)}}
-						<a role="button" class="ui primary compact button" href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}">
-							{{ctx.Locale.Tr "repo.use_template"}}
-						</a>
-					{{end}}
-					{{if ne $n 0}}
-						<span class="breadcrumb repo-path gt-ml-2">
-							<a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a>
-							{{- range $i, $v := .TreeNames -}}
-								<span class="breadcrumb-divider">/</span>
-								{{- if eq $i $l -}}
-									<span class="active section" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</span>
-								{{- else -}}
-									{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</a></span>
-								{{- end -}}
-							{{- end -}}
-						</span>
-					{{end}}
-				</div>
-				<div class="gt-df gt-ac">
-					<!-- Only show clone panel in repository home page -->
-					{{if eq $n 0}}
-						<div class="ui action tiny input" id="clone-panel">
-							{{template "repo/clone_buttons" .}}
-							<button id="more-btn" class="ui basic small compact jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
-								{{svg "octicon-kebab-horizontal"}}
-								<div class="menu">
-									{{if not $.DisableDownloadSourceArchives}}
-										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.download_zip"}}</a>
-										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.download_tar"}}</a>
-										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.bundle" rel="nofollow">{{svg "octicon-package" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.download_bundle"}}</a>
-										{{if .CitiationExist}}
-											<a class="item" id="cite-repo-button">{{svg "octicon-cross-reference" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.cite_this_repo"}}</a>
-										{{end}}
-									{{end}}
-									<a class="item js-clone-url-vsc" href="vscode://vscode.git/clone?url={{.CloneButtonOriginLink.HTTPS}}">{{svg "gitea-vscode" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.clone_in_vsc"}}</a>
-								</div>
-							</button>
-							{{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}}
-						</div>
-						{{template "repo/cite/cite_modal" .}}
-					{{end}}
-					{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame)}}
-						<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
-							{{svg "octicon-history" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.file_history"}}
-						</a>
-					{{end}}
-				</div>
-			</div>
-			{{if .IsViewFile}}
-				{{template "repo/view_file" .}}
-			{{else if .IsBlame}}
-				{{template "repo/blame" .}}
-			{{else}}
-				{{template "repo/view_list" .}}
-			{{end}}
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}

src/themes/scss/_utils/_color-utils.scss

@@ -0,0 +1,100 @@
+@use 'sass:color';
+@use 'sass:map';
+
+@function light-change($color, $amount) {
+    @return color.adjust($color, $lightness: $amount * -1);
+}
+
+@function alpha-change($color, $alpha) {
+    @return color.change($color, $alpha: $alpha);
+}
+
+@function color-variants-light($color, $with-base: false) {
+    $set: (
+        '3%':  light-change($color, -3%),
+        '6%':  light-change($color, -6%),
+        '9%':  light-change($color, -9%),
+        '10%': light-change($color, -10%),
+        '12%': light-change($color, -12%),
+        '15%': light-change($color, -15%),
+        '20%': light-change($color, -20%),
+        '25%': light-change($color, -25%),
+        '30%': light-change($color, -30%),
+        '35%': light-change($color, -35%),
+        '40%': light-change($color, -40%),
+        '45%': light-change($color, -45%),
+        '50%': light-change($color, -50%),
+        '55%': light-change($color, -55%),
+        '60%': light-change($color, -60%),
+        '65%': light-change($color, -65%),
+        '70%': light-change($color, -70%),
+        '75%': light-change($color, -75%),
+        '80%': light-change($color, -80%),
+        '85%': light-change($color, -85%),
+        '90%': light-change($color, -90%),
+        '95%': light-change($color, -95%),
+        '100%': light-change($color, -100%)
+    );
+
+    @if $with-base {
+        $set: map.merge((base: $color), $set);
+    }
+
+    @return $set;  
+}
+
+@function color-variants-dark($color, $with-base: false) {
+    $set: (
+        '3%':  light-change($color, 3%),
+        '6%':  light-change($color, 6%),
+        '9%':  light-change($color, 9%),
+        '10%': light-change($color, 10%),
+        '12%': light-change($color, 12%),
+        '15%': light-change($color, 15%),
+        '20%': light-change($color, 20%),
+        '25%': light-change($color, 25%),
+        '30%': light-change($color, 30%),
+        '35%': light-change($color, 35%),
+        '40%': light-change($color, 40%),
+        '45%': light-change($color, 45%),
+        '50%': light-change($color, 50%),
+        '55%': light-change($color, 55%),
+        '60%': light-change($color, 60%),
+        '65%': light-change($color, 65%),
+        '70%': light-change($color, 70%),
+        '75%': light-change($color, 75%),
+        '80%': light-change($color, 80%),
+        '85%': light-change($color, 85%),
+        '90%': light-change($color, 90%),
+        '95%': light-change($color, 95%),
+        '100%': light-change($color, 100%)
+    );
+
+    @if $with-base {
+        $set: map.merge((base: $color), $set);
+    }
+
+    @return $set;    
+}
+
+@function variants($color, $light: true, $dark: true, $base: true, $override-base-with: null) {
+    $set: ();
+
+    @if $light {
+        $set: map.merge($set, (light: color-variants-light($color)));
+    }
+
+    @if $dark {
+        $set: map.merge($set, (dark: color-variants-dark($color)));
+    }
+
+    @if $base {
+        @if $override-base-with {
+            $set: map.merge($set, (base: $override-base-with));
+        } @else {
+            $set: map.merge($set, (base: $color));
+        }
+    }
+
+    @return $set;
+}

src/themes/scss/_vars.scss

@@ -0,0 +1,36 @@
+$variables: (
+    'font-size': (
+        'xs': .714rem,
+        'sm': .857rem,
+        'md': 1rem,      // 14
+        'lg': 1.143rem,  // 16
+        'xl': 1.286rem,  // 18
+        '2xl': 1.429rem, // 20
+        '3xl': 1.714rem, // 24
+        '4xl': 2rem,     // 28
+    ),                    
+    'font-family': '-apple-system, "Segoe UI", system-ui, "SF Pro Text", Inter, Roboto, "Helvetica Neue", Arial, sans-serif',
+    'code-font-family': 'ui-monospace, SFMono-Regular, "Source Code Pro", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji)',
+    'emoji-font-family': '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"',
+    'measure': (
+        '.25x': 4px,
+        '.375x': 6px,
+        '.5x': 8px,
+        '.75x': 12px,
+        '.875x': 14px,
+        '1x': 16px,
+        '1.25x': 20px,
+        '1.5x': 24px,
+        '2x': 32px,
+        '2.5x': 40px,
+        '3x': 48px,
+        '4x': 64px,
+    ),
+    'navbar-logo': (
+        'width': 56px,
+        'height': 20px,
+    ),
+    'repo-home': (
+        'sidebar-width': 296px,
+    )
+);

src/themes/scss/dark.scss

@@ -1,74 +1,50 @@
 @use '@lucas-labs/lui-micro' as lui;
-@use './utils/color-utils' as c;
+@use './_utils/color-utils' as c;
 @use './theme' as theme;
+@use './vars' as vars;
 
 $is-dark: true;
-
 $brand: #a6c6f7;
 
 $colors: (
-    theme: (
-        'rosewater':  c.variants(#f5e0dc, $is-dark),
-        'flamingo':   c.variants(#f2cdcd, $is-dark),
-        'pink':       c.variants(#f5c2e7, $is-dark),
-        'mauve':      c.variants($brand, $is-dark),
-        'red':        c.variants(#f38ba8, $is-dark),
-        'maroon':     c.variants(#eba0ac, $is-dark),
-        'peach':      c.variants(#fab387, $is-dark),
-        'yellow':     c.variants(#f9e2af, $is-dark),
-        'green':      c.variants($brand, $is-dark),
-        'dark-green': c.variants(#00E676, $is-dark),
-        'teal':       c.variants(#94e2d5, $is-dark),
-        'sky':        c.variants(#89dceb, $is-dark),
-        'sapphire':   c.variants(#74c7ec, $is-dark),
-        'blue':       c.variants(#89b4fa, $is-dark),
-        'lavender':   c.variants(#b4befe, $is-dark),
-        'black':      c.variants(#181825, $is-dark),
-        'white':      c.variants(#e6edf3, $is-dark),
-    ),    
+    primary: c.variants($brand),    
+    secondary: c.variants(hsl(240, 18%, 14%)), // same as elevation/6
     text: #e6edf3,
-    primary: c.variants($brand, $is-dark),
-    secondary: c.variants(#5d5f7a, $is-dark),
+    subtle: hsl(240, 10%, 70%), // same as elevation/10
+    palette: (
+        'red':        c.variants(#f38ba8), // red
+        'orange':     c.variants(#fab387), // peach
+        'yellow':     c.variants(#f9e2af), // yellow
+        'olive':      c.variants(#e2f095),
+        'green':      c.variants(#00E676), // green
+        'teal':       c.variants(#94e2d5), // teal
+        'blue':       c.variants(#89b4fa), // blue
+        'violet':     c.variants(#b4befe), // lavender
+        'purple':     c.variants(#9b6bf5), // mauve
+        'pink':       c.variants(#f5c2e7), // pink
+        'brown':      c.variants(#f2cdcd), // flamingo
+        'black':      c.variants(#181825), // black
+        'white':      c.variants(#e6edf3), // white
+    ),
     elevation: (
-        '1': #000000,  // crust
-        '2': #040407,  // mantle
-        '3': #07070f,  // base
-        '4': #161720,  // surface0
-        '5': #1a1a25,  // surface1
-        '6': #222330,  // surface2
-        '7': #393c4d,  // overlay0
-        '8': #515569,  // overlay1
-        '9': #6b7188,  // overlay2
-        '10': #868ca5, // subtext0
-        '11': #9aa2c2, // subtext1
-        '12': #b6c0e0, // 
+        '1':  hsl(240, 33%, 01%),
+        '2':  hsl(240, 33%, 04%),
+        '3':  hsl(240, 33%, 06%),
+        '4':  hsl(240, 30%, 08%),
+        '5':  hsl(240, 28%, 12%),
+        '6':  hsl(240, 25%, 14%),
+        '7':  hsl(240, 20%, 30%),
+        '8':  hsl(240, 20%, 40%),
+        '9':  hsl(240, 10%, 50%),
+        '10': hsl(240, 10%, 70%),
+        '11': hsl(240, 10%, 80%),
+        '12': hsl(240, 10%, 90%),
     )
 );
 
 // init lui-micro, css-vars only (no reboot, no basic)
 @include lui.init(
-    $theme: (
-        colors: $colors,
-        variables: (
-            'base-font-size': 14px,
-            'font-family': '"Outfit", Inter, Roboto, sans-serif',
-            'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
-            'measure': (
-                '.25x': 4px,
-                '.5x': 8px,
-                '1x': 16px,
-                '1.25x': 20px,
-                '1.5x': 24px,
-                '2x': 32px,
-                '3x': 48px,
-                '4x': 64px,
-            ),
-            'repo-home': (
-                'sidebar-width': 296px,
-            )
-        ),
-    ),
-    
+    $theme: (colors: $colors, variables: vars.$variables),
     $options: (
         reboot: false,
         basic: false,
@@ -77,6 +53,4 @@ $colors: (
     ),
 );
 
-@include theme.make-theme(
-    $is-dark: $is-dark,
-);
+@include theme.make-theme($is-dark);

src/themes/scss/light.scss

@@ -1,74 +1,50 @@
 @use '@lucas-labs/lui-micro' as lui;
-@use './utils/color-utils' as c;
+@use './_utils/color-utils' as c;
 @use './theme' as theme;
+@use './vars' as vars;
 
-$is-dark: true;
-
+$is-dark: false;
 $brand: #6296e2;
 
 $colors: (
-    theme: (
-        'rosewater':  c.variants(#dc8a78, $is-dark),
-        'flamingo':   c.variants(#dd7878, $is-dark),
-        'pink':       c.variants(#ea76cb, $is-dark),
-        'mauve':      c.variants($brand, $is-dark),
-        'red':        c.variants(#d20f39, $is-dark),
-        'maroon':     c.variants(#e64553, $is-dark),
-        'peach':      c.variants(#fe640b, $is-dark),
-        'yellow':     c.variants(#df8e1d, $is-dark),
-        'green':      c.variants($brand, $is-dark),
-        'dark-green': c.variants(#11752d, $is-dark),
-        'teal':       c.variants(#179299, $is-dark),
-        'sky':        c.variants(#04a5e5, $is-dark),
-        'sapphire':   c.variants(#209fb5, $is-dark),
-        'blue':       c.variants(#1e66f5, $is-dark),
-        'lavender':   c.variants(#7287fd, $is-dark),
-        'black':      c.variants(#181825, $is-dark),
-        'white':      c.variants(#e6edf3, $is-dark),
-    ),    
-    text: #4c4f69,
-    primary: c.variants($brand, $is-dark),
-    secondary: c.variants(#5d5f7a, $is-dark),
+    primary: c.variants($brand),    
+    secondary: c.variants(#bcc0cc),
+    text: #484b60,
+    subtle: #656c90, // same as elevation/10
+    palette: (
+        'red':        c.variants(#d20f39), // red
+        'orange':     c.variants(#fe640b), // peach
+        'yellow':     c.variants(#df8e1d), // yellow
+        'olive':      c.variants(#e2f095),
+        'green':      c.variants(#34ac56), // green
+        'teal':       c.variants(#179299), // teal
+        'blue':       c.variants(#1e66f5), // blue
+        'violet':     c.variants(#7287fd), // lavender
+        'purple':     c.variants(#8652e7), // mauve
+        'pink':       c.variants(#ea76cb), // pink
+        'brown':      c.variants(#dd7878), // flamingo
+        'black':      c.variants(#181825), // black
+        'white':      c.variants(#e6edf3), // white
+    ),
     elevation: (
-        '1': #dce0e8,  // crust
-        '2': #e6e9ef,  // mantle
-        '3': #eff1f5,  // base
-        '4': #ccd0da,  // surface0
-        '5': #bcc0cc,  // surface1
-        '6': #acb0be,  // surface2
-        '7': #9ca0b0,  // overlay0
-        '8': #8c8fa1,  // overlay1
-        '9': #7c7f93,  // overlay2
-        '10': #6c6f85, // subtext0
-        '11': #5c5f77, // subtext1
-        '12': #4c4f69, // 
+        '1':  #fcfcfd,  // elevation/1
+        '2':  #f6f7f9,  // elevation/2
+        '3':  #eff1f5,  // elevation/3
+        '4':  #e6e9ef,  // elevation/4
+        '5':  #d7dce6,  // elevation/5
+        '6':  #bcc0cc,  // elevation/6
+        '7':  #9ba7bf,  // elevation/7
+        '8':  #838fae,  // elevation/8
+        '9':  #717a9f,  // elevation/9
+        '10': #656c90, // elevation/10
+        '11': #565b77, // elevation/11
+        '12': #484b60, // elevation/12
     )
 );
 
 // init lui-micro, css-vars only (no reboot, no basic)
 @include lui.init(
-    $theme: (
-        colors: $colors,
-        variables: (
-            'base-font-size': 14px,
-            'font-family': '"Outfit", Inter, Roboto, sans-serif',
-            'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
-            'measure': (
-                '.25x': 4px,
-                '.5x': 8px,
-                '1x': 16px,
-                '1.25x': 20px,
-                '1.5x': 24px,
-                '2x': 32px,
-                '3x': 48px,
-                '4x': 64px,
-            ),
-            'repo-home': (
-                'sidebar-width': 296px,
-            )
-        ),
-    ),
-    
+    $theme: (colors: $colors, variables: vars.$variables),
     $options: (
         reboot: false,
         basic: false,
@@ -77,6 +53,4 @@ $colors: (
     ),
 );
 
-@include theme.make-theme(
-    $is-dark: $is-dark,
-);
+@include theme.make-theme($is-dark);

src/themes/scss/theme/components/_avatar.scss

@@ -0,0 +1,8 @@
+@mixin avatar {
+    img.ui.avatar, .ui.avatar img, .ui.avatar svg {
+        &:not(.org-avatar) {
+            border-radius: 50% !important;
+            object-fit: fill;
+        }
+    }
+}

src/themes/scss/theme/components/_boxes.scss

@@ -0,0 +1,89 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+
+@mixin segment {
+    .ui.segment {
+        margin: var.get('measure/1x') 0;
+        padding: var.get('measure/1x');
+        border-radius: var(--border-radius);
+    }
+
+    .ui.segment form >*:first-child {
+        margin-top: 0;
+    }
+
+    .ui.segment form >*:last-child {
+        margin-bottom: 0;
+    }
+
+    .ui.top.attached.header {
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
+    }
+
+    .ui.attached.segment:has(+.ui[class*="top attached"].header), .ui.attached.segment:has(+.page.buttons), .ui.attached.segment:last-child, .ui.segment:has(+.ui.segment:not(.attached)), .ui.attached.segment:has(+.ui.modal) {
+        border-bottom-left-radius: var(--border-radius);
+        border-bottom-right-radius: var(--border-radius);
+    }
+
+    .ui.segments:not(.horizontal)>.segment:first-child, .ui.segments.horizontal>.segment:first-child {
+        border-radius: var(--border-radius);
+    }
+
+    .ui.segments:not(.horizontal)>.segment:last-child, .ui.horizontal.segments>.segment:last-child {
+        border-radius: var(--border-radius);
+    }
+}
+
+@mixin comments {
+    .comment {
+        .content {
+            background-color: var(--color-box-body);
+
+            >.comment-header, >.ui.segment {
+                &:before, &:after {
+                    display: none;
+                }
+            }
+
+            .comment-header {
+                padding: var.get('measure/.25x') var.get('measure/.25x') var.get('measure/.25x') var.get('measure/1x') !important;
+
+                .comment-header-left {
+                    .text {
+                        color: color.get('subtle') !important;
+
+                        .author {
+                            color: color.get('text') !important;
+                        }
+                    }
+                }
+
+                .comment-header-right {
+                    * {
+                        color: color.get('subtle') !important;
+                    }
+                    
+                    .label {
+                        height: var.get('measure/1.25x', 1.25rem) !important;
+                        padding: 0px var.get('measure/.375x') !important;
+                        border-radius: var.get('measure/1x') !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .comment-list .comment>.content>div:last-child {
+        border-bottom-left-radius: var(--border-radius) !important;
+        border-bottom-right-radius: var(--border-radius) !important;
+    }
+
+    .comment-list .comment>.content>div:first-child {
+        border-top-left-radius: var(--border-radius) !important;
+        border-top-right-radius: var(--border-radius) !important;
+    }
+
+    .ui.comments .comment {
+        margin: var.get('measure/.25x') 0 0;
+    }
+}

src/themes/scss/theme/components/_editor.scss

@@ -0,0 +1,143 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+
+@mixin editor {
+    .combo-markdown-editor {
+        .top.tabular.menu {
+            background-color: var(--color-box-header);
+            border-radius: var(--border-radius) var(--border-radius) 0 0;
+            min-height: 0px;
+            margin-bottom: var.get('measure/1x') !important;
+            
+            .item {
+                margin: -1px 0 0 -1px; // merge borders
+                border-top-left-radius: var(--border-radius) !important;
+                border-top-right-radius: var(--border-radius) !important;
+                padding: var.get('measure/.5x') var.get('measure/.75x') !important;
+                font-weight: 400;
+
+                &:hover {
+                    color: var(--color-text-light-2);
+                }
+
+                &.active {
+                    color: var(--color-text);
+                    &:after {
+                        // a hacky 1 pixel "button border" to make the border
+                        // of the whole menu disappear under the active tab
+                        display: block;
+                        content: '';
+                        position: absolute;
+                        top: 100%;
+                        right: 0;
+                        width: 100%;
+                        height: 1px;
+                        background-color: var(--color-body);
+                    }
+                }
+            }
+        }
+
+        .tab {
+            .EasyMDEContainer { // legacy editor
+                border: none !important;
+
+                .editor-toolbar {
+                    border: none !important;
+                }
+            }
+
+            markdown-toolbar, .EasyMDEContainer .editor-toolbar {
+                padding: 0 10px !important;
+
+                .markdown-toolbar-group {
+                    border: none !important;
+                    padding: 0 !important;
+
+                    &:not(:last-child) {
+                        &:after {
+                            content: '';
+                            display: block;
+                            position: relative;
+                            width: 1px;
+                            flex: 1;
+                            margin: var.get('measure/.375x') var.get('measure/.375x') !important;
+                            background-color: color.get('elevation/6');
+                        }
+                    }
+                }
+
+                .markdown-toolbar-button, button {
+                    line-height: 0;
+                    display: inline-block;
+                    color: var(--color-text-light-2) !important;
+                    padding: var.get('measure/.375x') !important;
+                    transition: background-color .1s ease;
+                    border-radius: var.get('measure/.375x') !important;
+                    height: auto;
+                    min-width: fit-content;
+
+                    &:hover {
+                        background-color: color.get('elevation/5') !important;
+                    }
+                    
+                    // if has attribute level
+                    &[level] {
+                        width: 34px;
+                    }
+
+                    // if aria-checked is true
+                    &[aria-checked="true"] {
+                        background-color: color.get('elevation/4');
+                    }
+                }
+
+                button {
+                    &:after {
+                        vertical-align: unset !important;
+                    }
+                }
+            }
+            
+            textarea, .CodeMirror.cm-s-easymde.CodeMirror-wrap {
+                background-color: transparent !important;
+                border: none !important;
+                padding: var.get('measure/1x') var.get('measure/1x') !important;
+            }
+
+            .editor-statusbar {
+                margin-bottom: 0 !important;
+            }
+
+            &.markup {
+                padding: 0 var.get('measure/1x') var.get('measure/1x');
+            }
+        }
+    }
+
+    .combo-markdown-editor {
+        border: 1px solid var(--color-secondary);
+        border-radius: var(--border-radius);
+        &:focus-within {
+            outline: 2px solid var(--color-accent);
+            border-radius: var(--border-radius);
+        }
+
+        textarea:focus {
+            outline: none !important;
+        }
+
+        .ui.tab.markup[data-tab-panel=markdown-previewer] {
+            border-bottom: 0px;
+        }
+    }
+
+    #comment-form, .edit-content-zone, .comment-form, .comment-code-cloud form {
+        padding: 0 !important;
+        border: none !important;
+
+        .field {
+            margin-bottom: var.get('measure/1x') !important;
+        }
+    }
+}

src/themes/scss/theme/components/_file-content.scss

@@ -0,0 +1,45 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+
+@mixin file-content {
+    .non-diff-file-content {
+        .ui.segment.list-header {
+            border-radius: var(--border-radius);
+            margin-bottom: var.get('measure/1x') !important;
+            gap: var.get('measure/.5x');
+            padding: var.get('measure/.5x') var.get('measure/.75x');
+            
+            .latest-commit {
+                gap: var.get('measure/.5x');
+            }
+
+            .commit-summary {
+                color: color.get('subtle');
+            }
+
+            .age {
+                font-size: 12px;
+            }
+        }
+
+        .ui.top.attached.header {
+            border-top-left-radius: var(--border-radius);
+            border-top-right-radius: var(--border-radius);
+
+            .file-info {
+                color: color.get('subtle') !important;
+            }
+
+            .btn-octicon {
+                --color-text: #{color.get('subtle')};
+            }
+        }
+
+        .ui.attached.segment:has(+.ui[class*="top attached"].header), .ui.attached.segment:has(+.page.buttons), .ui.attached.segment:last-child, .ui.segment:has(+.ui.segment:not(.attached)), .ui.attached.segment:has(+.ui.modal) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            border-bottom-left-radius: var(--border-radius);
+            border-bottom-right-radius: var(--border-radius);
+        }
+    }
+}

src/themes/scss/theme/components/_forms.scss

@@ -0,0 +1,11 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+@use './forms/' as forms;
+
+@mixin forms {
+    @include forms.dropdown-menu;
+    @include forms.menu;
+    @include forms.tabular-menu;
+    @include forms.input;
+}
+

src/themes/scss/theme/components/_labels.scss

@@ -0,0 +1,64 @@
+@use '@lucas-labs/lui-micro/color' as color;
+@use '@lucas-labs/lui-micro/var' as var;
+
+@mixin label-signed {
+    .label.isSigned {
+        font-size: var.get('font-size/sm') !important;
+        margin: 0px .25em !important;
+        padding: 0 !important;
+        display: inline-flex !important;
+        gap: 0px !important;
+        border-radius: 16px !important;
+
+        --color-light-border: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
+        --color-label-bg: none !important;
+        --color-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
+        --color-green-badge-bg: none !important;
+        --color-green-badge-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.05) !important;
+        --color-label-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.05) !important;
+        --color-label-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
+        --color-green-badge: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
+
+        .shortsha {
+            padding: 2px 6px 2px 8px !important;
+        }
+
+        .ui.detail.icon.button {
+            opacity: 1 !important;
+            padding: 2px 8px 2px 6px !important;
+            margin: 0 !important;
+            background: none !important;
+            border-color: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
+        }
+
+        &.isVerified {
+            .ui.detail.icon.button {
+                padding: 2px 8px 2px 6px !important;
+            }
+        }
+    }
+}
+
+@mixin label-default {
+    .ui.label {
+        border-radius: var.get('measure/1.25x');
+
+        &.scope-left {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        &.scope-right {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        &.green {
+            color: var(--color-green-contrast) !important;
+        }
+
+        &.red {
+            color: var(--color-red-contrast) !important;
+        }
+    }
+}

src/themes/scss/theme/components/_markup.scss

@@ -0,0 +1,35 @@
+@use '@lucas-labs/lui-micro/color' as color;
+@use '@lucas-labs/lui-micro/var' as var;
+
+@mixin markup {
+    .markup {
+        .task-list-item input[type=checkbox] {
+            margin: 0 .5em .25em -1.4em;
+        }
+
+        input[type=checkbox] {
+            --border-radius: #{var.get('measure/.25x')};
+            width: var.get('measure/1x');
+            height: var.get('measure/1x');
+            margin-right: 4px;
+            --color-input-background: #{color.get('elevation/5')};
+            
+            &:checked {
+                background-color: var(--color-primary);
+            }
+
+            &:after {
+                --color-text: var(--color-primary-contrast);
+            }
+
+            &:not([disabled]):hover, &:not([disabled]):active {
+                border-color: var(--color-secondary);
+                background-color: color.get('elevation/6');
+
+                &:checked {
+                    background-color: var(--color-primary-hover);
+                }
+            }
+        }        
+    }
+}

src/themes/scss/theme/components/button/index.scss

@@ -0,0 +1,128 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+
+@mixin hollow {
+    --border-radius: #{var.get('measure/.25x')};
+
+    padding: var.get('measure/.375x') var.get('measure/.5x') !important;
+    background-color: transparent !important;
+    font-weight: normal;
+
+    button, .button {
+        border-color: color.get('elevation/6') !important;
+        gap: var.get('measure/.5x') !important;
+        border-radius: var(--border-radius);
+
+        &:hover {
+            border-color: color.get('elevation/7') !important;
+
+            +.label {
+                border-left-color: color.get('elevation/7') !important;
+            }
+        }
+    }
+
+    &.labeled {
+        button, .button {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }        
+
+        .label {
+            border-color: color.get('elevation/6') !important;
+            background-color: transparent !important;
+
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-top-right-radius: var(--border-radius);
+            border-bottom-right-radius: var(--border-radius);
+            
+            
+            &:hover {
+                border-color: color.get('elevation/7') !important;
+            }
+        }
+    }
+
+    &:hover {
+        border-color: color.get('elevation/7') !important;
+    }
+}
+
+@mixin gitea-button {
+    .ui.icon.buttons .button, .ui.icon.button:not(.compact) {
+        // padding: 50px;
+    }
+
+    .code-comment-buttons-buttons {
+        button:not(.labeled):not(.icon) {
+            padding: .78571429em !important;
+        }
+    }
+
+    // buttons group
+    .ui.buttons {
+        &.icon .button, &.icon:not(.compact) {
+            padding: 50px 50px;
+        }
+
+        .button {
+            &:first-child {
+                border-top-left-radius: var(--border-radius);
+                border-bottom-left-radius: var(--border-radius);
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+
+            &.button:last-child {
+                border-top-right-radius: var(--border-radius);
+                border-bottom-right-radius: var(--border-radius);
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            border-right: none;
+            flex: 1 0 auto;
+            border-radius: 0;
+            margin: 0;
+        }
+    }
+
+    .ui.button {
+        border-radius: var(--border-radius);
+        transition: color .1s ease, background-color .1s ease, border-color .1s ease;
+        padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/1x');
+        font-size: var.get('font-size/md');
+        line-height: 20px;
+
+        &.tiny {
+            font-size: var.get('font-size/sm');
+            line-height: var.get('font-size/sm');
+        }
+
+        &.basic {
+            border-radius: var(--border-radius);
+        }
+
+        &.red, &.red.basic {
+            border-color: var(--color-secondary);
+            background: var(--color-button);
+            color: var(--color-red);
+
+            &:hover {
+                background: var(--color-red-dark-2);
+                color: var(--color-white);
+            }
+
+            &.basic {
+                border-color: rgba(#{color.get('palette/red/base', 'rgb')}, 0.4);
+            }
+        }
+
+        &.primary, &.red, &.basic {
+            font-weight: 500;
+        }
+    }
+
+    
+}

src/themes/scss/theme/components/forms/_input.scss

@@ -0,0 +1,86 @@
+@use '@lucas-labs/lui-micro/color' as color;
+@use '@lucas-labs/lui-micro/var' as var;
+
+@mixin -all-inputs($state: null) {
+    input#{$state},
+    textarea#{$state},
+    .ui.input>input#{$state},
+    .ui.form input:not([type])#{$state},
+    .ui.form select#{$state},
+    .ui.form textarea#{$state},
+    .ui.form input[type=date]#{$state},
+    .ui.form input[type=datetime-local]#{$state},
+    .ui.form input[type=email]#{$state},
+    .ui.form input[type=file]#{$state},
+    .ui.form input[type=number]#{$state},
+    .ui.form input[type=password]#{$state},
+    .ui.form input[type=search]#{$state},
+    .ui.form input[type=tel]#{$state},
+    .ui.form input[type=text]#{$state},
+    .ui.form input[type=time]#{$state},
+    .ui.form input[type=url]#{$state},
+    .ui.selection.dropdown#{$state} {
+        @content;
+    }
+}
+
+@mixin input {
+    @include -all-inputs {
+        border-color: var(--color-input-border);
+        color: var(--color-input-text);
+        border-radius: var(--border-radius);
+        line-height: 20px;
+        min-height: auto;
+        padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/.75x');
+        
+        +.ui.button:last-child {
+            border-top-right-radius: var(--border-radius);
+            border-bottom-right-radius: var(--border-radius);
+        }
+    }
+
+    @include -all-inputs(':hover') {
+        // border-radius: var(--border-radius);
+        border-color: var(--color-input-border);
+        color: var(--color-input-text)
+    }
+
+    @include -all-inputs(':focus') {
+        border-radius: var(--border-radius);
+        border-color: var(--color-input-border);
+        color: var(--color-input-text);
+        outline: 2px solid var(--color-accent);
+        background-color: color.get('elevation/2');
+    }
+
+    @include -all-inputs('.active') {
+        border-radius: var(--border-radius);
+        outline: 2px solid var(--color-accent);
+    }
+
+    .ui.action.input:not([class*="left action"])>input:focus {
+        border-right-color: var(--color-input-border);
+        z-index: 1;
+    }
+
+    .ui.action.input>.dropdown:not(:first-child):not(:last-child),
+    .ui.action.input>.button:not(:first-child):not(:last-child),
+    .ui.action.input>.buttons:not(:first-child):not(:last-child)>.button {
+        border-radius: 0 !important;
+    }
+
+    .ui.action.input:not([class*="left action"])>input:focus+.ui.dropdown.selection,
+    .ui.action.input:not([class*="left action"])>input:focus+.ui.dropdown.selection:hover,
+    .ui.action.input:not([class*="left action"])>input:focus+.button,
+    .ui.action.input:not([class*="left action"])>input:focus+.button:hover,
+    .ui.action.input:not([class*="left action"])>input:focus+i.icon+.button,
+    .ui.action.input:not([class*="left action"])>input:focus+i.icon+.button:hover {
+        border-left-color: var(--color-input-border);
+    }
+
+    .ui.form .field>label {
+        margin: 0 0 var.get('measure/.375x');
+        font-size: var.get('font-size/md');
+        font-weight: 600;
+    }
+}

src/themes/scss/theme/components/forms/_menu.scss

@@ -0,0 +1,214 @@
+@use '@lucas-labs/lui-micro/color' as color;
+@use '@lucas-labs/lui-micro/var' as var;
+
+@mixin dropdown-menu {
+    .ui.dropdown {
+        // dropdown menu
+        >.menu {
+            --border-radius: #{var.get('measure/.75x')};
+
+            opacity: 0;
+            overflow-x: hidden;
+            &.hidden { opacity: 0 !important;}
+            &.visible { opacity: 1 !important; }
+
+            border-radius: var(--border-radius) !important;
+            transition: opacity .2s ease !important;
+            box-shadow: 0px 6px 12px -3px rgba(var(--color-shadow-rgb), 0.5), 
+                        0px 6px 18px 0px rgba(var(--color-shadow-rgb), 0.1) !important;
+
+            .divider {
+                margin-top: var.get('measure/.5x') !important;
+                margin-bottom: var.get('measure/.5x') !important;
+            }
+
+            .item:not(.comment-reaction-button) {
+                --border-radius: #{var.get('measure/.375x')};
+
+                margin: 0 var.get('measure/.5x') !important;
+                border-radius: var(--border-radius) !important;
+                padding: var.get('measure/.375x') var.get('measure/.5x') !important;
+                line-height: 1 !important;
+                display: flex;
+                flex-wrap: wrap;
+                align-content: center;
+                width: auto;
+
+                &:first-of-type {
+                    margin-top: var.get('measure/.5x') !important;
+                }
+
+                &:last-of-type {
+                    margin-bottom: var.get('measure/.5x') !important;
+                }
+
+                &.clear-selection {
+                    margin-bottom: var.get('measure/.5x') !important;
+                }
+            }
+
+            input[type="text"], input[name="search"] {
+                --color-input-background: #{color.get('elevation/1')};
+                --color-input-border: #{color.get('elevation/5')};
+
+                min-height: var.get('measure/2x') !important;
+                padding: 0 var.get('measure/.5x') !important;
+                font-size: var.get('font-size/md') !important;
+                border-radius: var.get('measure/.375x') !important;
+
+                &:focus {
+                    --color-primary: var(--color-accent);
+                }
+            }
+
+            .scrolling.menu {
+                .item {                
+                    gap: var.get('measure/.5x') !important;
+        
+                    &:hover {
+                        &:before {
+                            position: absolute;
+                            top: calc(50% - 12px);
+                            left: -8px;
+                            width: 4px;
+                            height: 24px;
+                            content: "";
+                            background-color: var(--color-accent);
+                            border-radius: 6px;
+                        }
+                    }
+            
+                    .item-check-mark {
+                        background-color: color.get('elevation/6');
+                        visibility: visible !important;
+                        display: inline-flex;
+                        padding: 2px;
+                        border-radius: var.get('measure/.375x');
+                        border: 1px solid color.get('elevation/8');
+        
+                        svg {
+                            visibility: hidden;
+                        }
+                    }
+        
+                    .item-secondary-info {
+                        flex-basis: 100%;
+                        padding: 0 0 0 var.get('measure/.5x');
+                        color: color.get('subtle');
+                        line-height: 100%;
+                        white-space: nowrap;
+                        overflow-x: hidden;
+
+                        small {
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                        }
+                    }
+        
+                    &.checked {
+                        .item-check-mark {
+                            background-color: var(--color-accent);
+        
+                            svg {
+                                visibility: visible;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        // if not .upward
+        &:not(.upward) {
+            >.menu {
+                top: calc(100% + var.get('measure/.5x')) !important;
+            }
+        }
+
+        &.upward {
+            >.menu {
+                bottom: calc(100% + var.get('measure/.5x')) !important;
+            }
+        }
+
+        &.upward.selection.visible, &.active.upward.selection {
+            border-top-left-radius: var(--border-radius) !important;
+            border-top-right-radius: var(--border-radius) !important;
+            border-bottom-left-radius: var(--border-radius) !important;
+            border-bottom-right-radius: var(--border-radius) !important;
+        }
+
+        &.selection.active, &.selection.active:hover, &.selection.active .menu, &.selection.active:hover .menu {
+            border-color: var(--color-secondary) !important;
+        }
+
+        // select type dropdown
+        &.selection {
+            --border-radius: #{var.get('measure/.5x')};
+            border-radius: var(--border-radius) !important;
+
+            &:focus, &.active {
+                border-color: var(--color-secondary) !important;
+                outline: 2px solid var(--color-accent);
+            }
+
+            &.active {
+                border-radius: var(--border-radius) !important;
+            }
+
+            >.menu {
+                border-radius: var(--border-radius) !important;
+                border-top-width: 1px !important;
+                border-color: var(--color-secondary) !important;
+                flex-direction: column;
+                gap: var.get('measure/.25x');
+
+                &.visible {
+                    display: flex;
+                }
+
+                .item {
+                    border: none !important;
+                }
+            }
+        }
+    }
+}
+
+@mixin menu {
+    .ui.menu {
+        border-radius: var(--border-radius);
+
+        >.item:first-child {
+            border-radius: var(--border-radius) 0 0 var(--border-radius);
+        }
+
+        &.compact:not(.secondary) .item:last-child {
+            border-radius: 0 var(--border-radius) var(--border-radius) 0;
+        }
+    }
+
+    .ui.secondary.menu {
+        gap: var.get('measure/.25x');
+
+        &.vertical {
+            >.item {
+                border: none;
+                margin: 0 0 var.get('measure/.25x') 0;
+                border-radius: var(--border-radius) !important;
+            }
+        }
+
+        .dropdown.item.active:hover, a.item.active:hover {
+            color: var(--color-text);
+            background: var(--color-hover);
+        }
+    }    
+}
+
+@mixin tabular-menu {
+    .ui.tabular.menu .active.item, .ui.tabular.menu .active.item:hover {
+        border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
+    }
+}

src/themes/scss/theme/components/forms/index.scss

@@ -0,0 +1,2 @@
+@forward './menu';
+@forward './input';

src/themes/scss/theme/components/index.scss

@@ -0,0 +1,8 @@
+@forward './labels';
+@forward './editor';
+@forward './forms';
+@forward './file-content';
+@forward './avatar';
+@forward './button';
+@forward './boxes';
+@forward './markup';

src/themes/scss/theme/index.scss

@@ -1,381 +1,30 @@
-@use '@lucas-labs/lui-micro/color' as color;
-@use './modules/chroma' as chroma;
-@use './modules/monaco' as monaco;
-@use './modules/codemirror' as codemirror;
-@use './modules/custom' as custom;
-@use '@lucas-labs/lui-micro/var' as var;
+@use './vars';
+@use './components';
+@use './modules';
 
 @mixin make-theme($is-dark: true) {
-    $lvl1: #{color.get('elevation/3')};
-    $lvl1-rgb: #{color.get('elevation/3', 'rgb')};
-    $lvl2: #{color.get('elevation/2')};
-    $lvl2-rgb: #{color.get('elevation/2', 'rgb')};
-    $lvl3: #{color.get('elevation/1')};
-    $lvl3-rgb: #{color.get('elevation/1', 'rgb')};
+    @include vars.base;
+    @include vars.colors($is-dark);
 
-    :root {
-        * {
-            --fonts-regular: #{var.get('font-family')};
-            --fonts-monospace: #{var.get('code-font-family')};
-        }
+    // components
+    @include components.label-default;  // label for GPG signed commits
+    @include components.label-signed;   // label for GPG signed commits
+    @include components.editor;         // github-style (kinda) markdown editor in comments, issues, etc.
+    @include components.forms;          // github-style dropdown menus
+    @include components.file-content;   // github-style file content
+    @include components.avatar;         // github-style avatars
+    @include components.gitea-button;   // github-style buttons
+    @include components.segment;
+    @include components.comments;       // github-style comment boxes
+    @include components.markup;         // styling rendered for markdown content
 
-        @if $is-dark {
-            color-scheme: dark;
-            --is-dark-theme: true;
-        } @else {
-            color-scheme: light;
-            --is-dark-theme: false;
-        }
+    // code highlighting
+    @include modules.chroma($is-dark);  // syntax highlighting
+    @include modules.codemirror;        // code editor
+    @include modules.monaco;            // vscode-like code editor
+    @include modules.settings;          // settings & profile pages
 
-        accent-color: #{color.get('primary/base')};
-
-        --color-primary: #{color.get('primary/base')};
-        --color-primary-contrast: #{color.get('primary/base', 'contrast')};
-
-        --color-primary-dark-1: #{color.get('primary/dark/3%')};
-        --color-primary-dark-2: #{color.get('primary/dark/6%')};
-        --color-primary-dark-3: #{color.get('primary/dark/9%')};
-        --color-primary-dark-4: #{color.get('primary/dark/12%')};
-        --color-primary-dark-5: #{color.get('primary/dark/15%')};
-        --color-primary-dark-6: #{color.get('primary/dark/18%')};
-        --color-primary-dark-7: #{color.get('primary/dark/21%')};
-
-        --color-primary-light-1: #{color.get('primary/light/3%')};
-        --color-primary-light-2: #{color.get('primary/light/6%')};
-        --color-primary-light-3: #{color.get('primary/light/9%')};
-        --color-primary-light-4: #{color.get('primary/light/12%')};
-        --color-primary-light-5: #{color.get('primary/light/15%')};
-        --color-primary-light-6: #{color.get('primary/light/18%')};
-        --color-primary-light-7: #{color.get('primary/light/21%')};
-
-        --color-primary-alpha-10: rgba(#{color.get('primary/base', 'rgb')}, 0.1);
-        --color-primary-alpha-20: rgba(#{color.get('primary/base', 'rgb')}, 0.2);
-        --color-primary-alpha-30: rgba(#{color.get('primary/base', 'rgb')}, 0.3);
-        --color-primary-alpha-40: rgba(#{color.get('primary/base', 'rgb')}, 0.4);
-        --color-primary-alpha-50: rgba(#{color.get('primary/base', 'rgb')}, 0.5);
-        --color-primary-alpha-60: rgba(#{color.get('primary/base', 'rgb')}, 0.6);
-        --color-primary-alpha-70: rgba(#{color.get('primary/base', 'rgb')}, 0.7);
-        --color-primary-alpha-80: rgba(#{color.get('primary/base', 'rgb')}, 0.8);
-        --color-primary-alpha-90: rgba(#{color.get('primary/base', 'rgb')}, 0.9);
-
-        --color-secondary: #{color.get('elevation/5')};
-
-        --color-secondary-dark-1: #{color.get('secondary/light/3%')};
-        --color-secondary-dark-2: #{color.get('secondary/light/6%')};
-        --color-secondary-dark-3: #{color.get('secondary/light/9%')};
-        --color-secondary-dark-4: #{color.get('secondary/light/12%')};
-        --color-secondary-dark-5: #{color.get('secondary/light/15%')};
-        --color-secondary-dark-6: #{color.get('secondary/light/18%')};
-        --color-secondary-dark-7: #{color.get('secondary/light/21%')};
-        --color-secondary-dark-8: #{color.get('secondary/light/24%')};
-        --color-secondary-dark-9: #{color.get('secondary/light/27%')};
-        --color-secondary-dark-10: #{color.get('secondary/light/30%')};
-        --color-secondary-dark-11: #{color.get('secondary/light/33%')};
-        --color-secondary-dark-12: #{color.get('secondary/light/36%')};
-        --color-secondary-dark-13: #{color.get('secondary/light/39%')};
-
-        --color-secondary-light-1: #{color.get('secondary/dark/3%')};
-        --color-secondary-light-2: #{color.get('secondary/dark/6%')};
-        --color-secondary-light-3: #{color.get('secondary/dark/9%')};
-        --color-secondary-light-4: #{color.get('secondary/dark/12%')};
-
-        --color-secondary-alpha-10: rgba(#{color.get('secondary/base', 'rgb')}, 0.1);
-        --color-secondary-alpha-20: rgba(#{color.get('secondary/base', 'rgb')}, 0.2);
-        --color-secondary-alpha-30: rgba(#{color.get('secondary/base', 'rgb')}, 0.3);
-        --color-secondary-alpha-40: rgba(#{color.get('secondary/base', 'rgb')}, 0.4);
-        --color-secondary-alpha-50: rgba(#{color.get('secondary/base', 'rgb')}, 0.5);
-        --color-secondary-alpha-60: rgba(#{color.get('secondary/base', 'rgb')}, 0.6);
-        --color-secondary-alpha-70: rgba(#{color.get('secondary/base', 'rgb')}, 0.7);
-        --color-secondary-alpha-80: rgba(#{color.get('secondary/base', 'rgb')}, 0.8);
-        --color-secondary-alpha-90: rgba(#{color.get('secondary/base', 'rgb')}, 0.9);
-
-        /* colors */
-        --color-red: #{color.get('theme/red/base')};
-        --color-orange: #{color.get('theme/peach/base')};
-        --color-yellow: #{color.get('theme/yellow/base')};
-        --color-olive: #{color.get('theme/green/base')};
-        --color-green: #{color.get('theme/green/base')};
-        --color-teal: #{color.get('theme/teal/base')};
-        --color-blue: #{color.get('theme/blue/base')};
-        --color-violet: #{color.get('theme/lavender/base')};
-        --color-purple: #{color.get('theme/mauve/base')};
-        --color-pink: #{color.get('theme/pink/base')};
-        --color-brown: #{color.get('theme/flamingo/base')};
-        --color-grey: #{color.get('elevation/9')};
-        --color-black: #{color.get('elevation/1')};
-
-        /* dark variants */
-        --color-red-dark-1: #{color.get('theme/red/dark/12%')};
-        --color-orange-dark-1: #{color.get('theme/peach/dark/12%')};
-        --color-yellow-dark-1: #{color.get('theme/yellow/dark/12%')};
-        --color-olive-dark-1: #{color.get('theme/green/dark/12%')};
-        --color-green-dark-1: #{color.get('theme/green/dark/12%')};
-        --color-teal-dark-1: #{color.get('theme/teal/dark/12%')};
-        --color-blue-dark-1: #{color.get('theme/blue/dark/12%')};
-        --color-violet-dark-1: #{color.get('theme/lavender/dark/12%')};
-        --color-purple-dark-1: #{color.get('theme/mauve/dark/12%')};
-        --color-pink-dark-1: #{color.get('theme/pink/dark/12%')};
-        --color-brown-dark-1: #{color.get('theme/flamingo/dark/12%')};
-
-        --color-red-dark-2: #{color.get('theme/red/dark/15%')};
-        --color-orange-dark-2: #{color.get('theme/peach/dark/15%')};
-        --color-yellow-dark-2: #{color.get('theme/yellow/dark/15%')};
-        --color-olive-dark-2: #{color.get('theme/green/dark/15%')};
-        --color-green-dark-2: #{color.get('theme/green/dark/15%')};
-        --color-teal-dark-2: #{color.get('theme/teal/dark/15%')};
-        --color-blue-dark-2: #{color.get('theme/blue/dark/15%')};
-        --color-violet-dark-2: #{color.get('theme/lavender/dark/15%')};
-        --color-purple-dark-2: #{color.get('theme/mauve/dark/15%')};
-        --color-pink-dark-2: #{color.get('theme/pink/dark/15%')};
-        --color-brown-dark-2: #{color.get('theme/flamingo/dark/15%')};
-
-        /* light variants  */
-        --color-red-light: #{color.get('theme/red/light/12%')};
-        --color-orange-light: #{color.get('theme/peach/light/12%')};
-        --color-yellow-light: #{color.get('theme/yellow/light/12%')};
-        --color-olive-light: #{color.get('theme/green/light/12%')};
-        --color-green-light: #{color.get('theme/green/light/12%')};
-        --color-teal-light: #{color.get('theme/teal/light/12%')};
-        --color-blue-light: #{color.get('theme/blue/light/12%')};
-        --color-violet-light: #{color.get('theme/lavender/light/12%')};
-        --color-purple-light: #{color.get('theme/mauve/light/12%')};
-        --color-pink-light: #{color.get('theme/pink/light/12%')};
-        --color-brown-light: #{color.get('theme/flamingo/light/12%')};
-        --color-grey-light: #{color.get('elevation/11')};
-        --color-black-light: #{if(
-                is-dark,
-                color.get('theme/black/light/12%'),
-                color.get('theme/white/light/12%')
-            )};
-
-        /* other colors */
-        --color-gold: #{color.get('theme/rosewater/base')};
-        --color-white: #{color.get('text')};
-        --color-diff-removed-word-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15);
-        --color-diff-added-word-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15);
-        --color-diff-removed-row-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.07);
-        --color-diff-moved-row-bg: rgba(#{color.get('theme/yellow/base', 'rgb')}, 0.07);
-        --color-diff-added-row-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.07);
-        --color-diff-removed-row-border: rgba(#{color.get('theme/red/base', 'rgb')}, 0.07);
-        --color-diff-moved-row-border: rgba(#{color.get('theme/yellow/base', 'rgb')}, 0.07);
-        --color-diff-added-row-border: rgba(#{color.get('theme/green/base', 'rgb')}, 0.07);
-        --color-diff-inactive: #{color.get('elevation/9')};
-        --color-error-border: #{color.get('theme/red/base')};
-        --color-error-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15);
-        --color-error-bg-active: #{color.get('theme/red/light/6%')};
-        --color-error-bg-hover: #{color.get('theme/red/light/12%')};
-        --color-error-text: #{color.get('theme/red/base')};
-        --color-success-border: #{color.get('theme/green/light/12%')};
-        --color-success-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15);
-        --color-success-text: #{color.get('text')};
-        --color-warning-border: #{color.get('theme/yellow/light/12%')};
-        --color-warning-bg: #{color.get('theme/yellow/base')};
-        --color-warning-text: #{$lvl1};
-        --color-info-border: #{color.get('theme/blue/light/12%')};
-        --color-info-bg: #{$lvl1};
-        --color-info-text: #{color.get('text')};
-        --color-red-badge: #{color.get('theme/red/light/12%')};
-        --color-red-badge-bg: #{$lvl1};
-        --color-red-badge-hover-bg: #{color.get('theme/red/light/6%')};
-        --color-green-badge: #{color.get('theme/green/base')};
-        --color-green-badge-bg: #{$lvl1};
-        --color-green-badge-hover-bg: #{color.get('theme/green/light/6%')};
-        --color-yellow-badge: #{color.get('theme/yellow/base')};
-        --color-yellow-badge-bg: #{$lvl1};
-        --color-yellow-badge-hover-bg: #{color.get('theme/yellow/light/6%')};
-        --color-orange-badge: #{color.get('theme/peach/base')};
-        --color-orange-badge-bg: #{$lvl1};
-        --color-orange-badge-hover-bg: #{color.get('theme/peach/light/6%')};
-        --color-git: #{color.get('theme/peach/base')};
-        --color-label-bg: #{color.get('primary/base')};
-
-        /* target-based colors */
-        --color-body: #{$lvl1};
-        --color-box-header: #{rgba(color.get('elevation/2', 'rgb'), 1)};
-        --color-box-body: var(--color-body);
-        --color-box-body-highlight: #{color.get('elevation/4')};
-        --color-text-dark: #{color.get('elevation/10')};
-        --color-text: #{color.get('text')};
-        --color-text-light: #{color.get('elevation/12')};
-        --color-text-light-1: #{color.get('elevation/11')};
-        --color-text-light-2: #{color.get('elevation/10')};
-        --color-text-light-3: #{color.get('elevation/9')};
-        --color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2);
-        --color-timeline: #{color.get('elevation/4')};
-        --color-input-text: #{color.get('text')};
-        --color-input-background: #{color.get('elevation/4')};
-        --color-input-toggle-background: #{color.get('elevation/4')};
-        --color-input-border: #{color.get('elevation/5')};
-        --color-input-border-hover: #{color.get('elevation/6')};
-        --color-header-wrapper: #{$lvl2};
-        --color-header-wrapper-transparent: #00000000;
-        --color-light: #{color.get('elevation/6')};
-        --color-light-mimic-enabled: rgba(
-            0,
-            0,
-            0,
-            calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
-        );
-        --color-light-border: #{color.get('elevation/6')};
-        --color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.1);
-        --color-active: rgba(#{color.get('text', 'rgb')}, 0.1);
-        --color-menu: #{color.get('elevation/3')};
-        --color-card: #{color.get('elevation/3')};
-        --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02);
-        --color-markup-code-block: #{color.get('elevation/2')};
-        --color-button: #{color.get('elevation/4')};
-        --color-code-bg: $lvl1;
-        --color-code-sidebar-bg: #{color.get('elevation/4')};
-        --color-shadow: rgba(#{$lvl1-rgb}, 0.1);
-        --color-secondary-bg: #{color.get('elevation/4')};
-        --color-text-focus: #{color.get('text')};
-        --color-expand-button: #{color.get('elevation/6')};
-        --color-placeholder-text: #{color.get('elevation/6')};
-        --color-editor-line-highlight: var(--color-primary-light-5);
-        --color-project-board-bg: #{color.get('elevation/2')};
-        --color-caret: var(--color-text);
-        --color-reaction-bg: rgba(#{color.get('text', 'rgb')}, 0.07);
-        --color-reaction-active-bg: var(--color-primary-alpha-40);
-        --color-nav-bg: #{$lvl2};
-        --color-nav-hover-bg: #{color.get('elevation/6')};
-        --color-label-active-bg: #{color.get('elevation/6')};
-        --color-label-text: #{color.get('primary/base', 'contrast')};
-        --color-accent: var(--color-primary-light-1);
-        --color-small-accent: var(--color-primary-light-5);
-        --color-active-line: #{color.get('elevation/5')};
-    }
-
-    @if $is-dark {
-        /* invert emojis that are hard to read otherwise */
-        .emoji[aria-label='check mark'],
-        .emoji[aria-label='currency exchange'],
-        .emoji[aria-label='TOP arrow'],
-        .emoji[aria-label='END arrow'],
-        .emoji[aria-label='ON! arrow'],
-        .emoji[aria-label='SOON arrow'],
-        .emoji[aria-label='heavy dollar sign'],
-        .emoji[aria-label='copyright'],
-        .emoji[aria-label='registered'],
-        .emoji[aria-label='trade mark'],
-        .emoji[aria-label='multiply'],
-        .emoji[aria-label='plus'],
-        .emoji[aria-label='minus'],
-        .emoji[aria-label='divide'],
-        .emoji[aria-label='curly loop'],
-        .emoji[aria-label='double curly loop'],
-        .emoji[aria-label='wavy dash'],
-        .emoji[aria-label='paw prints'],
-        .emoji[aria-label='musical note'],
-        .emoji[aria-label='musical notes'] {
-            filter: invert(100%) hue-rotate(180deg);
-        }
-    }
-
-    .ui.ui.ui.button:not(.inverted, .basic),
-    .ui.ui.ui.label:not(.inverted, .basic) {
-        &.primary,
-        &.green,
-        &.red,
-        &.teal {
-            color: $lvl1;
-            &:hover {
-                color: $lvl3;
-            }
-        }
-    }
-
-    .ui.success.message, .ui.attached.success.message, .ui.positive.message, .ui.attached.positive.message {
-        background: var(--color-success-bg);
-        color: var(--color-success-text);
-        border-color: var(--color-success-border);
-    }
-
-    .ui.grey.labels .label, .ui.ui.ui.grey.label {
-        background-color: color.get('primary/base');
-        border-color: color.get('primary/base');
-        color: $lvl1;
-        font-weight: 900;
-    }   
-
-    .ui.label, .ui.menu .item>.label {
-        background: var(--color-label-bg);
-        color: var(--color-label-text);
-    }
-
-    .ui.basic.modal {
-        background-color: $lvl3;
-    }
-
-    .ui.error.message .header, .ui.negative.message .header, .ui.red.message .header {
-        color: var(--color-error-text);
-    }
-
-    // modal text color for the "Remove GPG Key" modal
-    .ui.basic.modal,
-    .ui.basic.modal > .header,
-    .ui.inverted.button {
-        color: color.get('text') !important;
-    }
-
-    ::selection {
-        background: rgba(#{color.get('theme/rosewater/base', 'rgb')}, 0.3) !important;
-    }
-
-    body {
-        font-size: var.get('base-font-size');
-    }
-
-    footer {
-        justify-content: flex-end !important;
-
-        .right-links {
-            justify-content: space-around !important;
-        }
-
-        .right-links>a {
-            border-left: none !important;
-            padding-left: 0px !important;
-            margin-left: 0px !important;
-        }
-
-        .ui.dropdown .menu {
-            left: -50% !important;
-            margin-bottom: 16px !important;
-        }
-    }
-
-    .label.isSigned.isVerified {
-        margin: 0px .25em !important;
-        padding: 0;
-        display: inline-flex;
-        gap: 0px;
-        border-radius: 16px;
-
-        --color-green-badge-bg: none !important;
-        --color-green-badge-hover-bg: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 0.05) !important;
-        --color-label-text: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
-        --color-green-badge: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
-
-        .shortsha {
-            padding: 4px 6px 4px 12px !important;
-        }
-
-        .ui.detail.icon.button {
-            opacity: 1;
-            padding: 4px 12px 4px 6px !important;
-            margin: 0 !important;
-            background: none !important;
-            border-color: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
-        }
-    }
-
-    #commits-table {
-        --color-light: transparent !important;
-    }
-
-    @include chroma.make-chroma-styles;
-    @include codemirror.make-code-mirror-styles;
-    @include monaco.make-monaco-styles($is-dark: true);
-
-    @include custom.apply-custom-styles;
+    // customized pages
+    @include modules.repo;              // repo page
+    @include modules.issues;            // issues page
 }

src/themes/scss/theme/modules/_chroma.scss

@@ -1,304 +1,100 @@
 @use '@lucas-labs/lui-micro/color' as color;
 @use '@lucas-labs/lui-micro/var' as var;
 
+@mixin chroma($dark: false) {
+    $orange:      if($dark, 'palette/orange/base', 'palette/orange/dark/15%');
+    $blue:        if($dark, 'palette/blue/base', 'palette/blue/dark/15%');
+    $fg:          'text';
+    $subtle:      'subtle';
+    $more-subtle: if($dark, 'elevation/8', 'elevation/8');
+    $brown:       if($dark, 'palette/brown/base', 'palette/brown/dark/15%');
+    $red:         if($dark, 'palette/red/base', 'palette/red/dark/15%');
+    $green:       if($dark, 'palette/green/base', 'palette/green/dark/10%');
+    $teal:        if($dark, 'palette/teal/base', 'palette/teal/dark/15%');
+    $purple:      if($dark, 'palette/purple/base', 'palette/purple/dark/10%');
+    $yellow:      if($dark, 'palette/yellow/base', 'palette/yellow/dark/25%');
+    $violet:      if($dark, 'palette/violet/base', 'palette/violet/dark/50%');
+    $pink:        if($dark, 'palette/pink/base', 'palette/pink/dark/25%');
+    $blwh:        if($dark, 'palette/white/base', 'palette/black/base');
 
-@mixin make-chroma-styles {
-    .chroma .code-inner{
-        font: 14px var.get('code-font-family');
-    }
+    .chroma {
+        .code-inner {
+            font: 14px var.get('code-font-family');
+        }
 
-    /* NameBuiltinPseudo */
-    .chroma .bp {
-        color: color.get('theme/peach/base');
-    }
-    /* Comment */
-    .chroma .c {
-        color: color.get('elevated/7');
-    }
-    /* CommentSingle */
-    .chroma .c1 {
-        color: color.get('elevated/7');
-    }
-    /* CommentHashbang */
-    .chroma .ch {
-        color: color.get('elevated/7');
-    }
-    /* CommentMultiline */
-    .chroma .cm {
-        color: color.get('elevated/7');
-    }
-    /* CommentPreproc */
-    .chroma .cp {
-        color: color.get('theme/blue/base');
-    }
-    /* CommentPreprocFile */
-    .chroma .cpf {
-        color: color.get('theme/blue/base');
-    }
-    /* CommentSpecial */
-    .chroma .cs {
-        color: color.get('elevated/7');
-    }
-    /* LiteralStringDelimiter */
-    .chroma .dl {
-        color: color.get('theme/blue/base');
-    }
-    /* NameFunctionMagic */
-    .chroma .fm {
-    }
-    /* Generic */
-    .chroma .g {
-    }
-    /* GenericDeleted */
-    .chroma .gd {
-        color: color.get('theme');
-        background-color: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15);
-    }
-    /* GenericEmph */
-    .chroma .ge {
-        font-style: italic;
-    }
-    /* GenericHeading */
-    .chroma .gh {
-        color: color.get('theme/sky/base');
-    }
-    /* GenericInserted */
-    .chroma .gi {
-        color: color.get('theme');
-        background-color: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15);
-    }
-    /* GenericUnderline */
-    .chroma .gl {
-    }
-    /* GenericOutput */
-    .chroma .go {
-        color: color.get('theme/peach/base');
-    }
-    /* GenericPrompt */
-    .chroma .gp {
-        color: color.get('elevated/7');
-        font-weight: bold;
-    }
-    /* GenericError */
-    .chroma .gr {
-        color: color.get('theme/maroon/base');
-    }
-    /* GenericStrong */
-    .chroma .gs {
-        font-weight: bold;
-    }
-    /* GenericTraceback */
-    .chroma .gt {
-        color: color.get('theme/maroon/base');
-    }
-    /* GenericSubheading */
-    .chroma .gu {
-        color: color.get('theme/sky/base');
-    }
-    /* LiteralNumberIntegerLong */
-    .chroma .il {
-        color: color.get('theme/peach/base');
-    }
-    /* Keyword */
-    .chroma .k {
-        color: color.get('theme/mauve/base');
-    }
-    /* KeywordConstant */
-    .chroma .kc {
-        color: color.get('theme/yellow/base');
-    }
-    /* KeywordDeclaration */
-    .chroma .kd {
-        color: color.get('theme/mauve/base');
-    }
-    /* KeywordNamespace */
-    .chroma .kn {
-        color: color.get('theme/yellow/base');
-    }
-    /* KeywordPseudo */
-    .chroma .kp {
-        color: color.get('theme/mauve/base');
-        font-weight: bold;
-    }
-    /* KeywordReserved */
-    .chroma .kr {
-        color: color.get('theme/mauve/base');
-    }
-    /* KeywordType */
-    .chroma .kt {
-        color: color.get('theme/yellow/base');
-    }
-    /* Literal */
-    .chroma .l {
-    }
-    /* LiteralDate */
-    .chroma .ld {
-    }
-    /* LiteralNumber */
-    .chroma .m {
-        color: color.get('theme/peach/base');
-    }
-    /* LiteralNumberBin */
-    .chroma .mb {
-        color: color.get('theme/peach/base');
-    }
-    /* LiteralNumberFloat */
-    .chroma .mf {
-        color: color.get('theme/peach/base');
-    }
-    /* LiteralNumberHex */
-    .chroma .mh {
-        color: color.get('theme/peach/base');
-    }
-    /* LiteralNumberInteger */
-    .chroma .mi {
-        color: color.get('theme/peach/base');
-    }
-    /* LiteralNumberOct */
-    .chroma .mo {
-        color: color.get('theme/peach/base');
-    }
-    /* Name */
-    .chroma .n {
-        color: color.get('theme/lavender/base');
-    }
-    /* NameAttribute */
-    .chroma .na {
-        color: color.get('theme/yellow/base');
-    }
-    /* NameBuiltin */
-    .chroma .nb {
-        color: color.get('theme/peach/base');
-    }
-    /* NameClass */
-    .chroma .nc {
-        color: color.get('theme/yellow/base');
-    }
-    /* NameDecorator */
-    .chroma .nd {
-        color: color.get('theme/pink/base');
-    }
-    /* NameException */
-    .chroma .ne {
-        color: color.get('theme/maroon/base');
-    }
-    /* NameFunction */
-    .chroma .nf {
-        color: color.get('theme/blue/base');
-    }
-    /* NameEntity */
-    .chroma .ni {
-        color: color.get('theme/pink/base');
-    }
-    /* NameLabel */
-    .chroma .nl {
-        color: color.get('theme/yellow/base');
-    }
-    /* NameNamespace */
-    .chroma .nn {
-        color: color.get('theme/yellow/base');
-    }
-    /* NameConstant */
-    .chroma .no {
-        color: color.get('theme/yellow/base');
-    }
-    /* NameTag */
-    .chroma .nt {
-        color: color.get('theme/mauve/base');
-    }
-    /* NameVariable */
-    .chroma .nv {
-        color: color.get('theme/peach/base');
-    }
-    /* NameOther */
-    .chroma .nx {
-        color: color.get('theme/peach/base');
-    }
-    /* Operator */
-    .chroma .o {
-        color: color.get('theme/sky/base');
-    }
-    /* OperatorWord */
-    .chroma .ow {
-        color: color.get('theme/sky/base');
-        font-weight: bold;
-    }
-    /* Punctuation */
-    .chroma .p {
-        color: color.get('elevated/9');
-    }
-    /* NameProperty */
-    .chroma .py {
-    }
-    /* LiteralString */
-    .chroma .s {
-        color: color.get('theme/green/base');
-    }
-    /* LiteralStringSingle */
-    .chroma .s1 {
-        color: color.get('theme/green/base');
-    }
-    /* LiteralStringDouble */
-    .chroma .s2 {
-        color: color.get('theme/green/base');
-    }
-    /* LiteralStringAffix */
-    .chroma .sa {
-        color: color.get('theme/green/base');
-    }
-    /* LiteralStringBacktick */
-    .chroma .sb {
-        color: color.get('theme/green/base');
-    }
-    /* LiteralStringChar */
-    .chroma .sc {
-        color: color.get('theme/green/base');
-    }
-    /* LiteralStringDoc */
-    .chroma .sd {
-        color: color.get('theme/green/base');
-    }
-    /* LiteralStringEscape */
-    .chroma .se {
-        color: color.get('theme/blue/base');
-    }
-    /* LiteralStringHeredoc */
-    .chroma .sh {
-        color: color.get('theme/green/base');
-    }
-    /* LiteralStringInterpol */
-    .chroma .si {
-        color: color.get('theme/green/base');
-    }
-    /* LiteralStringRegex */
-    .chroma .sr {
-        color: color.get('theme/blue/base');
-    }
-    /* LiteralStringSymbol */
-    .chroma .ss {
-        color: color.get('theme/green/base');
-    }
-    /* LiteralStringOther */
-    .chroma .sx {
-        color: color.get('theme/green/base');
-    }
-    /* NameVariableClass */
-    .chroma .vc {
-        color: color.get('theme/yellow/base');
-    }
-    /* NameVariableGlobal */
-    .chroma .vg {
-        color: color.get('theme/peach/base');
-    }
-    /* NameVariableInstance */
-    .chroma .vi {
-        color: color.get('theme/yellow/base');
-    }
-    /* NameVariableMagic */
-    .chroma .vm {
-    }
-    /* TextWhitespace */
-    .chroma .w {
-        color: color.get('elevated/4');
-    }
-}
+        .bp { color: color.get($orange); font-weight: 600;} // NameBuiltinPseudo
+        .c { color: color.get($subtle); font-style: italic; } // Comment 
+        .c1 { color: color.get($subtle); font-style: italic; } // CommentSingle
+        .ch { color: color.get($subtle); font-style: italic; } // CommentHashbang
+        .cm { color: color.get($subtle); font-style: italic; } // CommentMultiline
+        .cp { color: color.get($blue); } // CommentPreproc
+        .cpf { color: color.get($blue); } // CommentPreprocFile
+        .cs { color: color.get($subtle); } // CommentSpecial
+        .dl { color: color.get($blue); } // LiteralStringDelimiter
+        .fm {} // NameFunctionMagic
+        .g {} // Generic
+        .gd { color: color.get($blwh); background-color: rgba(#{color.get($red, 'rgb')}, .25); } // GenericDeleted
+        .ge { font-style: italic; } // GenericEmph
+        .gh { color: color.get($teal); } // GenericHeading
+        .gi { color: color.get($blwh); background-color: rgba(#{color.get($green, 'rgb')}, 0.3); } // GenericInserted
+        .gl {} // GenericUnderline
+        .go { color: color.get($orange); } // GenericOutput
+        .gp { color: color.get($subtle); font-weight: bold; } // GenericPrompt
+        .gr { color: color.get($brown); } // GenericError
+        .gs { font-weight: bold; } // GenericStrong
+        .gt { color: color.get($brown); } // GenericTraceback
+        .gu { color: color.get($teal); } // GenericSubheading
+        .il { color: color.get($orange); } // LiteralNumberIntegerLong
+        .k { color: color.get($purple); font-weight: 600; } // Keyword
+        .kc { color: color.get($yellow); } // KeywordConstant
+        .kd { color: color.get($purple); font-weight: 600; } // KeywordDeclaration
+        .kn { color: color.get($yellow); } // KeywordNamespace
+        .kp { color: color.get($purple); font-weight: 600; } // KeywordPseudo
+        .kr { color: color.get($purple); font-weight: 600;} // KeywordReserved
+        .kt { color: color.get($yellow); } // KeywordType
+        .l {} // Literal
+        .ld {} // LiteralDate
+        .m { color: color.get($orange); } // LiteralNumber
+        .mb { color: color.get($orange); } // LiteralNumberBin
+        .mf { color: color.get($orange); } // LiteralNumberFloat
+        .mh { color: color.get($orange); } // LiteralNumberHex
+        .mi { color: color.get($orange); } // LiteralNumberInteger
+        .mo { color: color.get($orange); } // LiteralNumberOct
+        .n { color: color.get($violet); } // Name
+        .na { color: color.get($yellow); } // NameAttribute
+        .nb { color: color.get($orange); font-weight: 600; } // NameBuiltin
+        .nc { color: color.get($pink); } // NameClass
+        .nd { color: color.get($pink); } // NameDecorator
+        .ne { color: color.get($brown); } // NameException
+        .nf { color: color.get($blue); } // NameFunction
+        .ni { color: color.get($pink); } // NameEntity
+        .nl { color: color.get($yellow); } // NameLabel
+        .nn { color: color.get($yellow); } // NameNamespace
+        .no { color: color.get($yellow); } // NameConstant
+        .nt { color: color.get($purple); } // NameTag
+        .nv { color: color.get($orange); } // NameVariable
+        .nx { color: color.get($orange); } // NameOther
+        .o { color: color.get($teal); } // Operator
+        .ow { color: color.get($teal); font-weight: bold; } // OperatorWord
+        .p { color: color.get($subtle); } // Punctuation
+        .py {} // NameProperty
+        .s { color: color.get($green); } // LiteralString
+        .s1 { color: color.get($green); } // LiteralStringSingle
+        .s2 { color: color.get($green); } // LiteralStringDouble
+        .sa { color: color.get($green); } // LiteralStringAffix
+        .sb { color: color.get($green); } // LiteralStringBacktick
+        .sc { color: color.get($green); } // LiteralStringChar
+        .sd { color: color.get($green); } // LiteralStringDoc
+        .se { color: color.get($blue); } // LiteralStringEscape
+        .sh { color: color.get($green); } // LiteralStringHeredoc
+        .si { color: color.get($green); } // LiteralStringInterpol
+        .sr { color: color.get($blue); } // LiteralStringRegex
+        .ss { color: color.get($green); } // LiteralStringSymbol
+        .sx { color: color.get($green); } // LiteralStringOther
+        .vc { color: color.get($yellow); } // NameVariableClass
+        .vg { color: color.get($orange); } // NameVariableGlobal
+        .vi { color: color.get($yellow); } // NameVariableInstance
+        .vm {} // NameVariableMagic
+        .w { color: color.get($more-subtle); } // TextWhitespace    
+    }
+}

src/themes/scss/theme/modules/_codemirror.scss

@@ -1,6 +1,6 @@
 @use '@lucas-labs/lui-micro/color' as color;
 
-@mixin make-code-mirror-styles {
+@mixin codemirror {
     .CodeMirror,
     .CodeMirror.cm-s-default,
     .CodeMirror.cm-s-paper {
@@ -13,19 +13,19 @@
         }
 
         .cm-quote {
-            color: color.get('theme/green/base')
+            color: color.get('palette/green/base')
         }
 
         .cm-keyword {
-            color: color.get('theme/mauve/base');
+            color: color.get('palette/purple/base');
         }
 
         .cm-atom {
-            color: color.get('theme/red/base');
+            color: color.get('palette/red/base');
         }
 
         .cm-number {
-            color: color.get('theme/peach/base');
+            color: color.get('palette/orange/base');
         }
 
         .cm-def {
@@ -33,11 +33,11 @@
         }
 
         .cm-variable-2 {
-            color: color.get('theme/sky/base');
+            color: color.get('palette/blue/base');
         }
 
         .cm-variable-3 {
-            color: color.get('theme/teal/base');
+            color: color.get('palette/teal/base');
         }
 
         .cm-comment {
@@ -45,23 +45,23 @@
         }
 
         .cm-string {
-            color: color.get('theme/green')
+            color: color.get('palette/green/base')
         }
 
         .cm-string-2 {
-            color: color.get('theme/green')
+            color: color.get('palette/green/base')
         }
 
         .cm-meta {
-            color: color.get('theme/peach/base');
+            color: color.get('palette/orange/base');
         }
 
         .cm-qualifier {
-            color: color.get('theme/peach/base');
+            color: color.get('palette/orange/base');
         }
 
         .cm-builtin {
-            color: color.get('theme/peach/base');
+            color: color.get('palette/orange/base');
         }
 
         .cm-bracket {
@@ -69,11 +69,11 @@
         }
 
         .cm-tag {
-            color: color.get('theme/yellow/base');
+            color: color.get('palette/yellow/base');
         }
 
         .cm-attribute {
-            color: color.get('theme/yellow/base');
+            color: color.get('palette/yellow/base');
         }
 
         .cm-hr {
@@ -81,15 +81,15 @@
         }
 
         .cm-url {
-            color: color.get('theme/blue/base');
+            color: color.get('palette/blue/base');
         }
 
         .cm-link {
-            color: color.get('theme/blue/base');
+            color: color.get('palette/blue/base');
         }
 
         .cm-error {
-            color: color.get('theme/red/base');
+            color: color.get('palette/red/base');
         }
     }
 }

src/themes/scss/theme/modules/_monaco.scss

@@ -1,6 +1,6 @@
 @use '@lucas-labs/lui-micro/color' as color;
 
-@mixin make-monaco-styles($is-dark: true) {
+@mixin monaco {
     $surface0: #{color.get('elevation/4')};
     $subtext0: #{color.get('elevation/10')};
     $overlay2: #{color.get('elevation/9')};
@@ -8,12 +8,12 @@
     $base: #{color.get('elevation/3')};
     $accent: #{color.get('primary/base')};
     $text: #{color.get('text')};
-    $mauve: #{color.get('theme/sapphire/base')};
-    $peach: #{color.get('theme/peach/base')};
-    $teal: #{color.get('theme/teal/base')};
-    $green: #{color.get('theme/green/base')};
-    $blue: #{color.get('theme/blue/base')};
-    $pink: #{color.get('theme/pink/base')};
+    $mauve: #{color.get('palette/purple/base')};
+    $peach: #{color.get('palette/orange/base')};
+    $teal: #{color.get('palette/teal/base')};
+    $green: #{color.get('palette/green/base')};
+    $blue: #{color.get('palette/blue/base')};
+    $pink: #{color.get('palette/pink/base')};
     
     .monaco-editor {
         --vscode-editor-background: #{$mantle} !important;

src/themes/scss/theme/modules/custom/_home.scss

@@ -1,14 +0,0 @@
-@use '@lucas-labs/lui-micro/var' as var;
-@use '@lucas-labs/lui-micro/color' as color;
-
-@mixin apply-styles {
-    .page-content.home {
-        div.center {
-            img {
-                // background-color: color.get('primary/base');
-                // border-radius: var.get('measure/4x');
-                // padding: var.get('measure/1.25x');
-            }
-        }
-    }        
-}

src/themes/scss/theme/modules/custom/_markup.scss

@@ -1,9 +0,0 @@
-@use '@lucas-labs/lui-micro/color' as color;
-
-@mixin apply-styles() {
-    .markup {
-        table {
-            width: fit-content;
-        }
-    }
-}

src/themes/scss/theme/modules/custom/_project.scss

@@ -1,19 +0,0 @@
-@use '@lucas-labs/lui-micro/var' as var;
-@use '@lucas-labs/lui-micro/color' as color;
-
-@mixin apply-styles {
-    #project-board {
-        .project-column-header {
-            .project-column-title {
-                .circular.label {
-                    display: flex;
-                    padding: 0 !important;
-                    align-items: center;
-                    justify-content: center;
-                    line-height: 16px;
-                    padding: 0 var.get('measure/.25x') !important;
-                }
-            }
-        }
-    }    
-}

src/themes/scss/theme/modules/custom/_repo-header.scss

@@ -1,79 +0,0 @@
-@use '@lucas-labs/lui-micro/var' as var;
-@use '@lucas-labs/lui-micro/color' as color;
-
-@mixin apply-styles {
-    .header-wrapper {
-        display: flex;
-        flex-direction: column;
-        margin-bottom: var.get('measure/1x');
-
-        .ui.container {
-            margin: 0 0 0 0 !important;
-            max-width: unset !important;
-            width: 100% !important;
-            padding: 0 var.get('measure/1x');
-        }
-
-        .repo-header {
-            margin: 0 0 var.get('measure/1x') 0;
-        }
-
-        .ui.tabs.divider {
-            margin-bottom: 0;
-        }
-        
-        .ui.tabular.menu.navbar {
-            .item {
-                --item-margin-bottom: #{var.get('measure/1x')};
-                margin: var(--item-margin-bottom) var.get('measure/.5x');
-                border-radius: var.get('measure/.25x');
-                padding: var.get('measure/.5x') var.get('measure/.5x');
-                color: var(--color-text);
-                border: none;
-
-                svg {
-                    color: var(--color-text-light-3);
-                    margin-right: var.get('measure/.5x');
-                }
-
-                &.active {
-                    background-color: transparent;
-                    color: var(--color-text);
-                    border-radius: var.get('measure/.25x') !important;
-                    font-weight: normal;
-                    // border-bottom: 4px solid color.get('primary/base');;
-
-                    &::after {
-                        background: color.get('primary/base');
-                        border-radius: 6px;
-                        bottom: calc(0px - var(--item-margin-bottom));
-                        content: "";
-                        height: 2px;
-                        position: absolute;
-                        right: 50%;
-                        transform: translate(50%, -50%);
-                        width: 100%;
-                        z-index: 1;
-                    }
-                }
-
-                .small.label {
-                    background-color: color.get('elevation/7');
-                    border: 1px solid color.get('elevation/7');
-                    border-radius: var.get('measure/2x');
-                    color: var(--color-text);
-                    font-weight: var(--base-text-weight-medium, 500);
-                    min-width: calc(var.get('measure/1.25x') + 6px);
-                    padding: 6px;
-                    text-align: center;
-                    align-items: center;
-                    justify-content: center;
-                }
-
-                &:hover {
-                    background-color: color.get('elevation/4');
-                }
-            }
-        }
-    }    
-}

src/themes/scss/theme/modules/custom/index.scss

@@ -1,13 +0,0 @@
-@use './repo-header';
-@use './repo';
-@use './project';
-@use './home';
-@use './markup';
-
-@mixin apply-custom-styles {
-    @include repo-header.apply-styles();
-    @include repo.apply-styles();
-    @include project.apply-styles();
-    @include home.apply-styles();
-    @include markup.apply-styles();
-}

src/themes/scss/theme/modules/custom/repo/_file-list.scss

@@ -1,193 +0,0 @@
-@use '@lucas-labs/lui-micro/var' as var;
-@use '@lucas-labs/lui-micro/color' as color;
-
-@mixin apply-styles {
-
-    #repo-topics {
-        row-gap: var.get('measure/.5x');
-        margin-top: 0 !important;
-    }
-
-    .ui.table>tr>td, .ui.table>tbody>tr>td {
-        border-top-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.04);
-    }
-
-    .page-content.repository.file.list > .ui.container.lugit-repo-list-view {
-        display: flex;
-        flex-direction: row-reverse;
-        column-gap: 24px;
-
-        .ui.repo-topic.large.label.topic {
-            background-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.3);
-            color: color.get('primary/base');
-            border-radius: var.get('measure/2x');
-            border: 1px solid rgba(#{color.get('theme/blue/base', 'rgb')}, 0.4);
-            line-height: 14px;
-        }
-
-        @media (max-width: 1100px) {
-            width: 100%;
-            min-width: 100%;
-            margin: 0;
-            padding: 0 var.get('measure/2x');
-
-            .lugit-repo-header-data {
-                min-width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important;
-                max-width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important;
-                width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important;
-            }
-
-            .repo-button-row {
-                .gt-gap-y-3 {
-                    column-gap: var.get('measure/.5x');
-    
-                    #new-pull-request {
-                        display: none;
-                    }
-
-                    [role=menu] {
-                        display: none;
-                    }
-                }
-    
-                #clone-panel {
-                    #repo-clone-url {
-                        display: none;
-                    }
-                }
-            }
-        }
-
-        @media (max-width: 1200px) {
-            flex-direction: column;
-            column-gap: 0;
-            row-gap: 24px;
-
-            .lugit-repo-header-data {
-                min-width: 100%!important;
-                max-width: 100%!important;
-                width: 100%!important;
-            }
-
-            #repo-topics {
-                display: none !important;
-            }
-
-            #repo-desc {
-                display: flex;
-                flex-direction: column;
-                font-size: 1em;
-                row-gap: var.get('measure/1x');
-
-                h5 {
-                    display: none;
-                }
-
-                span {
-                    font-size: 1.2em !important;
-                    font-style: italic !important;
-                    color: var(--color-text-light-3);
-                }
-
-                a {
-                    font-size: 1.1em;
-                }
-            }
-
-        }
-
-        .repo-button-row {
-            .gt-gap-y-3 {
-                column-gap: var.get('measure/.5x');
-            }
-
-            #clone-panel {
-                #repo-clone-url {
-                    width: unset;
-                }
-            }
-        }        
-
-        .lugit-repo-header-data {
-            min-width: var.get('repo-home/sidebar-width');
-            max-width: var.get('repo-home/sidebar-width');
-            width: var.get('repo-home/sidebar-width');
-
-            #repo-desc {
-                display: flex;
-                flex-direction: column;
-                font-size: 1em;
-                row-gap: var.get('measure/1x');
-
-                * {
-                    margin: 0;
-                }
-
-                h5 {
-                    font-size: 1.1em;
-                }
-
-                span {
-                    font-size: 1.1em;
-                }
-
-                a {
-                    font-size: 1.1em;
-                }
-            }
-        }
-
-        .lugit-repo-content {
-            display: flex;
-            flex-direction: column;
-            row-gap: var.get('measure/1x');
-        }
-
-        #topic_edit {
-            flex-direction: column;
-            row-gap: var.get('measure/1x');
-
-            .field.gt-f1.gt-mr-3 { 
-                margin: 0px !important;
-
-
-                // topic selection editing (task list
-                div.fluid.multiple.search.selection.dropdown {
-                    display: flex;
-                    flex-wrap: wrap;
-                    box-shadow: none;
-                    padding: var.get('measure/.25x') var.get('measure/.5x');
-                    
-                    .item {
-                        border: none;
-                    }
-
-                    .menu {
-                        top: calc(100% + 1px);
-                    }
-                }
-                
-                .dropdown {
-                    display: none;
-                }
-
-                // Cancel, Save buttons
-                +div {
-                    display: flex;
-                    column-gap: var.get('measure/1x');
-                    
-                    button {
-                        display: block !important;
-                        margin: 0px !important;
-                        width: 100%;
-                    }
-                }
-            }
-        }
-
-        #repo-topics {
-            margin-top: var.get('measure/1x') !important;
-        }
-
-    }
-}

src/themes/scss/theme/modules/custom/repo/index.scss

@@ -1,5 +0,0 @@
-@use './file-list';
-
-@mixin apply-styles {
-    @include file-list.apply-styles();    
-}

src/themes/scss/theme/modules/index.scss

@@ -0,0 +1,6 @@
+@forward './repo';
+@forward './issues';
+@forward './chroma';
+@forward './codemirror';
+@forward './monaco';
+@forward './settings';