feat: theme dark-1 and dark-2 variables

Co-authored-by: Hammy <58985301+sgoudham@users.noreply.github.com>

.github/workflows/release-deploy.yml

@@ -0,0 +1,74 @@
+name: Release and Deploy
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
+      - run: deno task build
+
+      - name: Upload Pages Artifact
+        uses: "actions/upload-pages-artifact@v3"
+        with:
+          path: "dist/"
+          
+      - name: Upload CSS
+        uses: actions/upload-artifact@v4
+        with:
+          name: css
+          path: "dist/"
+
+  release:
+    needs: "build"
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+
+    steps:
+      - name: "Release"
+        id: "release"
+        uses: "googleapis/release-please-action@v4"
+        
+      - name: Download CSS
+        uses: actions/download-artifact@v4
+        with:
+          name: css
+          path: "dist/"
+
+      - name: Create tarball
+        if: ${{ steps.release.outputs.release_created }}
+        run: tar czf catppuccin-gitea.tar.gz --directory=./dist .
+
+      - name: Upload Release Artifacts
+        if: ${{ steps.release.outputs.release_created }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: gh release upload ${{ steps.release.outputs.tag_name }} ./catppuccin-gitea.tar.gz
+
+
+  deploy:
+    needs: "build"
+    runs-on: "ubuntu-latest"
+    permissions:
+      pages: "write"
+      id-token: "write"
+    environment:
+      name: "github-pages"
+      url: "${{ steps.deployment.outputs.page_url }}"
+
+    steps:
+      - name: "Deploy to GitHub Pages"
+        id: "deployment"
+        uses: "actions/deploy-pages@v4"

.github/workflows/release.yml

@@ -1,21 +0,0 @@
-name: Release
-on:
-  push:
-    tags:
-      - "v*"
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: denoland/setup-deno@v1
-        with:
-          deno-version: v1.x
-      - run: deno task build
-      - name: Create tarball
-        run: tar czf catppuccin-gitea.tar.gz --directory=./dist .
-      - name: Add zips to release
-        uses: softprops/action-gh-release@v1
-        with:
-          files: ./catppuccin-gitea.tar.gz

.release-please-manifest.json

@@ -0,0 +1,3 @@
+{
+  ".": "0.4.1"
+}

CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changelog
+
+## [0.4.1](https://github.com/catppuccin/gitea/compare/v0.4.0...v0.4.1) (2023-08-24)
+
+
+### Bug Fixes
+
+* **commits:** signed commit background ([fe15a3a](https://github.com/catppuccin/gitea/commit/fe15a3ac012e0bcbfd57bcdb3e83382164c7e9f3)), closes [#13](https://github.com/catppuccin/gitea/issues/13)
+
+## [0.4.0](https://github.com/catppuccin/gitea/compare/v0.3.1...v0.4.0) (2023-08-23)
+
+
+### Features
+
+* monaco editor styling ([11bd7b7](https://github.com/catppuccin/gitea/commit/11bd7b77ece1d761828ffeb87a053e78acc050a2))
+
+
+### Bug Fixes
+
+* tag labels style ([c1c223f](https://github.com/catppuccin/gitea/commit/c1c223fe50c7286bc023d2798761293f25cfc080))

README.md

@@ -37,7 +37,7 @@
 ## Usage
 
 1. Download the [latest release](https://github.com/catppuccin/gitea/releases/latest).
-2. Place the CSS files in your `$GITEA_CUSTOM/public/css` directory.
+2. Place the CSS files in `$GITEA_CUSTOM/public/assets/css` if using Gitea 1.21.0 or newer and `$GITEA_CUSTOM/public/css` otherwise.
 3. Add the themes to your `app.ini`. See the [Gitea documentation](https://docs.gitea.io/en-us/customizing-gitea/#customizing-the-look-of-gitea).\
    Here's a snippet if you want to offer all Flavor-Accent combinations:
 

build.ts

@@ -1,4 +1,5 @@
 #!/usr/bin/env -S deno run -A
+
 import * as path from "std/path";
 import * as sass from "sass";
 import ctp from "npm:@catppuccin/palette";
@@ -49,6 +50,9 @@ for (const flavor of flavors) {
   }
 }
 
+// TODO:
+// refactor this part out to a common import, since ctp/ctp & ctp/userstyles
+// are both using the same base function
 const updateReadme = ({
   readme,
   section,

release-please-config.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://raw.githubusercontent.com/googleapis/release-please/main/schemas/config.json",
+  "last-release-sha": "cecfa246aa84e74e91e8bd8eb5add82734a35211",
+  "packages": {
+    ".": {
+      "package-name": "",
+      "release-type": "simple"
+    }
+  }
+}

src/_monaco.scss

@@ -14,6 +14,125 @@
   // current / cursor line
   .view-overlays .current-line,
   .margin-view-overlays .current-line-margin {
-    background-color: #{if($isDark, color.mix($surface0, $base, 64%), color.mix($mantle, $base, 70%))} !important;
+    background-color: #{if(
+        $isDark,
+        color.mix($surface0, $base, 64%),
+        color.mix($mantle, $base, 70%)
+      )} !important;
+  }
+
+  // Note: all of the hotpink stuff is there so it's easily visible, since these editor scope mappings are a mess
+
+  // plaintext
+  .mtk1 {
+    color: $text !important;
+  }
+  .mtk2 {
+    color: #ff69b4 !important;
+  }
+  // decorators
+  .mtk3 {
+    color: $peach !important;
+  }
+  // shell arguments
+  .mtk4 {
+    color: $teal !important;
+  }
+  // css constants & pre-defineds
+  .mtk5 {
+    color: $text !important;
+  }
+  // keywords
+  .mtk6 {
+    color: $mauve !important;
+  }
+  // numbers
+  .mtk7 {
+    color: $peach !important;
+  }
+  // comments
+  .mtk8 {
+    color: $overlay2 !important;
+  }
+  // sometimes a keyword, apparently
+  .mtk9 {
+    color: $mauve !important;
+  }
+  // braces, brackets, parentheses
+  .mtk10 {
+    color: $subtext0 !important;
+  }
+  // arrow brackets & equal signs in HTML
+  .mtk11 {
+    color: $teal !important;
+  }
+  // @ sign in javascript ¯\_(ツ)_/¯
+  .mtk12 {
+    color: $teal !important;
+  }
+  .mtk13 {
+    color: #ff69b4 !important;
+  }
+  .mtk14 {
+    color: #ff69b4 !important;
+  }
+  // regex, css classnames, and HTML keywords (huh)
+  .mtk15 {
+    color: $mauve !important;
+  }
+  // shebangs
+  .mtk16 {
+    color: $overlay2 !important;
+  }
+  .mtk17 {
+    color: #ff69b4 !important;
+  }
+  .mtk18 {
+    color: #ff69b4 !important;
+  }
+  // glob operator i guess
+  .mtk19 {
+    color: $teal !important;
+  }
+  .mtk20 {
+    color: #ff69b4 !important;
+  }
+  // strings
+  .mtk21 {
+    color: $green !important;
+  }
+  .mtk22 {
+    color: #ff69b4 !important;
+  }
+  // functions
+  .mtk23 {
+    color: $blue !important;
+  }
+  // shell variables
+  .mtk24 {
+    color: $peach !important;
+  }
+  // weird variables
+  .mtk25 {
+    color: $pink !important;
+  }
+
+  .bracket-highlighting-0 {
+    color: color.mix($text, $red, 40%) !important;
+  }
+  .bracket-highlighting-1 {
+    color: color.mix($text, $peach, 40%) !important;
+  }
+  .bracket-highlighting-2 {
+    color: color.mix($text, $yellow, 40%) !important;
+  }
+  .bracket-highlighting-3 {
+    color: color.mix($text, $green, 40%) !important;
+  }
+  .bracket-highlighting-4 {
+    color: color.mix($text, $blue, 40%) !important;
+  }
+  .bracket-highlighting-5 {
+    color: color.mix($text, $mauve, 40%) !important;
   }
 }

src/_theme.scss

@@ -23,6 +23,7 @@ $lvl3: if($isDark, $base, $crust);
 
   --color-primary: #{$accent};
   --color-primary-contrast: #{$lvl1};
+  --color-primary-hover: #{ctx_lighten($accent, 5%)};
 
   --color-primary-dark-1: #{ctx_lighten($accent, 3%)};
   --color-primary-dark-2: #{ctx_lighten($accent, 6%)};
@@ -115,6 +116,33 @@ $lvl3: if($isDark, $base, $crust);
       ctx_lighten($text, 10%)
     )};
 
+  /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
+  --color-red-dark-1: #{ctx_lighten($red, 10%)};
+  --color-orange-dark-1: #{ctx_lighten($peach, 10%)};
+  --color-yellow-dark-1: #{ctx_lighten($yellow, 10%)};
+  --color-olive-dark-1: #{ctx_lighten($green, 10%)};
+  --color-green-dark-1: #{ctx_lighten($green, 10%)};
+  --color-teal-dark-1: #{ctx_lighten($teal, 10%)};
+  --color-blue-dark-1: #{ctx_lighten($blue, 10%)};
+  --color-violet-dark-1: #{ctx_lighten($lavender, 10%)};
+  --color-purple-dark-1: #{ctx_lighten($mauve, 10%)};
+  --color-pink-dark-1: #{ctx_lighten($pink, 10%)};
+  --color-brown-dark-1: #{ctx_lighten($flamingo, 10%)};
+  --color-black-dark-1: #{ctx_lighten($mantle, 10%)};
+  /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
+  --color-red-dark-2: #{ctx_lighten($red, 20%)};
+  --color-orange-dark-2: #{ctx_lighten($peach, 20%)};
+  --color-yellow-dark-2: #{ctx_lighten($yellow, 20%)};
+  --color-olive-dark-2: #{ctx_lighten($green, 20%)};
+  --color-green-dark-2: #{ctx_lighten($green, 20%)};
+  --color-teal-dark-2: #{ctx_lighten($teal, 20%)};
+  --color-blue-dark-2: #{ctx_lighten($blue, 20%)};
+  --color-violet-dark-2: #{ctx_lighten($lavender, 20%)};
+  --color-purple-dark-2: #{ctx_lighten($mauve, 20%)};
+  --color-pink-dark-2: #{ctx_lighten($pink, 20%)};
+  --color-brown-dark-2: #{ctx_lighten($flamingo, 20%)};
+  --color-black-dark-2: #{ctx_lighten($mantle, 20%)};
+
   /* other colors */
   --color-gold: #{$rosewater};
   --color-white: #{$text};
@@ -145,7 +173,7 @@ $lvl3: if($isDark, $base, $crust);
   --color-red-badge-bg: #{$lvl1};
   --color-red-badge-hover-bg: #{ctx_lighten($red, 5%)};
   --color-green-badge: #{$green};
-  --color-green-badge-bg: #{$lvl1};
+  --color-green-badge-bg: #{$green};
   --color-green-badge-hover-bg: #{ctx_lighten($green, 5%)};
   --color-yellow-badge: #{$yellow};
   --color-yellow-badge-bg: #{$lvl1};
@@ -154,6 +182,7 @@ $lvl3: if($isDark, $base, $crust);
   --color-orange-badge-bg: #{$lvl1};
   --color-orange-badge-hover-bg: #{ctx_lighten($peach, 5%)};
   --color-git: #{$peach};
+  --color-highlight-bg: #{color.change($yellow, $alpha: 0.15)};
 
   /* target-based colors */
   --color-body: #{$lvl1};
@@ -198,7 +227,7 @@ $lvl3: if($isDark, $base, $crust);
   --color-secondary-bg: #{$surface0};
   --color-text-focus: #{$text};
   --color-expand-button: #{$surface2};
-  --color-placeholder-text: #{$surface2};
+  --color-placeholder-text: #{$subtext0};
   --color-editor-line-highlight: var(--color-primary-light-5);
   --color-project-board-bg: var(--color-secondary-light-2);
   /* gitea source code: */
@@ -208,7 +237,10 @@ $lvl3: if($isDark, $base, $crust);
   --color-reaction-active-bg: var(--color-primary-alpha-40);
   --color-header-wrapper: #{$lvl2};
   --color-header-wrapper-transparent: #{color.change($lvl2, $alpha: 0)};
-  --color-label-active-bg: #{$surface2};
+  --color-label-text: #{$crust};
+  --color-label-bg: #{$accent};
+  --color-label-hover-bg: #{ctx_lighten($accent, 6%)};
+  --color-label-active-bg: #{ctx_lighten($accent, 3%)};
   --color-accent: var(--color-primary-light-1);
   --color-small-accent: var(--color-primary-light-5);
   --color-active-line: #{$surface1};
@@ -263,7 +295,7 @@ $lvl3: if($isDark, $base, $crust);
 }
 
 // most recent commit hover when signed
-.ui.sha.isSigned.isVerified:hover {
+.ui.sha.isSigned.isVerified {
   .shortsha {
     color: $lvl1;
   }
@@ -279,8 +311,12 @@ $lvl3: if($isDark, $base, $crust);
   color: $text !important;
 }
 
+.inline-code-block {
+  color: #{$crust};
+}
+
 ::selection {
-  background: color.change($rosewater, $alpha: 0.3) !important;
+  background: color.change($accent, $alpha: 0.3) !important;
 }
 
 @import "chroma";

version.txt

@@ -0,0 +1 @@
+0.4.1