release: 🔖 v1.0.1

feat: ✨ visual enhacements
feat: ✨ update color variables to use accent fallbacks
2025-02-01 05:04:01 -03:00 · 2025-02-01 05:03:04 -03:00 · 2025-01-26 01:07:08 -03:00 · 2025-01-26 00:44:09 -03:00 · 2025-01-25 17:21:05 -03:00 · 2025-01-25 17:17:09 -03:00
83 changed files with 3384 additions and 2010 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,164 +1,164 @@
-### Node ###
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
-### Node Patch ###
-# Serverless Webpack directories
-.webpack/
-
-# Optional stylelint cache
-
-# SvelteKit build / generate output
-.svelte-kit
-
-### VisualStudioCode ###
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-!.vscode/*.code-snippets
-
-# Local History for Visual Studio Code
-.history/
-
-# Built Visual Studio Code Extensions
-*.vsix
-
-### VisualStudioCode Patch ###
-# Ignore all local history of files
-.history
-.ionide
-
-# Support for Project snippet scope
-
-# End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode
-# Support for Project snippet scope
-
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# Support for Project snippet scope
+
+# End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode
+# Support for Project snippet scope
+
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,13 +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.
+# 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.
--- a/README.md
+++ b/README.md
@@ -1,90 +1,73 @@
-<h1 align="center">
-	<code>lucaslabs</code> › <a href="https://gitea.io">Gitea</a> theme
-</h1>
-
-*Theme for `lucaslabs` internal gitea server.*
-
-## `dark`
-
-![dark theme](figs/dark.png)
-
-## `light`
-
-![light theme](figs/light.png)
-
-## `auto`
-
-Switches between `dark` and `light` automatically based on the user's system preference.
-
-## Usage
-
-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
-[ui]
-THEMES=...,dark,light,auto
-DEFAULT_THEME=dark # optional
-```
-
-> 💡 You can change the names of the themes by changing the name of the theme files in `public/css/theme-{name}.css` and in the `app.ini` file, accordingly.
-
-4. Restart `gitea`.
-
-> [!NOTE]
-> The latest version works with `gitea` version `v1.22.x`.
-
-## Credits
-
- [`catppuccin/gitea`](https://github.com/catppuccin/gitea), these themes are based on them.
-
-## Development
-
-### build
-```bash
-$ npm install
-$ npm run build
-```
-
-### serve
-```bash
-$ npm run serve -- --server path/to/gitea/custom
-
-# e.g.
-
-# on linux
-$ npm run serve -- --server ~/gitea/custom
-# on windows
-$ npm run serve -- -- --server c:/gitea/custom
-```
-
-
-# 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.
+<h1 align="center">
+	<code>lucaslabs</code> › <a href="https://gitea.io">Gitea</a> theme
+</h1>
+
+*Theme for `lucaslabs` internal gitea server.*
+
+> [!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.
+
+## Preview
+
+![repository](figs/repo.png)
+
+<details>
+<summary>Issue Page</summary>
+<img src="figs/issue.png" alt="issue" width="100%">
+</details>
+
+<details>
+<summary>Settings Page</summary>
+<img src="figs/settings.png" alt="settings" width="100%">
+</details>
+
+<details>
+<summary>PR Page</summary>
+<img src="figs/pr.png" alt="pr" width="100%">
+</details>
+
+## Usage
+
+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
+[ui]
+THEMES=...,dark,light,auto
+DEFAULT_THEME=dark # optional
+```
+
+> 💡 You can change the names of the themes by changing the name of the theme files in `public/css/theme-{name}.css` and in the `app.ini` file, accordingly.
+
+4. Restart `gitea`.
+
+## Credits
+
+- [`catppuccin/gitea`](https://github.com/catppuccin/gitea), these themes are based on them.
+
+## Development
+
+### build
+```bash
+$ npm install
+$ npm run build
+```
+
+### serve
+```bash
+$ npm run serve -- --server path/to/gitea/custom
+
+# e.g.
+
+# on linux
+$ npm run serve -- --server ~/gitea/custom
+# on windows
+$ npm run serve -- -- --server c:/gitea/custom
+```
+
+## Contributing
+
+Feel free to open an issue or a pull request. Contributions are welcome!
--- a/figs/dark.png
+++ b/figs/dark.png
--- a/figs/issue.png
+++ b/figs/issue.png
--- a/figs/light.png
+++ b/figs/light.png
--- a/figs/pr.png
+++ b/figs/pr.png
--- a/figs/repo.png
+++ b/figs/repo.png
--- a/figs/settings.png
+++ b/figs/settings.png
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
    "name": "@lucas-labs/lugit-theme",
-    "version": "0.2.0",
+    "version": "0.2.2",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
        "": {
            "name": "@lucas-labs/lugit-theme",
-            "version": "0.2.0",
+            "version": "0.2.2",
            "license": "MIT",
            "dependencies": {
                "@lucas-labs/lui-micro": "^3.1.4"
@@ -19,7 +19,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"
            }
        },
@@ -3007,9 +3007,10 @@
            }
        },
        "node_modules/immutable": {
-            "version": "4.3.0",
-            "dev": true,
-            "license": "MIT"
+            "version": "4.3.7",
+            "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+            "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+            "dev": true
        },
        "node_modules/import-fresh": {
            "version": "3.3.0",
@@ -4625,8 +4626,9 @@
        },
        "node_modules/sass": {
            "version": "1.63.6",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
+            "integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
            "dev": true,
-            "license": "MIT",
            "dependencies": {
                "chokidar": ">=3.0.0 <4.0.0",
                "immutable": "^4.0.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@lucas-labs/lugit-theme",
-    "version": "0.2.2",
+    "version": "1.0.1",
    "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": {
--- a/src/templates/base/head_navbar.tmpl
+++ b/src/templates/base/head_navbar.tmpl
@@ -1,214 +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">
-		<!-- 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="20" 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 only-mobile">
-			{{if and .IsSigned EnableTimetracking .ActiveStopwatch}}
-			<a id="mobile-stopwatch-icon" class="active-stopwatch item tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
-				<div class="tw-relative">
-					{{svg "octicon-stopwatch"}}
-					<span class="header-stopwatch-dot"></span>
-				</div>
-			</a>
-			{{end}}
-			{{if .IsSigned}}
-			<a id="mobile-notifications-icon" class="item tw-w-auto tw-p-2" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
-				<div class="tw-relative">
-					{{svg "octicon-bell"}}
-					<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
-				</div>
-			</a>
-			{{end}}
-			<button class="item tw-w-auto ui icon mini button tw-p-2 tw-m-0" id="navbar-expand-toggle" aria-label="{{ctx.Locale.Tr "home.nav_menu"}}">{{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">
-		{{if and .IsSigned .MustChangePassword}}
-			<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
-				<span class="text tw-flex tw-items-center">
-					{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}}
-					<span class="only-mobile tw-ml-2">{{.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 and EnableTimetracking .ActiveStopwatch}}
-			<a class="item not-mobile active-stopwatch tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
-				<div class="tw-relative">
-					{{svg "octicon-stopwatch"}}
-					<span class="header-stopwatch-dot"></span>
-				</div>
-			</a>
-			{{end}}
-
-			<a class="item not-mobile tw-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
-				<div class="tw-relative">
-					{{svg "octicon-bell"}}
-					<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
-				</div>
-			</a>
-
-			<div class="ui dropdown jump item tw-mx-0 tw-pr-2" 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="only-mobile">{{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 tw-mx-0 tw-pr-2" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
-				<span class="text tw-flex tw-items-center">
-					{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}}
-					<span class="only-mobile tw-ml-2">{{.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 -->
-
-	{{if and .IsSigned EnableTimetracking .ActiveStopwatch}}
-		<div class="active-stopwatch-popup tippy-target">
-			<div class="tw-flex tw-items-center tw-gap-2 tw-p-3">
-				<a class="stopwatch-link tw-flex tw-items-center tw-gap-2 muted" href="{{.ActiveStopwatch.IssueLink}}">
-					{{svg "octicon-issue-opened" 16}}
-					<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
-				</a>
-				<div class="tw-flex tw-gap-1">
-					<form class="stopwatch-commit" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
-						{{.CsrfTokenHtml}}
-						<button
-							type="submit"
-							class="ui button mini compact basic icon tw-mr-0"
-							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 tw-mr-0"
-							data-tooltip-content="{{ctx.Locale.Tr "repo.issues.cancel_tracking"}}"
-						>{{svg "octicon-trash"}}</button>
-					</form>
-				</div>
-			</div>
-		</div>
-	{{end}}
-</nav>
--- a/src/templates/home.tmpl
+++ b/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="tw-mb-8 tw-px-8">
-		<div class="center">
-			<img class="logo" width="220" height="220" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}">
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
--- a/src/templates/repo/home.tmpl
+++ b/src/templates/repo/home.tmpl
@@ -1,162 +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) (not .HideRepoInfo)}}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="repo-description gt-word-break">
-				{{- $description := .Repository.DescriptionHTML ctx -}}
-				{{if $description}}{{$description | RenderCodeBlock}}{{end}}
-				{{if .Repository.Website}}<a href="{{.Repository.Website}}">{{.Repository.Website}}</a>{{end}}
-			</div>
-			<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-2 tw-my-2" id="repo-topics">
-				{{/* it should match the code in issue-home.js */}}
-				{{range .Topics}}<a class="repo-topic ui large label" 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 tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
-			</div>
-			{{end}}
-			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
-			<div class="ui form tw-hidden tw-flex tw-gap-2 tw-my-2" id="topic_edit">
-				<div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1">
-					<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
-					{{range .Topics}}
-						{{/* keep the same layout as Fomantic UI generated labels */}}
-						<a class="ui label transition visible tw-cursor-default tw-inline-block" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
-					{{end}}
-					<div class="text"></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 tw-text-center">
-					{{if .Repository.ArchivedUnix.IsZero}}
-						{{ctx.Locale.Tr "repo.archive.title"}}
-					{{else}}
-						{{ctx.Locale.Tr "repo.archive.title_date" (DateTime "long" .Repository.ArchivedUnix)}}
-					{{end}}
-				</div>
-			{{end}}
-		</div>
-		<div class="lugit-repo-content">
-			{{template "repo/sub_menu" .}}
-			{{$n := len .TreeNames}}
-			{{$l := Eval $n "-" 1}}
-			{{$isHomepage := (eq $n 0)}}
-			<div class="repo-button-row" data-is-homepage="{{$isHomepage}}">
-				<div class="repo-button-row-left">
-					{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}}
-					{{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 -->
-					{{if $isHomepage}}
-						<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"{{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 $isHomepage (.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 $isHomepage}}
-						{{/* only show the "code search" on the repo home page, it only does global search,
-							so do not show it when viewing file or directory to avoid misleading users (it doesn't search in a directory) */}}
-						<form class="ignore-dirty tw-flex tw-flex-1" action="{{.RepoLink}}/search" method="get">
-							<div class="ui small action input tw-flex-1">
-								<input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
-								{{template "shared/search/button"}}
-							</div>
-						</form>
-					{{else}}
-						<span class="breadcrumb repo-path tw-ml-1">
-							<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}}">{{$v}}</span>
-								{{- else -}}
-									{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{$v}}</a></span>
-								{{- end -}}
-							{{- end -}}
-						</span>
-					{{end}}
-				</div>
-				<div class="repo-button-row-right">
-					<!-- Only show clone panel in repository home page -->
-					{{if $isHomepage}}
-						<div class="clone-panel ui action tiny input">
-							{{template "repo/clone_buttons" .}}
-							<button class="ui small 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 "tw-mr-2"}}{{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 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_tar"}}</a>
-										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.bundle" rel="nofollow">{{svg "octicon-package" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_bundle"}}</a>
-									{{end}}
-									{{if .CitiationExist}}
-										<a class="item" id="cite-repo-button">{{svg "octicon-cross-reference" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.cite_this_repo"}}</a>
-									{{end}}
-									{{range .OpenWithEditorApps}}
-										<a class="item js-clone-url-editor" data-href-template="{{.OpenURL}}">{{.IconHTML}}{{ctx.Locale.Tr "repo.open_with_editor" .DisplayName}}</a>
-									{{end}}
-								</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 (not $isHomepage) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}}
-						<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
-							{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
-						</a>
-					{{end}}
-				</div>
-			</div>
-			{{if .IsViewFile}}
-				{{template "repo/view_file" .}}
-			{{else if .IsBlame}}
-				{{template "repo/blame" .}}
-			{{else}}{{/* IsViewDirectory */}}
-				{{template "repo/view_list" .}}
-			{{end}}
-			
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
--- a/src/themes/fonts/KaTeX_AMS-Regular.73ea273a.woff2
+++ b/src/themes/fonts/KaTeX_AMS-Regular.73ea273a.woff2
--- a/src/themes/fonts/KaTeX_Caligraphic-Bold.a1abf90d.woff2
+++ b/src/themes/fonts/KaTeX_Caligraphic-Bold.a1abf90d.woff2
--- a/src/themes/fonts/KaTeX_Caligraphic-Regular.d6484fce.woff2
+++ b/src/themes/fonts/KaTeX_Caligraphic-Regular.d6484fce.woff2
--- a/src/themes/fonts/KaTeX_Fraktur-Bold.931d67ea.woff2
+++ b/src/themes/fonts/KaTeX_Fraktur-Bold.931d67ea.woff2
--- a/src/themes/fonts/KaTeX_Fraktur-Regular.172d3529.woff2
+++ b/src/themes/fonts/KaTeX_Fraktur-Regular.172d3529.woff2
--- a/src/themes/fonts/KaTeX_Main-Bold.39890742.woff2
+++ b/src/themes/fonts/KaTeX_Main-Bold.39890742.woff2
--- a/src/themes/fonts/KaTeX_Main-BoldItalic.20f389c4.woff2
+++ b/src/themes/fonts/KaTeX_Main-BoldItalic.20f389c4.woff2
--- a/src/themes/fonts/KaTeX_Main-Italic.fe2176f7.woff2
+++ b/src/themes/fonts/KaTeX_Main-Italic.fe2176f7.woff2
--- a/src/themes/fonts/KaTeX_Main-Regular.f650f111.woff2
+++ b/src/themes/fonts/KaTeX_Main-Regular.f650f111.woff2
--- a/src/themes/fonts/KaTeX_Math-BoldItalic.dcbcbd93.woff2
+++ b/src/themes/fonts/KaTeX_Math-BoldItalic.dcbcbd93.woff2
--- a/src/themes/fonts/KaTeX_Math-Italic.6d3d25f4.woff2
+++ b/src/themes/fonts/KaTeX_Math-Italic.6d3d25f4.woff2
--- a/src/themes/fonts/KaTeX_SansSerif-Bold.95591a92.woff2
+++ b/src/themes/fonts/KaTeX_SansSerif-Bold.95591a92.woff2
--- a/src/themes/fonts/KaTeX_SansSerif-Italic.7d393d38.woff2
+++ b/src/themes/fonts/KaTeX_SansSerif-Italic.7d393d38.woff2
--- a/src/themes/fonts/KaTeX_SansSerif-Regular.cd5e231e.woff2
+++ b/src/themes/fonts/KaTeX_SansSerif-Regular.cd5e231e.woff2
--- a/src/themes/fonts/KaTeX_Script-Regular.c81d1b2a.woff2
+++ b/src/themes/fonts/KaTeX_Script-Regular.c81d1b2a.woff2
--- a/src/themes/fonts/KaTeX_Size1-Regular.6eec866c.woff2
+++ b/src/themes/fonts/KaTeX_Size1-Regular.6eec866c.woff2
--- a/src/themes/fonts/KaTeX_Size2-Regular.2960900c.woff2
+++ b/src/themes/fonts/KaTeX_Size2-Regular.2960900c.woff2
--- a/src/themes/fonts/KaTeX_Size3-Regular.e1951519.woff2
+++ b/src/themes/fonts/KaTeX_Size3-Regular.e1951519.woff2
--- a/src/themes/fonts/KaTeX_Size4-Regular.e418bf25.woff2
+++ b/src/themes/fonts/KaTeX_Size4-Regular.e418bf25.woff2
--- a/src/themes/fonts/KaTeX_Typewriter-Regular.c295e7f7.woff2
+++ b/src/themes/fonts/KaTeX_Typewriter-Regular.c295e7f7.woff2
--- a/src/themes/fonts/codicon.4a477f66.ttf
+++ b/src/themes/fonts/codicon.4a477f66.ttf
--- a/src/themes/scss/_utils/_color-utils.scss
+++ b/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;
+}
--- a/src/themes/scss/_vars.scss
+++ b/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,
+    )
+);
--- a/src/themes/scss/dark.scss
+++ b/src/themes/scss/dark.scss
@@ -1,83 +1,56 @@
-@use '@lucas-labs/lui-micro' as lui;
-@use './utils/color-utils' as c;
-@use './theme' as theme;
-
-$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(#9b6bf5, $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),
-    ),    
-    text: #e6edf3,
-    primary: c.variants($brand, $is-dark),
-    secondary: c.variants(#5d5f7a, $is-dark),
-    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, // 
-    )
-);
-
-// init lui-micro, css-vars only (no reboot, no basic)
-@include lui.init(
-    $theme: (
-        colors: $colors,
-        variables: (
-            'small-font-size': 12px,
-            'base-font-size': 14px,
-            'font-family': '"Outfit", Inter, Roboto, "Segoe UI", 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,
-            )
-        ),
-    ),
-    
-    $options: (
-        reboot: false,
-        basic: false,
-        fg-var-name: 'text',
-        bg-var-name: 'elevation/1',
-    ),
-);
-
-@include theme.make-theme(
-    $is-dark: $is-dark,
-);
+@use '@lucas-labs/lui-micro' as lui;
+@use './_utils/color-utils' as c;
+@use './theme' as theme;
+@use './vars' as vars;
+
+$is-dark: true;
+$brand: #a6c6f7;
+
+$colors: (
+    primary: c.variants($brand),    
+    secondary: c.variants(hsl(240, 18%, 14%)), // same as elevation/6
+    text: #e6edf3,
+    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':  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: vars.$variables),
+    $options: (
+        reboot: false,
+        basic: false,
+        fg-var-name: 'text',
+        bg-var-name: 'elevation/1',
+    ),
+);
+
+@include theme.make-theme($is-dark);
--- a/src/themes/scss/light.scss
+++ b/src/themes/scss/light.scss
@@ -1,83 +1,56 @@
-@use '@lucas-labs/lui-micro' as lui;
-@use './utils/color-utils' as c;
-@use './theme' as theme;
-
-$is-dark: true;
-
-$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),
-    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, // 
-    )
-);
-
-// init lui-micro, css-vars only (no reboot, no basic)
-@include lui.init(
-    $theme: (
-        colors: $colors,
-        variables: (
-            'small-font-size': 12px,
-            'base-font-size': 14px,
-            'font-family': '"Outfit", Inter, Roboto, "Segoe UI", 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,
-            )
-        ),
-    ),
-    
-    $options: (
-        reboot: false,
-        basic: false,
-        fg-var-name: 'text',
-        bg-var-name: 'elevation/1',
-    ),
-);
-
-@include theme.make-theme(
-    $is-dark: $is-dark,
-);
+@use '@lucas-labs/lui-micro' as lui;
+@use './_utils/color-utils' as c;
+@use './theme' as theme;
+@use './vars' as vars;
+
+$is-dark: false;
+$brand: #6296e2;
+
+$colors: (
+    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':  #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: vars.$variables),
+    $options: (
+        reboot: false,
+        basic: false,
+        fg-var-name: 'text',
+        bg-var-name: 'elevation/1',
+    ),
+);
+
+@include theme.make-theme($is-dark);
--- a/src/themes/scss/theme/components/_avatar.scss
+++ b/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;
+        }
+    }
+}
--- a/src/themes/scss/theme/components/_boxes.scss
+++ b/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;
+    }
+}
--- a/src/themes/scss/theme/components/_editor.scss
+++ b/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;
+        }
+    }
+}
--- a/src/themes/scss/theme/components/_file-content.scss
+++ b/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);
+        }
+    }
+}
--- a/src/themes/scss/theme/components/_forms.scss
+++ b/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;
+}
+
--- a/src/themes/scss/theme/components/_labels.scss
+++ b/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;
+        }
+    }
+}
--- a/src/themes/scss/theme/components/_markup.scss
+++ b/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);
+                }
+            }
+        }        
+    }
+}
--- a/src/themes/scss/theme/components/button/index.scss
+++ b/src/themes/scss/theme/components/button/index.scss
@@ -0,0 +1,131 @@
+@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;
+        }
+
+        &.green {
+            color: var(--color-white);
+            background: var(--color-green-dark-2);
+        }
+    }    
+}
--- a/src/themes/scss/theme/components/forms/_input.scss
+++ b/src/themes/scss/theme/components/forms/_input.scss
@@ -0,0 +1,127 @@
+@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;
+        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-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);
+
+        > input.search {
+            outline: none;            
+        }
+    }
+
+    .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;
+    }
+
+    .ui.form textarea,
+    .ui.form input:not([type]),
+    .ui.form input[type=date],
+    .ui.form input[type=datetime-local],
+    .ui.form input[type=email],
+    .ui.form input[type=number],
+    .ui.form input[type=password],
+    .ui.form input[type=search],
+    .ui.form input[type=tel],
+    .ui.form input[type=time],
+    .ui.form input[type=text],
+    .ui.form input[type=file],
+    .ui.form input[type=url] {
+        min-height: 2.71428571em;
+    }
+    
+    .ui.selection.dropdown {
+        min-height: 2.71428571em;
+        >input {
+            min-height: 0;
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+
+    .ui.multiple.dropdown>.label, .ui.multiple.search.dropdown>input.search {
+        padding: var.get('measure/.375x') var.get('measure/.75x');
+        margin: .14285714rem .28571429rem .14285714rem 0;
+    }
+
+    .ui.multiple.search.dropdown>input.search  {
+        padding-left: 0;
+    }
+
+    .ui.checkbox label, .ui.radio.checkbox label {
+        margin-left: 20px !important;
+    }
+}
--- a/src/themes/scss/theme/components/forms/_menu.scss
+++ b/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, &.show { 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;
+    }
+}
--- a/src/themes/scss/theme/components/forms/index.scss
+++ b/src/themes/scss/theme/components/forms/index.scss
@@ -0,0 +1,2 @@
+@forward './menu';
+@forward './input';
--- a/src/themes/scss/theme/components/index.scss
+++ b/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';
--- a/src/themes/scss/theme/index.scss
+++ b/src/themes/scss/theme/index.scss
@@ -1,425 +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-primary-hover: #{color.get('primary/light/3%')};
-        --color-primary-active: #{color.get('primary/light/6%')};
-        --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')};
-        --color-label-hover-bg: #{color.get('primary/light/6%')};
-
-        /* 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/9')};
-        --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-tooltip-text: #{color.get('primary/base')};
-        --color-tooltip-bg: #{color.get('primary/base', 'contrast')};
-        --color-nav-bg: #{$lvl2};
-        --color-secondary-nav-bg: #{$lvl2};
-        --color-nav-text: #{color.get('text')};
-        --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);
-        }
-    }
-    
-    @media (prefers-color-scheme: dark) {
-        input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover, input:-webkit-autofill:active, .ui.form .field.field input:-webkit-autofill, .ui.form .field.field input:-webkit-autofill:focus, .ui.form .field.field input:-webkit-autofill:hover, .ui.form .field.field input:-webkit-autofill:active {
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: var(--color-secondary);
-            box-shadow: 0 0 0 100px var(--color-primary-light-3) inset !important;
-            border-color: var(--color-primary-light-3) !important;
-        }        
-    }
-
-    .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 {
-        margin: 0px .25em !important;
-        padding: 0 !important;
-        display: inline-flex !important;
-        gap: 0px !important;
-        border-radius: 16px !important;
-
-        --color-light-border: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
-        --color-label-bg: none !important;
-        --color-text: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
-        --color-green-badge-bg: none !important;
-        --color-green-badge-hover-bg: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 0.05) !important;
-        --color-label-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 !important;
-            padding: 4px 8px 4px 6px !important;
-            margin: 0 !important;
-            background: none !important;
-            border-color: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
-        }
-
-        &.isVerified {
-            .ui.detail.icon.button {
-                padding: 4px 12px 4px 6px !important;
-            }
-        }
-    }
-
-    #commits-table {
-        --color-light: transparent !important;
-    }
-
-    .flex-list {
-        .flex-item {
-            .flex-item-main {
-                gap: var.get('measure/.25x');
-
-                .flex-item-header {
-                    .flex-item-title {
-                        gap: var.get('measure/.5x');
-                    }
-                }
-
-                .flex-item-body:not(:last-child) {
-                    margin-bottom: var.get('measure/1x');
-                }
-            }
-        }
-    }
-
-    @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
 }
--- a/src/themes/scss/theme/modules/_chroma.scss
+++ b/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    
+    }
+}
--- a/src/themes/scss/theme/modules/_codemirror.scss
+++ b/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');
        }
    }
 }
--- a/src/themes/scss/theme/modules/_monaco.scss
+++ b/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;
--- a/src/themes/scss/theme/modules/custom/_home.scss
+++ b/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');
-            }
-        }
-    }        
-}
--- a/src/themes/scss/theme/modules/custom/_issue-content.scss
+++ b/src/themes/scss/theme/modules/custom/_issue-content.scss
@@ -1,16 +0,0 @@
-@mixin apply-styles {
-    .issue-content {
-        img {
-            max-width: 100%;
-        }
-    }
-
-    .issue-content, .issue-list {
-        .labels-list {
-            .label {
-                
-            }
-        }
-    }
-    
-}
--- a/src/themes/scss/theme/modules/custom/_markup.scss
+++ b/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;
-        }
-    }
-}
--- a/src/themes/scss/theme/modules/custom/_project.scss
+++ b/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;
-                }
-            }
-        }
-    }    
-}
--- a/src/themes/scss/theme/modules/custom/_repo-header.scss
+++ b/src/themes/scss/theme/modules/custom/_repo-header.scss
@@ -1,69 +0,0 @@
-@use '@lucas-labs/lui-micro/var' as var;
-@use '@lucas-labs/lui-micro/color' as color;
-
-@mixin apply-styles {
-    .secondary-nav {
-        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;
-        }
-
-        overflow-menu {
-            .item {
-                --item-margin-bottom: #{var.get('measure/.5x')} !important;
-                margin: 0 var.get('measure/.5x') var(--item-margin-bottom) !important;
-                border-radius: var.get('measure/.25x') !important;
-                padding: var.get('measure/.5x') var.get('measure/.5x') !important;
-                color: var(--color-text) !important;
-                border: none !important;
-                position: relative; // Make the parent element positioned
-
-                svg {
-                    color: var(--color-text-light-3) !important;
-                    margin-right: var.get('measure/.5x') !important;
-                }
-
-                &:hover {
-                    background-color: color.get('elevation/4') !important;
-                }
-
-                &.active {
-                    background-color: transparent !important;
-                    color: var(--color-text) !important;
-                    border-radius: 0 !important;
-                    // font-weight: normal !important;
-                    border-bottom: calc(var(--item-margin-bottom) - 1px) solid var(--color-secondary-nav-bg) !important;
-                    margin-bottom: 1px !important;
-                    box-shadow: 0px 2px 0px 0px color.get('primary/base') !important;
-                }
-
-                .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;
-                }
-            }
-        }
-    }
-}
--- a/src/themes/scss/theme/modules/custom/index.scss
+++ b/src/themes/scss/theme/modules/custom/index.scss
@@ -1,15 +0,0 @@
-@use './repo-header';
-@use './repo';
-@use './project';
-@use './home';
-@use './markup';
-@use './issue-content';
-
-@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();
-    @include issue-content.apply-styles();
-}
--- a/src/themes/scss/theme/modules/custom/repo/_file-list.scss
+++ b/src/themes/scss/theme/modules/custom/repo/_file-list.scss
@@ -1,207 +0,0 @@
-@use '@lucas-labs/lui-micro/var' as var;
-@use '@lucas-labs/lui-micro/color' as color;
-
-@mixin apply-styles {
-
-    #repo-topics, #topic_edit, .label-list {
-        row-gap: var.get('measure/.5x');
-        margin-top: 0 !important;
-
-        .label:not(.basic) {
-            font-size: var.get('small-font-size') !important;
-            background-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.1);
-            color: color.get('primary/base');
-            border-radius: var.get('measure/2x');
-            line-height: 14px;
-            transition: background-color 0.2s ease;
-
-            &:hover {
-                background-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.3) !important;
-                color: color.get('primary/base') !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;
-
-        @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: 1280px) {
-            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');
-            flex: 1;
-        }
-
-        #repo-files-table {
-            .commit-list {
-                .latest-commit {
-                    gap: var.get('measure/.5x');
-                }
-
-                .isSigned, .isVerified {
-                    padding: 0 !important;
-                    border: none !important;
-                    .shortsha {
-                        display: none;
-                    }
-
-                    .detail {
-                        border-left: none !important;
-                        padding: 0 !important;
-                        margin: 0 !important;
-
-                        div {
-                            display: block;
-                            padding: 0 !important;
-                            margin: 0 !important;
-
-                            svg {
-                                margin: 0 !important;
-                            }
-                        }
-                    }
-
-                    .avatar {
-                        display: none;
-                    }
-                }
-
-                .commit-summary {
-                    color: var(--color-text-light-2) !important
-                }
-            }
-        }
-
-        #topic_edit {
-            flex-direction: column;
-            row-gap: var.get('measure/1x');
-
-            .field.gt-f1.gt-mr-3 { 
-                margin: 0px !important;
-            }
-        }
-
-        #repo-topics {
-            margin-top: var.get('measure/1x') !important;
-        }
-    }
-}
--- a/src/themes/scss/theme/modules/custom/repo/index.scss
+++ b/src/themes/scss/theme/modules/custom/repo/index.scss
@@ -1,5 +0,0 @@
-@use './file-list';
-
-@mixin apply-styles {
-    @include file-list.apply-styles();    
-}
--- a/src/themes/scss/theme/modules/index.scss
+++ b/src/themes/scss/theme/modules/index.scss
@@ -0,0 +1,6 @@
+@forward './repo';
+@forward './issues';
+@forward './chroma';
+@forward './codemirror';
+@forward './monaco';
+@forward './settings';
--- a/src/themes/scss/theme/modules/issues/_issue-sidebar.scss
+++ b/src/themes/scss/theme/modules/issues/_issue-sidebar.scss
@@ -0,0 +1,294 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+@use '../../components/button' as button;
+
+@mixin sidebar {
+    --spc: #{var.get('measure/1x')};    //                        var(--spc)      16px
+    --spc-7_8: calc(var(--spc) * .875); // 7/8 of the base        var(--spc-7_8)  14px
+    --spc-6_8: calc(var(--spc) * .750); // 6/8 = 3/4 of the base  var(--spc-6_8)  12px
+    --spc-4_8: calc(var(--spc) * .500); // 4/8 = 1/2 of the base  var(--spc-4_8)  8px
+    --spc-3_8: calc(var(--spc) * .375); // 3/8 of the base        var(--spc-3_8)  6px
+    --spc-2_8: calc(var(--spc) * .250); // 2/8 = 1/4 of the base  var(--spc-2_8)  4px
+
+    display: flex;
+    flex-direction: column;
+    border: none !important;
+    color: var(--color-text-light-2) !important;
+    padding: 0 !important;
+
+    // reset padding and margin for all children
+    >*, .issue-sidebar-combo>*, >text+*, >.ui>* {
+        margin: unset !important;
+        padding: unset !important;
+        font-size: var.get('font-size/sm') !important;
+    }
+
+    // alignment for main children elements
+    >.ui, >.text, >.ui {
+        padding-left: var(--spc-4_8) !important;
+        padding-right: 0 !important;
+    }
+
+    .ui.ui.ui.compact.grid>.column:not(.row), .ui.ui.ui.compact.grid>.row>.column {
+        padding-left: unset;
+        padding-right: unset;
+    }
+
+    // reset for all actionable elements
+    button, input, .dropdown, .ui.grid>.row>[class*="two wide"].column, .ui.grid>.column.row>[class*="two wide"].column, .ui.grid>[class*="two wide"].column, .ui.column.grid>[class*="two wide"].column {
+        padding: 0 !important;
+        margin: 0 !important;
+        min-height: 0 !important;
+        min-width: 0 !important;
+    }
+
+    // -------------------------------------------------------------- // 
+    // ---------------------- Elements Styling ---------------------- //
+    // -------------------------------------------------------------- //
+    
+    a:hover {
+        text-decoration: none !important;
+    }
+
+    // dividers
+    >.divider {
+        width: calc(100% - var(--spc-4_8)) !important;
+        align-self: flex-end;
+        margin: var(--spc-7_8) 0 !important;
+    }
+
+
+    // select branch dropdown
+    .select-branch {
+        align-self: flex-end;
+
+        .branch-dropdown-button {
+            @include button.hollow;
+        }
+
+        +.divider {
+            border: none !important;
+            margin: var(--spc-4_8) 0 !important;
+        }
+
+        .menu {
+            --color-menu: #{color.get('elevation/3')};
+
+            .branch-tag-item.active, .reference-list-menu, .reference-list-menu .item {
+                --color-menu: #{color.get('elevation/4')} !important;
+            }
+
+            .branch-tag-item {
+                --border-radius: #{var(--spc-4_8)};
+
+                &:hover {
+                    color: currentColor !important;
+                }
+            }
+        }
+    }
+
+    .issue-sidebar-combo {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spc-4_8) !important;
+
+        > * {
+            padding-left: var(--spc-4_8) !important;
+            padding-right: var(--spc-4_8) !important;
+        }
+
+        .ui.dropdown {
+            padding-top: var(--spc-3_8) !important;
+            padding-bottom: var(--spc-3_8) !important;
+            font-size: var.get('font-size/sm');
+            transition: background-color .1s ease;
+            border-radius: var(--border-radius) !important;
+
+            >a {
+                flex: 1;
+                display: flex;
+                justify-content: space-between;
+
+                &:hover {
+                    color: currentColor !important;
+                    text-decoration: none !important;
+                }
+            }
+
+            &:hover {
+                background-color: rgba(#{color.get('elevation/6', 'rgb')}, .5);
+            }
+        }
+    }
+
+    // direct text children
+    >.text {
+        // background-color: orange !important;
+        flex: 1;
+        display: flex !important;
+        justify-content: space-between;
+        font-weight: 500 !important;
+        margin-bottom: var(--spc-6_8) !important;
+
+        strong {
+            font-weight: 500 !important;
+        }
+    }
+
+    .watching {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spc-6_8) !important;
+
+        button {
+            font-weight: 500;
+            padding: var(--spc-4_8) var(--spc-6_8) !important;
+            border-radius: var(--border-radius) !important;
+
+            svg {
+                color: color.get('subtle') !important;
+            }
+        }
+    }
+
+    .depending {
+        // title
+        >.text {
+            display: inline-block;
+            margin-bottom: var(--spc-6_8) !important;
+        }
+
+        >p {
+            margin-bottom: var(--spc-4_8) !important;
+        }
+
+        .divided.list {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spc) !important;
+
+            .dependency {
+                border: none !important;
+
+                .item-left {
+                    a { // issue
+
+                    }
+
+                    div.text { // repo
+                        font-size: var.get('font-size/xs') !important;
+                    }
+                }
+
+                // if not the first dependency in the list, we add a :before element to serve as divider
+                &:not(:first-child) {
+                    position: relative;
+                    &:before {
+                        content: '';
+                        display: block;
+                        position: absolute;
+                        top: -8px;
+                        left: 0;
+                        height: 1px;
+                        width: 100%;
+                        background-color: color.get('elevation/4');
+                    }
+                }
+            }
+        }
+
+        #new-dependency-drop-list {
+            padding: var(--spc-3_8) var(--spc-6_8) !important;
+            // make radius to the right be 0 to merge with the add button
+            border-top-right-radius: 0 !important;
+            border-bottom-right-radius: 0 !important;
+
+            &.active {
+                // restore right border to 1px when active
+                border-top-left-radius: var(--border-radius) !important;
+                border-bottom-left-radius: var(--border-radius) !important;
+                border-color: color.get('elevation/5') !important;
+                outline: 2px solid var(--color-accent);
+            }
+
+            input {
+                padding: var(--spc-3_8) var(--spc-6_8) !important;
+                line-height: 20px !important;
+            }
+        }
+
+        button {
+            padding: var(--spc-4_8) !important;
+        }
+    }
+
+    // reference
+    div.ui.equal.width.compact.grid {
+        button {
+            @include button.hollow;
+            display: flex;
+            color: color.get('subtle') !important;
+            width: unset !important;
+        }
+    }
+
+    // issue due date form
+    .issue-due-form {
+        * {
+            color: color.get('subtle') !important;
+        }
+
+        // input of type date
+        input[type="date"] {
+            padding: var(--spc-4_8) var(--spc-6_8) !important;
+            border-top-left-radius: var(--border-radius);
+            border-bottom-left-radius: var(--border-radius);
+        }
+        
+        button {
+            padding: var(--spc-4_8) !important;
+            border-top-right-radius: var(--border-radius) !important;
+            border-bottom-right-radius: var(--border-radius) !important;
+        }
+    }
+
+    // direct form child
+    >form, .form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spc-4_8) !important;
+    }
+
+    // buttons at the end of the sidebar
+    >form button, >button {
+        font-size: var.get('font-size/sm') !important;
+        border: none !important;
+        background: transparent !important;
+        padding: var(--spc-3_8) var(--spc-4_8) !important;
+        justify-content: start !important;
+        gap: var(--spc-4_8) !important;
+        margin-bottom: var(--spc-2_8) !important;
+        border-radius: var(--border-radius) !important;
+
+        svg {
+            color: color.get('subtle') !important;
+        }
+
+        &:hover {
+            background: color.get('elevation/4') !important;
+        }
+
+        // if the data-modal attr is #sidebar-delete-issue, make the color red
+        &[data-modal="#sidebar-delete-issue"] {
+            color: color.get('palette/red/base') !important;
+            svg {
+                color: color.get('palette/red/base') !important;
+            }
+
+            &:hover {
+                background: rgba(#{color.get('palette/red/dark/15%', 'rgb')}, 0.1) !important;
+            }
+        }
+    }
+}
--- a/src/themes/scss/theme/modules/issues/_issue.scss
+++ b/src/themes/scss/theme/modules/issues/_issue.scss
@@ -0,0 +1,265 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+@use '../../components/button' as button;
+@use './issue-sidebar';
+
+@mixin apply-styles {
+    .issue-content-right {
+        @include issue-sidebar.sidebar;
+    }
+
+    .issue-title-header {
+        margin-bottom: var.get('measure/1.5x');
+        padding-bottom: var.get('measure/.75x');
+        border-bottom: 1px solid color.get('elevation/5');
+
+        .issue-title {
+            .index {
+                font-weight: 300;
+            }
+        }
+
+        .issue-title-meta {
+            color: color.get('subtle');
+        }
+
+        &:has(+ .ui.pull.tabs) { // if the next sibling is a tab (e.g. pull request tab selector)
+            margin-bottom: var.get('measure/1x');
+            padding-bottom: var.get('measure/.5x');
+            border-bottom: none;
+        }
+    }
+
+    .issue-content {
+        column-gap: var.get('measure/1.5x');
+    }
+
+    .issue-content-left {
+        .timeline-avatar img {
+            border-radius: 50% !important;
+        }   
+    }
+
+    .timeline-item {
+        &.event {
+            .badge {
+                // and not contains a tw-bg-* class
+                &:not([class*="tw-bg-"]) {
+                    color: var(--color-timeline-badge-fg) !important;
+                }
+
+                &.tw-bg-green.tw-text-white {
+                    color: var(--color-green-contrast) !important;
+                }
+
+                &.tw-bg-red.tw-text-white {
+                    color: var(--color-red-contrast) !important;
+                }
+            }
+
+            .ui.segments.conversation-holder {
+                margin-left: var.get('measure/.5x');
+                border-radius: var(--border-radius);
+            }
+        }
+
+        &.comment {
+            // comment form at the end
+            &.form:not(.issue-content) {
+                display: flex;
+                align-items: flex-start;
+                background-color: var(--color-body);
+                gap: var.get('measure/1x');
+                left: -68px !important;
+                width: calc(100% + 68px - 16px) !important;
+
+                @media (max-width: 768px) {
+                    left: 0 !important;
+                    margin-left: -16px !important;
+                    width: auto !important;
+                }
+
+                .timeline-avatar {
+                    display: block;
+                    position: relative !important;
+                    left: unset !important;
+                    flex: 0 0 auto !important;
+                }
+
+                .content {
+                    // fake title to mimic github new issue page
+                    &:before {
+                        display: block;
+                        content: 'Add a comment';
+                        font-weight: 600;
+                        margin-bottom: var.get('measure/1x');
+                        margin-top: var.get('measure/.5x');
+                        font-size: var.get('font-size/lg');
+                    }
+
+                    display: block;
+                    position: relative !important;
+                    margin-left: 0 !important;
+                    flex: 1;
+
+                    .ui.segment {
+                        padding: 0 !important;
+                        border: none !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .repository.view.issue {
+        --avatar-size: 24px;
+
+        .comment-list .ui.comments {
+            background-color: transparent;
+            gap: var.get('measure/1x');
+            position: relative;
+        }
+
+        .comment-list {
+            .ui.comment-code-cloud.segment {
+                padding: 0 var.get('measure/.5x') var.get('measure/.5x') !important;
+
+                .ui.comments {
+                    gap: var.get('measure/.5x');
+
+                    &:before {
+                        display: block;
+                        content: "";
+                        position: absolute;
+                        top: 0;
+                        bottom: 0;
+                        left: calc((var(--avatar-size) / 2) - 1px);
+                        top: 16px;
+                        width:  3px;
+                        background-color: var(--color-timeline);
+                        opacity: 50%;
+                    }
+
+                    .comment.code-comment .content.comment-container{
+                        background-color: transparent !important;
+
+                        .header.comment-header {
+                            .comment-header-left {
+                                gap: var.get('measure/.5x');
+                                .avatar img {
+                                    z-index: 1 !important;
+                                    width: var(--avatar-size) !important;
+                                    height: var(--avatar-size) !important;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .code-comment-buttons {
+                    margin: 0!important;
+                }
+
+                .comment-form {
+                    margin-top: var.get('measure/1x');
+
+                    .field.footer {
+                        margin: 0 !important;
+                        padding: 0 !important;
+
+                        button {
+                            padding: var.get('measure/.5x') var.get('measure/1x') !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .repository .ui.tabs.divider {
+        margin-bottom: var.get('measure/1x');
+    }
+
+    .repository .diff-detail-box { // diff page detail box
+        padding: var.get('measure/.5x') 0;
+        height: 60px;
+    }
+
+    .repository.view.issue .pull.tabs.container {
+        + div {
+            >.diff-detail-box:first-child {
+                margin: calc(var.get('measure/1x') * -1) 0 0 0;
+            }
+        }
+    }
+
+    .repository #diff-container {
+        #diff-file-tree {
+            top: 60px;
+            .diff-file-tree-items {
+                margin: 0;
+            }
+        }
+
+        column-gap: var.get('measure/1x');
+
+        .diff-file-body tr.tag-code:last-child td:first-child, .diff-file-body tr.tag-code:last-child td:first-child * {
+            border-bottom-left-radius: calc(var(--border-radius) - 2px);
+        }
+
+        .diff-file-body tr.tag-code:last-child td:last-child, .diff-file-body tr.tag-code:last-child td:last-child * {
+            border-bottom-right-radius: var(--border-radius);
+        }
+
+        .ui.attached.header.diff-file-header.sticky-2nd-row {
+            position: sticky;
+            top: 60px;
+            z-index: 7;
+        }
+
+        .add-comment {
+            border-top: 1px solid var(--color-secondary);
+            border-bottom: 1px solid var(--color-secondary);
+            
+            .conversation-holder {
+                .comment-code-cloud {
+                    padding: var.get('measure/.75x') !important;
+                    form {
+                        &:not(:first-child) {
+                            margin-top: var.get('measure/.5x');
+                        }
+                        
+                        .field.footer {
+                            margin: 0 !important;
+                            padding: 0 !important;
+
+                            button {
+                                padding: var.get('measure/.5x') var.get('measure/1x') !important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // new issue page
+    .page-content.repository.new.issue {
+        .issue-content-left {
+            .ui.comments .comment {
+                .ui.segment.content {
+                    padding: 6px 0 0;
+                    border: none;
+
+                    .field {
+                        margin-bottom: var.get('measure/1x');
+                    }
+
+                    &:before, &:after {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }        
+}
--- a/src/themes/scss/theme/modules/issues/_list.scss
+++ b/src/themes/scss/theme/modules/issues/_list.scss
@@ -0,0 +1,46 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+
+@mixin apply-styles {
+    .page-content.repository.issue-list, .page-content.dashboard.issues {
+        .secondary-nav {
+            margin-bottom: var.get('measure/1.5x');
+        }
+
+        #issue-filters {
+            margin: var.get('measure/2x') 0 var.get('measure/1x') 0;
+            gap: var.get('measure/3x');
+            align-items: center;
+        }
+
+        #issue-list {
+            .flex-item {
+                padding: var.get('measure/.75x') 0 var.get('measure/.75x') 0;
+
+                &:first-child {
+                    padding-top: 0;
+                }
+
+                &:last-child {
+                    padding-bottom: 0;
+                }
+
+                .branch {
+                    background-color: color.get('elevation/1');
+                }
+
+                .flex-item-icon {
+                    svg {
+                        &.green {
+                            color: color.get('palette/green/base') !important;
+                        }
+                    }
+                }
+            }
+        }
+
+        .list-header {
+            margin-bottom: var.get('measure/1.5x');
+        }
+    }
+}
--- a/src/themes/scss/theme/modules/issues/index.scss
+++ b/src/themes/scss/theme/modules/issues/index.scss
@@ -0,0 +1,7 @@
+@use './list';
+@use './issue';
+
+@mixin issues {
+    @include list.apply-styles();
+    @include issue.apply-styles();
+}
--- a/src/themes/scss/theme/modules/repo/_file-list.scss
+++ b/src/themes/scss/theme/modules/repo/_file-list.scss
@@ -0,0 +1,104 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+@use '../../components/button' as button;
+
+@mixin apply-styles {
+    .repo-button-row-left {
+        gap: var.get('measure/.5x');
+
+        .button {
+            @include button.hollow;
+        }
+
+        .breadcrumb.repo-path {
+            font-size: var.get('font-size/lg');
+            padding: 0 0 0 var.get('measure/.5x');
+
+            .section {
+                &:first-of-type, &.active {
+                    font-weight: 600;
+                }
+            }
+
+            .breadcrumb-divider, button {
+                color: color.get('subtle') !important;
+            }
+
+            button {
+                border-radius: var(--border-radius);
+                padding: var.get('measure/.375x');
+                margin: 0 0 0 var.get('measure/.5x') !important;
+
+                svg {
+                    width: var.get('measure/1x');
+                    height: var.get('measure/1x');
+                }
+
+                &:hover {
+                    background-color: var(--color-nav-hover-bg);
+                }
+            }
+        }
+    }
+
+    .repo-home-filelist {
+        > div {
+            margin: 0 !important;
+        }
+
+        display: flex;
+        flex-direction: column;
+        row-gap: var.get('measure/1x');
+
+        // file list table
+        #repo-files-table {
+            // header
+            .repo-file-last-commit {
+                padding: var.get('measure/.75x') var.get('measure/1x') !important;
+
+                .commit-summary {
+                    margin: 0;
+                }
+
+                .latest-commit {
+                    gap: var.get('measure/.5x');
+
+                    img {
+                        // make it a circle (avatar)
+                        border-radius: 50%;
+                        width: var.get('measure/1.25x');
+                        height: var.get('measure/1.25x');
+                    }
+                }
+
+                .label {
+                    // boton con icono y avatar
+                    .detail.icon.button img {
+                        display: none;
+                    }
+                }
+            }
+
+            // cells
+            .repo-file-cell {
+                padding: var.get('measure/.5x') var.get('measure/1x') !important;
+
+                &.name {
+                    display: flex;
+                    flex-wrap: nowrap;
+                    column-gap: var.get('measure/.5x');
+                    align-items: center;
+                }
+            }
+        }
+
+        // readme
+        #readme {
+
+        }
+
+        .repository-summary .sub-menu .item {
+            height: 30px;
+        }
+    }
+}
--- a/src/themes/scss/theme/modules/repo/_home.scss
+++ b/src/themes/scss/theme/modules/repo/_home.scss
@@ -0,0 +1,247 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+
+@mixin apply-styles {
+    // description, labels, info
+    .repo-home-sidebar-top {
+        @media (max-width: 768px) {
+            border-bottom: 1px solid color.get('elevation/6');
+            margin-bottom: var.get('measure/1x');
+        }
+
+        form {
+            margin-top: 0 !important;
+        }
+
+        #repo-topics, #topic_edit, .label-list {
+            row-gap: var.get('measure/.5x');
+            margin-top: 0 !important;
+
+            .label:not(.basic) {
+                font-size: var.get('font-size/sm') !important;
+                background-color: rgba(#{color.get('palette/blue/base', 'rgb')}, 0.1);
+                color: color.get('primary/base');
+                border-radius: var.get('measure/2x');
+                line-height: 22px !important;
+                padding-top: 0 !important;
+                padding-bottom: 0 !important;
+
+                &:hover {
+                    background-color: rgba(#{color.get('palette/blue/base', 'rgb')}, 0.3) !important;
+                    color: color.get('primary/base') !important;
+                }
+            }
+
+            .ui.selection.active.dropdown, .ui.selection.active.dropdown .menu {
+                border-color: color.get('elevation/6')
+            }
+        }
+
+        .repo-description {
+            margin-bottom: var.get('measure/1x');
+
+            +a.flex-text-block {
+                svg {
+                    color: color.get('subtle') !important;
+                }
+                margin-bottom: var.get('measure/1x');
+            }
+        }        
+
+        .flex-text-block {
+            gap: var.get('measure/.25x') !important;
+            font-size: var.get('font-size/md') !important;
+
+            svg {
+                margin-right: var.get('measure/.25x') !important;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .repo-description {
+                margin-top: 0 !important;
+
+                +a.flex-text-block {
+                    margin-bottom: 0;
+                }
+            }
+
+            #repo-topics, #manage_topic, .flex-item-title {
+                display: none;
+            }
+
+            .flex-item-body>div {
+                flex: 1;
+            }
+        }
+    }
+
+    // releases + languages section
+    .repo-home-sidebar-bottom {
+        .flex-list .flex-item .flex-item-main {
+            .flex-item {
+                padding: 0 !important;
+
+                .flex-item-main {
+                    gap: 0 !important;
+
+                    .flex-item-header {
+                        * {
+                            font-size: var.get('font-size/md') !important;
+                        }
+
+                        .flex-item-title {
+                            gap: var.get('measure/.5x') !important;
+                            .green.label {
+                                border-radius: var.get('measure/2x');
+                                font-size: var.get('font-size/sm') !important;
+                                background-color: transparent !important;
+                                border: 1px solid color.get('palette/green/base') !important;
+                                color: color.get('palette/green/base') !important;
+                            }
+                        }
+                    }
+
+                    .flex-item-body {
+                        .time {
+                            font-size: var.get('font-size/sm') !important;
+                        }
+                    }
+                }
+            }
+        }
+
+        // languages
+        .flex-item-body {
+            gap: 0 !important;
+
+            .language-stats {
+                margin: 0 !important;
+                height: var.get('measure/.5x') !important;
+                margin-bottom: var.get('measure/.5x') !important;
+            }
+
+            .language-stats-details {
+                gap: var.get('measure/1x') !important;
+                .item {
+                    font-size: var.get('font-size/sm') !important;
+                    padding: 0;
+                    gap: var.get('measure/.25x') !important;
+
+                    .color-icon {
+                        height: var.get('measure/.5x') !important;
+                        width: var.get('measure/.5x') !important;
+                        margin-right: var.get('measure/.25x') !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .repo-home-sidebar-bottom, .repo-home-sidebar-top {
+        padding-left: var.get('measure/1.5x');
+
+        @media (max-width: 768px) {
+            padding-left: 0 !important;
+        }
+
+        .flex-item-title .item {
+            display: flex;
+            flex-wrap: nowrap;
+            gap: var.get('measure/.5x');
+            text-decoration: none;
+
+            .small.label {
+                background-color: color.get('elevation/7');
+                border: 1px solid color.get('elevation/7');
+                border-radius: var.get('measure/2x');
+                color: color.get('text');
+                font-weight: var(--base-text-weight-medium, 500);
+                min-width: 20px;
+                padding: 2px;
+                text-align: center;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+
+        >.flex-list>.flex-item {
+            padding-top: var.get('measure/1x');
+            padding-bottom: var.get('measure/1x');
+
+            >.flex-item-main {
+                gap: var.get('measure/1x');
+            }
+        }
+    }
+
+    button.ui.primary.button.js-btn-clone-panel {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: var.get('measure/.5x');
+        align-items: center;
+
+        span {
+            display: flex;
+            flex-wrap: nowrap;
+            gap: var.get('measure/.375x');
+            align-items: center;
+        }
+    }
+
+    .clone-panel-popup {
+        .clone-panel-field {
+            margin: var.get('measure/1x');
+        }
+
+        .clone-panel-list {
+            margin: var.get('measure/1x');
+
+            .item {
+                margin: var.get('measure/.5x') 0;
+            }
+        }
+
+        .clone-panel-tab {
+            padding: 0 var.get('measure/1x') var.get('measure/.5x');
+            display: flex;
+            gap: var.get('measure/.5x');
+
+            button {
+                padding: var.get('measure/.375x') var.get('measure/.5x');
+                font-weight: 600;
+
+                &.active {
+                    border-bottom: 0;
+                    position: relative;
+
+                    &:after {
+                        content: '';
+                        display: block;
+                        position: absolute;
+                        bottom: -7px;
+                        left: 0;
+                        width: 100%;
+                        height: 2px;
+                        background-color: color.get('primary/base');
+                    }
+                }
+
+                &:hover {
+                    background-color: var(--color-hover);
+                    border-radius: var(--border-radius);
+                    transition: background 0.12s ease-out;
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+    .tippy-svg-arrow {
+        display: none;
+    }
+
+    .repository.file.editor .commit-form-wrapper .commit-form:before, .repository.file.editor .commit-form-wrapper .commit-form:after {
+        display: none;
+    }
+}
--- a/src/themes/scss/theme/modules/repo/_secondary-navbar.scss
+++ b/src/themes/scss/theme/modules/repo/_secondary-navbar.scss
@@ -0,0 +1,176 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+@use '../../components/button' as button;
+
+@mixin apply-styles {
+    .secondary-nav {
+        margin-bottom: var.get('measure/1.5x') !important;
+
+        .ui.container {
+            margin: 0 0 0 0 !important;
+            max-width: unset !important;
+            width: 100% !important;
+            padding: 0 var.get('measure/1x');
+        }
+
+        // header
+        .repo-header {
+            margin: 0 0 var.get('measure/1x') 0;
+            
+            // repo image
+            img.avatar {
+                width: var.get('measure/2x') !important;
+                height: var.get('measure/2x') !important;
+            }
+
+            // repo title (repo "owner / name" text)
+            .flex-item-title {
+                gap: var.get('measure/.25x') !important;
+                font-size: var.get('font-size/md') !important;
+                font-weight: normal !important;
+                color: color.get('elevation/10') !important;
+
+                a {
+                    padding: var.get('measure/.375x') var.get('measure/.5x') !important;
+                    border-radius: var.get('measure/.25x');
+
+                    &:hover {
+                        background-color: color.get('elevation/4') !important;
+                        color: color.get('text') !important;
+                        text-decoration: none !important;
+                    }
+                }
+
+                // repo name only
+                a:last-child {
+                    font-weight: 600;
+                }
+            }
+
+            // "public/private" label
+            .flex-item-trailing {
+                .label {
+                    padding: var.get('measure/.25x') var.get('measure/.5x');
+                    font-size: var.get('font-size/sm');
+                    border-radius: var.get('measure/1x');
+                    background-color: transparent;
+                    color: color.get('elevation/10');
+                }
+
+                // lock icon
+                svg {
+                    color: color.get('elevation/10');
+                }
+            }
+
+            @media (max-width: 768px) {
+                // repo title (repo "owner / name" text)
+                .flex-item-title {
+                    display: inline-block;
+                    white-space: nowrap;
+                    padding: 0 var.get('measure/.5x') !important;
+                    font-size: var.get('font-size/sm') !important;
+                    font-weight: 500 !important;
+
+                    a {
+                        padding: 0 !important;
+
+                        &:hover {
+                            background-color: transparent !important;
+                            color: color.get('primary/base') !important;
+                            text-decoration: none !important;
+                        }
+                    }
+
+                    a:first-child {
+                        float: left;
+                        margin-right: var.get('measure/.5x');
+                        color: color.get('elevation/10') !important;
+                        font-weight: 500 !important;
+
+                        &:hover {
+                            color: color.get('primary/base') !important;                            
+                        }
+                    }
+
+                    // repo name only
+                    a:last-child {
+                        font-size: var.get('font-size/md') !important;
+                        clear: left;
+                        display: block; 
+                    }
+                }
+            }
+        }
+
+        .fork-flag {
+            margin-top: calc(#{var.get('measure/1x')} * -1) !important;
+            margin-bottom: var.get('measure/1x') !important;
+        }
+
+        // header navbar menu
+        overflow-menu.ui.secondary.pointing.menu {
+            .overflow-menu-items {
+                gap: var.get('measure/.5x') !important;
+            }
+
+            // navbar menu items
+            .item {
+                padding: var.get('measure/.375x') var.get('measure/.5x') !important;
+                margin-bottom: var.get('measure/.5x') !important;
+                border-radius: var.get('measure/.25x');
+                border: none !important;
+
+                // icon
+                svg {
+                    color: var(--color-text-light-3) !important;
+                    margin-right: var.get('measure/.5x') !important;
+                }
+
+                &:hover {
+                    background-color: var(--color-secondary-nav-hover-bg) !important;
+                    color: var(--color-text-light-2) !important;
+                }
+
+                // when the represents the current route
+                &.active {
+                    border: none !important;
+                    &:after {
+                        content: '';
+                        display: block;
+                        position: absolute;
+                        width: 100%;
+                        height: 2px;
+                        left: 0;
+                        top: calc(100% + #{var.get('measure/.375x')} - 1px);
+                        background-color: color.get('primary/base');
+                        transform: unset;
+                        border: none;
+                    }
+                }
+
+                // numeric badge/label (e.g. indicating the number of issues)
+                .small.label {
+                    background-color: color.get('elevation/7');
+                    border: 1px solid color.get('elevation/7');
+                    border-radius: var.get('measure/2x');
+                    color: color.get('text');
+                    font-weight: var(--base-text-weight-medium, 500);
+                    min-width: calc(var.get('measure/1x') + 1px);
+                    padding: 2px;
+                    text-align: center;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+        }
+
+        // buttons at the right of the header (unwatch, star, fork, etc.)
+        .repo-buttons {
+            .button {
+                font-size: var.get('font-size/sm') !important;
+                @include button.hollow;
+            }
+        }
+    }
+}
--- a/src/themes/scss/theme/modules/repo/index.scss
+++ b/src/themes/scss/theme/modules/repo/index.scss
@@ -0,0 +1,9 @@
+@use './home';
+@use './secondary-navbar';
+@use './file-list';
+
+@mixin repo {
+    @include home.apply-styles();
+    @include secondary-navbar.apply-styles();
+    @include file-list.apply-styles();
+}
--- a/src/themes/scss/theme/modules/settings/_pages.scss
+++ b/src/themes/scss/theme/modules/settings/_pages.scss
@@ -0,0 +1,20 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+@use './section';
+
+@mixin settings-pages {
+    .page-content.user.settings, .page-content.admin, .page-content.repository.settings {
+        .ui.flex-container {
+            column-gap: 40px;
+            
+            .flex-container-nav {
+                width: 232px;
+                @include section.nav;
+            }
+
+            .flex-container-main {
+                @include section.content;
+            }
+        }
+    }
+}
--- a/src/themes/scss/theme/modules/settings/index.scss
+++ b/src/themes/scss/theme/modules/settings/index.scss
@@ -0,0 +1,5 @@
+@use './pages';
+
+@mixin settings {
+    @include pages.settings-pages;
+}
--- a/src/themes/scss/theme/modules/settings/section/_content.scss
+++ b/src/themes/scss/theme/modules/settings/section/_content.scss
@@ -0,0 +1,87 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+
+@mixin content {
+    .ui.top.attached.header {
+        background: unset;
+        border: none;
+        font-size: var.get('font-size/3xl');
+        font-weight: 400;
+        padding: 0 0 var.get('measure/.5x') 0;
+        border-bottom: 1px solid var(--color-secondary);
+        margin-bottom: var.get('measure/1x');
+
+        // if not the first header, add a margin top
+        &:not(:first-child) {
+            margin-top: var.get('measure/2.5x');
+        }
+
+        &.error {
+            border-color: var(--color-secondary) !important;
+            background: unset !important;
+        }
+    }
+
+    .ui.segment {
+        border-radius: var(--border-radius);
+
+        >*:last-child {
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+    }
+
+    .ui.attached.segment {
+        background: unset;
+        padding:0;
+        border: none;
+        margin: 0;
+
+        &.bottom {
+            margin-top: var.get('measure/2x');
+        }
+
+        a:not(.button) {
+            color: var(--color-primary);
+            text-decoration: underline;
+            display: inline-flex;
+            align-items: center;
+            column-gap: var.get('measure/.375x');
+
+            svg {
+                margin-left: var.get('measure/.25x');
+            }
+        }
+
+        .ui.form .field {
+            margin: 0 0 1em;
+        }
+
+        .ui.form .fields .fields, .ui.form .field:last-child, .ui.form .fields:last-child .field {
+            margin-bottom: 0;
+        }
+
+        .field {
+            margin: var.get('measure/1x') 0;
+        }
+
+        .divider {
+            margin: var.get('measure/1x') 0;
+        }
+
+        .list {
+            border: 1px solid var(--color-secondary);
+            border-radius: var(--border-radius);
+
+            .item {
+                margin-left: 0;
+                margin-right: 0;
+
+                &:not(:first-child), &:first-child {
+                    padding: 1rem;
+                    margin: 0rem 0rem 0rem 0rem;
+                }
+            }            
+        }
+    }
+}
--- a/src/themes/scss/theme/modules/settings/section/_nav.scss
+++ b/src/themes/scss/theme/modules/settings/section/_nav.scss
@@ -0,0 +1,94 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+
+@mixin nav {
+    .vertical.menu {
+        --spacing: #{var.get('measure/.375x')} #{var.get('measure/.75x')};
+        --min-height: #{var.get('measure/2x')};
+        background-color: transparent;
+        border: none;
+
+        .header.item {
+            display: flex;
+            align-items: center;
+            padding: var(--spacing);
+            font-size: var.get('font-size/sm');
+            font-weight: 600;
+            color: color.get('subtle');
+            background-color: transparent;
+            min-height: var(--min-height);
+        }
+
+        a.item, details.item {
+            min-height: var(--min-height);
+            &:before {
+                content: none;
+            }
+
+            &:not(:last-child) {
+                margin-bottom: var.get('measure/.25x');
+            }
+
+            &.active {
+                font-weight: 600;
+                background-color: var(--color-menu);
+                position: relative;
+
+                &:hover {
+                    background-color: var(--color-hover);
+                }
+
+                &:after {
+                    background: var(--color-primary);
+                    border-radius: .375rem;
+                    content: "";
+                    height: 24px;
+                    width: 4px;
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    left: calc(0px - 4px - #{var.get('measure/.375x')});
+                }
+            }
+        }
+
+        a.item, details.item summary {
+            padding: var(--spacing);
+            border-radius: var(--border-radius);
+        }
+
+        details.item {
+            --octicon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12"><path d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"></path></svg>');
+
+            summary {
+                &:after {
+                    color: color.get('subtle');
+                    transform: scaleY(1);
+                    transition: transform .12s linear;
+                    mask-image: var(--octicon-chevron-down);
+                    -webkit-mask-image: var(--octicon-chevron-down);
+                }
+            }
+
+            &[open] summary {
+                &:after {
+                    transform: scaleY(-1);
+                }
+            }
+
+            .menu {
+                .item {
+                    display: flex;
+                    align-items: center;
+                    color: color.get('text') !important;
+
+                    &:hover {
+                        background-color: var(--color-hover);
+                    }
+                }
+                
+                margin: 0 !important;
+            }
+        }
+    }
+}
--- a/src/themes/scss/theme/modules/settings/section/index.scss
+++ b/src/themes/scss/theme/modules/settings/section/index.scss
@@ -0,0 +1,2 @@
+@forward './nav';
+@forward './content';
--- a/src/themes/scss/theme/vars/_base.scss
+++ b/src/themes/scss/theme/vars/_base.scss
@@ -0,0 +1,60 @@
+@use '@lucas-labs/lui-micro/color' as color;
+@use '@lucas-labs/lui-micro/var' as var;
+
+@mixin base {
+    :root {
+        // ┌───────┐
+        // │ fonts │
+        // └───────┘
+        --fonts-proportional: #{var.get('font-family')};
+        --fonts-monospace: #{var.get('code-font-family')};
+        --fonts-emoji: #{var.get('emoji-font-family')};
+
+        // ┌───────┬───────────────────┐
+        // │ fonts │ weights & heights │
+        // └───────┴───────────────────┘
+        --font-weight-light: 300;
+        --font-weight-normal: 400;
+        --font-weight-medium: 500;
+        --font-weight-semibold: 600;
+        --font-weight-bold: 700;
+        --line-height-default: normal;
+
+        // ┌────────┐
+        // │ images │
+        // └────────┘
+        --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
+        --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
+        --octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
+        
+        // ┌────────┐
+        // │ radius │
+        // └────────┘
+        --border-radius:        #{var.get('measure/.5x')};
+        --border-radius-medium: #{var.get('measure/1x')};
+        --border-radius-full:   calc(infinity * 1px);
+
+        // ┌────────┐
+        // │ others │
+        // └────────┘
+        --opacity-disabled:    0.55;
+        --height-loading:      16rem;
+        --min-height-textarea: 132px; // padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported
+        --checkbox-size:       16px;  // height and width of checkbox and radio inputs
+        --page-spacing:        24px;  // space between page elements
+        --page-margin-x:       32px;  // minimum space on left and right side of page
+        --tab-size:            4;
+    }
+
+    @media (min-width: 768px) and (max-width: 1200px) {
+        :root {
+            --page-margin-x: 24px;
+        }
+    }
+
+    @media (max-width: 767.98px) {
+        :root {
+            --page-margin-x: 16px;
+        }
+    }
+}
--- a/src/themes/scss/theme/vars/_colors.scss
+++ b/src/themes/scss/theme/vars/_colors.scss
@@ -0,0 +1,410 @@
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+
+@mixin colors($is-dark: true) {
+    $scheme: if($is-dark, 'dark', 'light');
+    $scheme-inverted: if($is-dark, 'light', 'dark');
+
+    :root {
+        accent-color: var(--color-accent);
+
+        @if $is-dark {
+            color-scheme: dark;
+            --is-dark-theme: true;
+        } @else {
+            color-scheme: light;
+            --is-dark-theme: false;
+        }
+
+        // ┌─────────┐
+        // │ primary │
+        // └─────────┘
+        --color-primary: #{color.get('primary/base')};
+        --color-primary-contrast: #{color.get('primary/base', 'contrast')};
+
+        // dark
+        --color-primary-dark-1: #{color.get('primary/' + $scheme-inverted + '/3%')};
+        --color-primary-dark-2: #{color.get('primary/' + $scheme-inverted + '/6%')};
+        --color-primary-dark-3: #{color.get('primary/' + $scheme-inverted + '/9%')};
+        --color-primary-dark-4: #{color.get('primary/' + $scheme-inverted + '/10%')};
+        --color-primary-dark-5: #{color.get('primary/' + $scheme-inverted + '/20%')};
+        --color-primary-dark-6: #{color.get('primary/' + $scheme-inverted + '/25%')};
+        --color-primary-dark-7: #{color.get('primary/' + $scheme-inverted + '/30%')};
+
+        // light
+        --color-primary-light-1: #{color.get('primary/' + $scheme + '/3%')};
+        --color-primary-light-2: #{color.get('primary/' + $scheme + '/6%')};
+        --color-primary-light-3: #{color.get('primary/' + $scheme + '/10%')};
+        --color-primary-light-4: #{color.get('primary/' + $scheme + '/15%')};
+        --color-primary-light-5: #{color.get('primary/' + $scheme + '/20%')};
+        --color-primary-light-6: #{color.get('primary/' + $scheme + '/30%')};
+        --color-primary-light-7: #{color.get('primary/' + $scheme + '/40%')};
+
+        // alpha
+        --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);
+
+        // states
+        --color-primary-hover: var(--color-primary-light-1);
+        --color-primary-active: var(--color-primary-light-3);
+
+        // ┌───────────┐
+        // │ secondary │ » secondary
+        // └───────────┘
+        --color-secondary: #{color.get('secondary/base')};
+
+        // dark
+        --color-secondary-dark-1:  #{color.get('secondary/' + $scheme-inverted + '/3%')};
+        --color-secondary-dark-2:  #{color.get('secondary/' + $scheme-inverted + '/6%')};
+        --color-secondary-dark-3:  #{color.get('secondary/' + $scheme-inverted + '/9%')};
+        --color-secondary-dark-4:  #{color.get('secondary/' + $scheme-inverted + '/12%')};
+        --color-secondary-dark-5:  #{color.get('secondary/' + $scheme-inverted + '/15%')};
+        --color-secondary-dark-6:  #{color.get('secondary/' + $scheme-inverted + '/20%')};
+        --color-secondary-dark-7:  #{color.get('secondary/' + $scheme-inverted + '/25%')};
+        --color-secondary-dark-8:  #{color.get('secondary/' + $scheme-inverted + '/30%')};
+        --color-secondary-dark-9:  #{color.get('secondary/' + $scheme-inverted + '/35%')};
+        --color-secondary-dark-10: #{color.get('secondary/' + $scheme-inverted + '/40%')};
+        --color-secondary-dark-11: #{color.get('secondary/' + $scheme-inverted + '/45%')};
+        --color-secondary-dark-12: #{color.get('secondary/' + $scheme-inverted + '/50%')};
+        --color-secondary-dark-13: #{color.get('secondary/' + $scheme-inverted + '/55%')};
+
+        // light
+        --color-secondary-light-1: #{color.get('secondary/' + $scheme + '/3%')};
+        --color-secondary-light-2: #{color.get('secondary/' + $scheme + '/6%')};
+        --color-secondary-light-3: #{color.get('secondary/' + $scheme + '/9%')};
+        --color-secondary-light-4: #{color.get('secondary/' + $scheme + '/12%')};
+
+        // alpha
+        --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);
+
+        // states
+        --color-secondary-button: var(--color-secondary-dark-4);
+        --color-secondary-hover: var(--color-secondary-dark-3);
+        --color-secondary-active: var(--color-secondary-dark-2);
+
+        // ┌─────────┐
+        // │ console │ » used for actions console and console files
+        // └─────────┘
+        --color-console-fg: #f7f8f9;
+        --color-console-fg-subtle: #bdc4cc;
+        --color-console-bg: #171b1e;
+        --color-console-border: #2e353b;
+        --color-console-hover-bg: #272d33;
+        --color-console-active-bg: #2e353b;
+        --color-console-menu-bg: #262b31;
+        --color-console-menu-border: #414b55;
+
+        // ┌───────┐
+        // │ named │
+        // └───────┘
+        --color-red:    #{color.get('palette/red/base')};
+        --color-orange: #{color.get('palette/orange/base')};
+        --color-yellow: #{color.get('palette/yellow/base')};
+        --color-olive:  #{color.get('palette/olive/base')};
+        --color-green:  #{color.get('palette/green/base')};
+        --color-teal:   #{color.get('palette/teal/base')};
+        --color-blue:   #{color.get('palette/blue/base')};
+        --color-violet: #{color.get('palette/violet/base')};
+        --color-purple: #{color.get('palette/purple/base')};
+        --color-pink:   #{color.get('palette/pink/base')};
+        --color-brown:  #{color.get('palette/brown/base')};
+        --color-black:  #{color.get('palette/black/base')};
+
+        // ┌───────┐
+        // │ named │ » contrasts (lugit addition)
+        // └───────┘
+        --color-green-contrast: #{if($is-dark, var(--color-black), var(--color-white))};
+        --color-red-contrast:   #{if($is-dark, var(--color-black), var(--color-white))};
+
+
+        // ┌───────┐
+        // │ named │ » light variants
+        // └───────┘
+        --color-red-light:    #{color.get('palette/red/light/10%')};
+        --color-orange-light: #{color.get('palette/orange/light/10%')};
+        --color-yellow-light: #{color.get('palette/yellow/light/10%')};
+        --color-olive-light:  #{color.get('palette/olive/light/10%')};
+        --color-green-light:  #{color.get('palette/green/light/10%')};
+        --color-teal-light:   #{color.get('palette/teal/light/10%')};
+        --color-blue-light:   #{color.get('palette/blue/light/10%')};
+        --color-violet-light: #{color.get('palette/violet/light/10%')};
+        --color-purple-light: #{color.get('palette/purple/light/10%')};
+        --color-pink-light:   #{color.get('palette/pink/light/10%')};
+        --color-brown-light:  #{color.get('palette/brown/light/10%')};
+        --color-black-light:  #{if(
+                $is-dark,
+                color.get('palette/black/light/10%'),
+                color.get('palette/white/light/10%')
+            )};
+
+        // ┌───────┐
+        // │ named │ » dark 1 variants
+        // └───────┘
+        --color-red-dark-1:    #{color.get('palette/red/dark/10%')};
+        --color-orange-dark-1: #{color.get('palette/orange/dark/10%')};
+        --color-yellow-dark-1: #{color.get('palette/yellow/dark/10%')};
+        --color-olive-dark-1:  #{color.get('palette/olive/dark/10%')};
+        --color-green-dark-1:  #{color.get('palette/green/dark/10%')};
+        --color-teal-dark-1:   #{color.get('palette/teal/dark/10%')};
+        --color-blue-dark-1:   #{color.get('palette/blue/dark/10%')};
+        --color-violet-dark-1: #{color.get('palette/violet/dark/10%')};
+        --color-purple-dark-1: #{color.get('palette/purple/dark/10%')};
+        --color-pink-dark-1:   #{color.get('palette/pink/dark/10%')};
+        --color-brown-dark-1:  #{color.get('palette/brown/dark/10%')};
+        --color-black-dark-1:  #{if(
+                $is-dark,
+                color.get('palette/black/dark/10%'),
+                color.get('palette/white/dark/10%')
+            )};
+
+        // ┌───────┐
+        // │ named │ » dark 2 variants
+        // └───────┘
+        --color-red-dark-2:    #{color.get('palette/red/dark/20%')};
+        --color-orange-dark-2: #{color.get('palette/orange/dark/20%')};
+        --color-yellow-dark-2: #{color.get('palette/yellow/dark/20%')};
+        --color-olive-dark-2:  #{color.get('palette/olive/dark/20%')};
+        --color-green-dark-2:  #{color.get('palette/green/dark/20%')};
+        --color-teal-dark-2:   #{color.get('palette/teal/dark/20%')};
+        --color-blue-dark-2:   #{color.get('palette/blue/dark/20%')};
+        --color-violet-dark-2: #{color.get('palette/violet/dark/20%')};
+        --color-purple-dark-2: #{color.get('palette/purple/dark/20%')};
+        --color-pink-dark-2:   #{color.get('palette/pink/dark/20%')};
+        --color-brown-dark-2:  #{color.get('palette/brown/dark/20%')};
+        --color-black-dark-2:  #{if(
+                $is-dark,
+                color.get('palette/black/dark/20%'),
+                color.get('palette/white/dark/20%')
+            )};  
+
+        // ┌──────┐
+        // │ ansi │ » for actions console and console files
+        // └──────┘
+        --color-ansi-black:          #1e2327;
+        --color-ansi-red:            #cc4848;
+        --color-ansi-green:          #87ab63;
+        --color-ansi-yellow:         #cc9903;
+        --color-ansi-blue:           #3a8ac6;
+        --color-ansi-magenta:        #d22e8b;
+        --color-ansi-cyan:           #00918a;
+        --color-ansi-white:          var(--color-console-fg-subtle);
+        --color-ansi-bright-black:   #424851;
+        --color-ansi-bright-red:     #d15a5a;
+        --color-ansi-bright-green:   #93b373;
+        --color-ansi-bright-yellow:  #eaaf03;
+        --color-ansi-bright-blue:    #4e96cc;
+        --color-ansi-bright-magenta: #d74397;
+        --color-ansi-bright-cyan:    #00b6ad;
+        --color-ansi-bright-white:   var(--color-console-fg);
+
+        // ┌───────┐
+        // │ other │
+        // └───────┘
+        --color-grey:       #{color.get('elevation/9')};
+        --color-grey-light: #{color.get('elevation/11')};
+        --color-gold:       #{color.get('palette/yellow/dark/20%')};
+        --color-white:      #{color.get('palette/white/base')}; 
+        --color-git:        #f05133;
+
+        // ┌──────┐
+        // │ diff │
+        // └──────┘
+        --color-diff-added-linenum-bg:   #{if($is-dark, #{color.get('palette/teal/dark/50%')}, rgba(#{color.get('palette/white/base', 'rgb')}, .2))};
+        --color-diff-added-row-bg:       #{if($is-dark, #{color.get('palette/teal/dark/60%')}, rgba(#{color.get('palette/green/light/20%', 'rgb')}, .25))};
+        --color-diff-added-row-border:   #{if($is-dark, #{color.get('palette/teal/dark/40%')}, rgba(#{color.get('palette/green/light/25%', 'rgb')}, .25))};
+        --color-diff-added-word-bg:      #{if($is-dark, #{color.get('palette/teal/dark/50%')}, rgba(#{color.get('palette/green/light/6%', 'rgb')}, .3))};
+        --color-diff-moved-row-bg:       #{if($is-dark, #{color.get('palette/yellow/dark/75%')}, rgba(#{color.get('palette/yellow/light/20%', 'rgb')}, .25))};
+        --color-diff-moved-row-border:   #{if($is-dark, #{color.get('palette/yellow/dark/65%')}, rgba(#{color.get('palette/yellow/light/25%', 'rgb')}, .25))};
+        --color-diff-removed-linenum-bg: #{if($is-dark, #{color.get('palette/red/dark/60%')}, rgba(#{color.get('palette/white/base', 'rgb')}, .2))};
+        --color-diff-removed-row-bg:     #{if($is-dark, #{color.get('palette/red/dark/65%')}, rgba(#{color.get('palette/red/light/30%', 'rgb')}, .15))};
+        --color-diff-removed-row-border: #{if($is-dark, #{color.get('palette/red/dark/50%')}, rgba(#{color.get('palette/red/light/35%', 'rgb')}, .2))};
+        --color-diff-removed-word-bg:    #{if($is-dark, #{color.get('palette/red/dark/55%')}, rgba(#{color.get('palette/red/light/25%', 'rgb')}, .2))};
+        --color-diff-inactive:           #{if($is-dark, #{color.get('elevation/6')}, red)};
+
+        // ┌────────┐
+        // │ status │
+        // └────────┘
+        --color-error-border:    #{color.get('palette/red/base')};
+        --color-error-bg:        rgba(#{color.get('palette/red/base', 'rgb')}, 0.15);
+        --color-error-bg-active: #{color.get('palette/red/light/6%')};
+        --color-error-bg-hover:  #{color.get('palette/red/light/12%')};
+        --color-error-text:      #{color.get('palette/red/base')};
+        --color-success-border:  #{color.get('palette/green/light/12%')};
+        --color-success-bg:      rgba(#{color.get('palette/green/base', 'rgb')}, 0.15);
+        --color-success-text:    #{color.get('text')};
+        --color-warning-border:  #{color.get('palette/yellow/light/12%')};
+        --color-warning-bg:      #{color.get('palette/yellow/base')};
+        --color-warning-text:    #{color.get('elevation/3')};
+        --color-info-border:     #{color.get('palette/blue/light/12%')};
+        --color-info-bg:         #{color.get('elevation/3')};
+        --color-info-text:       #{color.get('text')};
+
+        // ┌───────┐
+        // │ badge │
+        // └───────┘
+        --color-red-badge:             #{color.get('palette/red/dark/20%')};
+        --color-red-badge-bg:          rgba(#{color.get('palette/red/dark/20%', 'rgb')}, .1);
+        --color-red-badge-hover-bg:    rgba(#{color.get('palette/red/dark/20%', 'rgb')}, .2);
+
+        --color-green-badge:           #{color.get('palette/green/base')};
+        --color-green-badge-bg:        rgba(#{color.get('palette/green/base', 'rgb')}, .1);
+        --color-green-badge-hover-bg:  rgba(#{color.get('palette/green/base', 'rgb')}, .2);
+
+        --color-yellow-badge:          #{color.get('palette/yellow/dark/10%')};
+        --color-yellow-badge-bg:       rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, .1);
+        --color-yellow-badge-hover-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, .2);
+
+        --color-orange-badge:          #{color.get('palette/orange/dark/10%')};
+        --color-orange-badge-bg:       rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, .1);
+        --color-orange-badge-hover-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, .2);
+
+        // ┌──────────────┐
+        // │ target-based │
+        // └──────────────┘
+
+        // body colors
+        --color-body:         #{color.get('elevation/3')};
+        --color-text-dark:    #{color.get('text')};
+        --color-text:         #{color.get('text')};
+        --color-text-light:   #{color.get('subtle')};
+        --color-text-light-1: #{color.get('subtle')};
+        --color-text-light-2: #{color.get('subtle')};
+        --color-text-light-3: #{color.get('subtle')};
+        --color-footer:       rgba(#{color.get('elevation/2', 'rgb')}, 0.2);
+        --color-timeline:     #{color.get('elevation/5')};
+        --color-timeline-badge-fg:  #{if($is-dark, var(--color-white), var.get('color-text'))};
+
+        // box
+        --color-box-header:         #{rgba(color.get('elevation/4', 'rgb'), 1)};
+        --color-box-body:           #{color.get('elevation/3')};
+        --color-box-body-highlight: #{color.get('elevation/4')};
+        
+        // input
+        --color-input-text:              var(--color-text-dark);
+        --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')};
+
+        // light
+        --color-light: #00001728;
+        --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.5);
+        --color-hover-opaque: #{color.get('elevation/6', 'rgb')};
+        --color-active: #{color.get('elevation/5')};
+        --color-menu: #{color.get('elevation/4')};
+        --color-card: #{color.get('elevation/3')};
+        --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02);
+        --color-markup-code-block: #{color.get('elevation/4')};
+        --color-markup-code-inline: #{color.get('elevation/4')};
+        --color-button: #{color.get('elevation/4')};
+        --color-code-bg: #{color.get('elevation/3')};
+        --color-shadow: #{if($is-dark, rgba(#{color.get('elevation/1', 'rgb')}, 0.5), rgba(#{color.get('elevation/6', 'rgb')}, 0.5))};
+        --color-shadow-opaque: #{if($is-dark, color.get('elevation/1'), color.get('elevation/6'))};
+
+        --color-shadow-rgb: #{if($is-dark, color.get('elevation/1', 'rgb'), color.get('elevation/6', 'rgb'))};
+
+        --color-secondary-bg: #{color.get('elevation/4')};
+        --color-expand-button: #{color.get('elevation/6')};
+        --color-placeholder-text: #{color.get('elevation/9')};
+        --color-editor-line-highlight: var(--color-primary-light-5);
+        --color-project-column-bg: #{color.get('elevation/1')};
+        --color-caret: var(--color-text);
+        --color-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .1);;
+        --color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .2);;
+        --color-reaction-active-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .05);;
+        --color-tooltip-text: #{if($is-dark, color.get('text'), color.get('elevation/1'))};
+        --color-tooltip-bg: #{if($is-dark, color.get('elevation/7'), color.get('elevation/10'))};
+        --color-overlay-backdrop: rgba(#{color.get('elevation/1', 'rgb')}, 0.8);
+
+        // navbar
+        --color-nav-bg:                 #{color.get('navbar/bg', $default: if($is-dark, color.get('elevation/1'), color.get('elevation/4')))};
+        --color-nav-hover-bg:           #{color.get('navbar/hover', $default: if($is-dark, color.get('elevation/5'), color.get('elevation/5')))};
+        --color-nav-text:               #{color.get('navbar/fg', $default: var(--color-text))};
+        --color-secondary-nav-bg:       #{if($is-dark, color.get('elevation/1'), color.get('elevation/4'))};
+        --color-secondary-nav-hover-bg: #{if($is-dark, color.get('elevation/4'), color.get('elevation/5'))};
+
+        // label
+        --color-label-text: var(--color-text);
+        --color-label-bg: #7282924b;
+        --color-label-hover-bg: #728292a0;
+        --color-label-active-bg: #728292ff;
+
+        // accents
+        --color-accent: #{color.get('accent', $default: color.get('palette/blue/dark/25%'))};
+        --color-small-accent: #{color.get('accent', $default: var(--color-primary-light-5))};
+        --color-highlight-fg: #{color.get('palette/yellow/dark/20%')};
+        --color-highlight-bg: #{color.get('palette/yellow/dark/75%')};
+    }
+
+    #commits-table {
+        // even rows color
+        --color-light: transparent !important;
+    }
+
+    #navbar {
+        #navbar-logo {
+            img {
+                height: var.get('navbar-logo/height') !important;
+                width: var.get('navbar-logo/width') !important;
+            }
+        }
+    }
+
+    .markup {
+        code {
+            border-radius: var.get('measure/.375x') !important;
+        }
+
+        p {
+            line-height: 1.5 !important;
+        }
+    }
+
+    ::selection {
+        background-color: #{color.get('primary/dark/60%')};
+        color: #{color.get('primary/dark/60%', 'contrast')};
+    }
+
+    // // In dark mode, invert emojis that are hard to read otherwise
+    @if $is-dark {
+        .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);
+        }
+    }
+}
--- a/src/themes/scss/theme/vars/index.scss
+++ b/src/themes/scss/theme/vars/index.scss
@@ -0,0 +1,2 @@
+@forward './base';
+@forward './colors';
--- a/src/themes/scss/utils/_color-utils.scss
+++ b/src/themes/scss/utils/_color-utils.scss
@@ -1,85 +0,0 @@
-@use 'sass:color';
-@use 'sass:map';
-
-@function light-change($color, $amount, $isDark) {
-    $multiplier: if($isDark, -1, 1);
-    @return color.adjust($color, $lightness: $amount * $multiplier);
-}
-
-@function alpha-change($color, $alpha) {
-    @return color.change($color, $alpha: $alpha);
-}
-
-@function color-variants-light($color, $is-dark, $with-base: false) {
-    $set: (
-        '3%':  light-change($color, -3%, $is-dark),
-        '6%':  light-change($color, -6%, $is-dark),
-        '9%':  light-change($color, -9%, $is-dark),
-        '12%': light-change($color, -12%, $is-dark),
-        '15%': light-change($color, -15%, $is-dark),
-        '18%': light-change($color, -18%, $is-dark),
-        '21%': light-change($color, -21%, $is-dark),
-        '24%': light-change($color, -24%, $is-dark),
-        '27%': light-change($color, -27%, $is-dark),
-        '30%': light-change($color, -30%, $is-dark),
-        '33%': light-change($color, -33%, $is-dark),
-        '36%': light-change($color, -36%, $is-dark),
-        '39%': light-change($color, -39%, $is-dark)
-    );
-
-    @if $with-base {
-        $set: map.merge((base: $color), $set);
-    }
-
-    @return $set;  
-}
-
-@function color-variants-dark($color, $is-dark, $with-base: false) {
-    $set: (
-        '3%':  light-change($color, 3%, $is-dark),
-        '6%':  light-change($color, 6%, $is-dark),
-        '9%':  light-change($color, 9%, $is-dark),
-        '12%': light-change($color, 12%, $is-dark),
-        '15%': light-change($color, 15%, $is-dark),
-        '18%': light-change($color, 18%, $is-dark),
-        '21%': light-change($color, 21%, $is-dark),
-        '24%': light-change($color, 24%, $is-dark),
-        '27%': light-change($color, 27%, $is-dark),
-        '30%': light-change($color, 30%, $is-dark),
-        '33%': light-change($color, 33%, $is-dark),
-        '36%': light-change($color, 36%, $is-dark),
-        '39%': light-change($color, 39%, $is-dark),
-    );
-
-    @if $with-base {
-        $set: map.merge((base: $color), $set);
-    }
-
-    @return $set;    
-}
-
-@function variants($color, $is-dark, $light: true, $dark: true, $base: true, $override-base-with: null) {
-    $set: ();
-
-    // base: $color,
-    // light: color-variants-light($color, $is-dark),
-    // dark: color-variants-dark($color, $is-dark),
-
-    @if $light {
-        $set: map.merge($set, (light: color-variants-light($color, $is-dark)));
-    }
-
-    @if $dark {
-        $set: map.merge($set, (dark: color-variants-dark($color, $is-dark)));
-    }
-
-    @if $base {
-        @if $override-base-with {
-            $set: map.merge($set, (base: $override-base-with));
-        } @else {
-            $set: map.merge($set, (base: $color));
-        }
-    }
-
-    @return $set;
-}
--- a/tools/tasks/fonts.js
+++ b/tools/tasks/fonts.js
@@ -1,4 +1,4 @@
-import { copyFileSync, mkdirSync } from 'fs';
+import { copyFileSync, mkdirSync, existsSync } from 'fs';
 import { join } from 'path';
 import { readFiles } from '../utils/funcs.js';
 import { Logger } from '../utils/logger.js';
@@ -12,7 +12,11 @@ export async function buildFonts(srcHome, distHome) {
    const fontsSrcPath = join(srcHome, imgSrc);
    const fontsDestPath = join(distHome, imgDest);

-    mkdirSync(fontsDestPath, { recursive: true });
+    // if fontsSrcPath does not exist, return
+    if (!existsSync(fontsSrcPath)) {
+        logger.warn(`No fonts found in ${fontsSrcPath} (there's not even a folder there)`);
+        return;
+    }

    const files = readFiles(fontsSrcPath, [
        '.woff',
@@ -23,6 +27,14 @@ export async function buildFonts(srcHome, distHome) {
        '.otf',
    ]);

+    // if there are no files, return
+    if (!files.length) {
+        logger.warn(`No fonts found in ${fontsSrcPath}`);
+        return;
+    }
+
+    mkdirSync(fontsDestPath, { recursive: true });
+
    for (const file of files) {
        // just copy the file
        copyFileSync(join(fontsSrcPath, file), join(fontsDestPath, file));
--- a/tools/tasks/templates.js
+++ b/tools/tasks/templates.js
@@ -1,4 +1,5 @@
 import { join } from 'path';
+import { existsSync } from 'fs';
 import { copyFolderRecursiveSync } from '../utils/funcs.js';
 import { Logger } from '../utils/logger.js';

@@ -11,6 +12,12 @@ export async function buildTemplates(srcHome, distHome) {
    const tmplSrcPath = join(srcHome, tmplSrc);
    const tmplDestPath = join(distHome, tmplDest);

+    // if src/templates folder doesn't exist, just return
+    if (!existsSync(tmplSrcPath)) {
+        logger.info(`No templates found in ${tmplSrcPath}. Skipping templates build`);
+        return;
+    }
+
    // just copy the entire tmplSrcPath to tmplDestPath
    copyFolderRecursiveSync(tmplSrcPath, tmplDestPath);
    logger.info('Templates build has finished');
Author	SHA1	Message	Date
Lucas Colombo	981d64f199	release: 🔖 v1.0.1	2025-02-01 05:04:01 -03:00
Lucas Colombo	ddf7f71595	feat: ✨ visual enhacements	2025-02-01 05:03:04 -03:00
Lucas Colombo	013c8891b0	feat: ✨ update color variables to use accent fallbacks	2025-01-26 01:07:08 -03:00
Lucas Colombo	834bdd8600	release: 🔖 v1.0.0	2025-01-26 00:44:09 -03:00
Lucas Colombo	aa29a77c01	docs: 📝 remove outdated note about gitea version in README	2025-01-25 17:21:05 -03:00
Lucas Colombo	ab5fc4a757	feat: ✨ add markup styling for rendered markdown content	2025-01-25 17:17:09 -03:00
Lucas Colombo	1ac2103f26	feat: ✨ fix issue comment box	2025-01-25 17:17:09 -03:00
Lucas Colombo	8d0e2fcfe0	feat: ✨ enhance segment and form styling	2025-01-25 17:17:09 -03:00
Lucas Colombo	7957f0c426	feat: ✨ enhance styling and structure of forms, buttons, and repository settings	2025-01-25 17:17:09 -03:00
Lucas Colombo	0587a7791e	feat: ✨ refactor form components and improve styling consistency	2025-01-25 17:17:09 -03:00
Lucas Colombo	93c89fd96a	feat: ✨ settings page	2025-01-25 17:17:09 -03:00
Lucas Colombo	5eb2e10d87	chore: 🧹 lock sass to version 1.63	2025-01-25 17:17:09 -03:00
Lucas Colombo	39f9faee51	feat: ✨ update navbar hover background	2025-01-25 17:17:09 -03:00
Lucas Colombo	b685ac8129	feat: ✨ update dark theme colors for improved contrast and readability	2025-01-25 17:17:09 -03:00
Lucas Colombo	c944245035	feat: ✨ update menu and navbar styles for improved theming and responsiveness	2025-01-25 17:17:09 -03:00
Lucas Colombo	eb2bd86706	feat: ✨ enhance UI components with updated styles and improved layout	2025-01-25 17:17:09 -03:00
Lucas Colombo	c965bdc124	feat: ✨ add avatar and file content styles for improved UI components	2025-01-25 17:17:09 -03:00
Lucas Colombo	38be548b55	feat: ✨ update theme colors and improve styling for better readability	2025-01-25 17:17:09 -03:00
Lucas Colombo	a0d2fee502	feat: ✨ light and auto themes	2025-01-25 17:17:09 -03:00
Lucas Colombo	701e67c177	feat: ✨ code highlighting styles	2025-01-25 17:17:09 -03:00
Lucas Colombo	44a25e5c29	feat: ✨ support gitea 1.23	2025-01-25 17:17:09 -03:00