Zynh0722/rose-pine-gitea
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

first go?

Browse source
This commit is contained in:
Zynh0722 2023-12-27 15:22:18 -08:00
parent 495f9733f5
commit 7561c1baf9
6 changed files with 285 additions and 268 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
README.md
View file

@ -1,39 +1,16 @@
<h3 align="center">
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
Catppuccin for <a href="https://gitea.io">Gitea</a>
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
</h3>
<p align="center"> <p align="center">
<a href="https://github.com/catppuccin/gitea/stargazers"><img src="https://img.shields.io/github/stars/catppuccin/gitea?colorA=363a4f&colorB=b7bdf8&style=for-the-badge"></a> <img src="https://github.com/rose-pine/rose-pine-theme/raw/main/assets/icon.png" width="80" />
<a href="https://github.com/catppuccin/gitea/issues"><img src="https://img.shields.io/github/issues/catppuccin/gitea?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a> <h2 align="center">Rosé Pine for Gitea</h2>
<a href="https://github.com/catppuccin/gitea/contributors"><img src="https://img.shields.io/github/contributors/catppuccin/gitea?colorA=363a4f&colorB=a6da95&style=for-the-badge"></a>
</p> </p>
<p align="center">All natural pine, faux fur and a bit of soho vibes for the classy minimalist</p>
<p align="center"> <p align="center">
<img src="assets/preview.webp"/> <a href="https://github.com/rose-pine/rose-pine-theme">
<img src="https://img.shields.io/badge/community-rosé%20pine-26233a?labelColor=191724&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwIiBoZWlnaHQ9IjIzNyIgdmlld0JveD0iMCAwIDI1MCAyMzciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNjEuMjI3IDE2MS4yNTFDMTMyLjE1NCAxNjkuMDQxIDExNC45MDEgMTk4LjkyNCAxMjIuNjkxIDIyNy45OTdDMTIzLjkyNSAyMzIuNjAzIDEyOC42NTkgMjM1LjMzNiAxMzMuMjY0IDIzNC4xMDJMMTg1LjkwNyAyMTkuOTk2QzIxOS41ODUgMjEwLjk3MiAyMzkuNTcgMTc2LjM1NCAyMzAuNTQ2IDE0Mi42NzdMMTYxLjIyNyAxNjEuMjUxWiIgZmlsbD0iIzI0NjI3QiIvPgo8cGF0aCBkPSJNODguMTgzNiAxNTkuOTg4QzExNy4yNTcgMTY3Ljc3OCAxMzQuNTEgMTk3LjY2MiAxMjYuNzIgMjI2LjczNUMxMjUuNDg2IDIzMS4zNCAxMjAuNzUyIDIzNC4wNzMgMTE2LjE0NyAyMzIuODM5TDYzLjUwNDEgMjE4LjczM0MyOS44MjY0IDIwOS43MSA5Ljg0MDk0IDE3NS4wOTIgMTguODY0OSAxNDEuNDE0TDg4LjE4MzYgMTU5Ljk4OFoiIGZpbGw9IiMyNDYyN0IiLz4KPHBhdGggZD0iTTE4Ni44NjcgMTcyLjk4QzE1Mi4wMDIgMTcyLjk4IDEyMy43MzcgMjAxLjI0NSAxMjMuNzM3IDIzNi4xMTFIMTg2Ljg3QzIyMS43MzYgMjM2LjExMSAyNTAgMjA3Ljg0NiAyNTAgMTcyLjk4TDE4Ni44NjcgMTcyLjk4WiIgZmlsbD0iIzMxNzQ4RiIvPgo8cGF0aCBkPSJNNjMuMTMyNyAxNzIuOThDOTcuOTk4NCAxNzIuOTggMTI2LjI2MyAyMDEuMjQ1IDEyNi4yNjMgMjM2LjExMUg2My4xM0MyOC4yNjQyIDIzNi4xMTEgLTEuNTI0MDNlLTA2IDIwNy44NDYgMCAxNzIuOThMNjMuMTMyNyAxNzIuOThaIiBmaWxsPSIjMzE3NDhGIi8+CjxwYXRoIGQ9Ik0xNzEuNzE3IDc1LjEyNjNDMTcxLjcxNyAxMDEuMjc2IDE1MC41MTggMTIyLjQ3NSAxMjQuMzY5IDEyMi40NzVDOTguMjE4OCAxMjIuNDc1IDc3LjAyMDIgMTAxLjI3NiA3Ny4wMjAyIDc1LjEyNjNDNzcuMDIwMiA0OC45NzY0IDk4LjIxODggMjcuNzc3OCAxMjQuMzY5IDI3Ljc3NzhDMTUwLjUxOCAyNy43Nzc4IDE3MS43MTcgNDguOTc2NCAxNzEuNzE3IDc1LjEyNjNaIiBmaWxsPSIjRUJCQ0JBIi8+CjxwYXRoIGQ9Ik0xNDQuMjE3IDg2LjIzNzlDMTYxLjY0OSA1Ni4wNDMyIDE1MS4zMDMgMTcuNDMyOSAxMjEuMTA4IDBMMTA2LjA2IDI2LjA2NDRDODguNjI3IDU2LjI1OSA5OC45NzM2IDk0Ljg2OTQgMTI5LjE2OCAxMTIuMzAyTDE0NC4yMTcgODYuMjM3OVoiIGZpbGw9IiNFQkJDQkEiLz4KPHBhdGggZD0iTTEyNS4yOTkgNjAuOTc4OUMxMTYuMjc1IDI3LjMwMTIgODEuNjU3NSA3LjMxNTY3IDQ3Ljk3OTcgMTYuMzM5Nkw2NC4zMTk3IDc3LjMyMTFDNzMuMzQzNiAxMTAuOTk5IDEwNy45NjEgMTMwLjk4NCAxNDEuNjM5IDEyMS45NkwxMjUuMjk5IDYwLjk3ODlaIiBmaWxsPSIjRUJCQ0JBIi8+CjxwYXRoIGQ9Ik0xMjQuOTI2IDYwLjk3ODlDMTMzLjk1IDI3LjMwMTIgMTY4LjU2NyA3LjMxNTY3IDIwMi4yNDUgMTYuMzM5NkwxODUuOTA1IDc3LjMyMTFDMTc2Ljg4MSAxMTAuOTk5IDE0Mi4yNjMgMTMwLjk4NCAxMDguNTg2IDEyMS45NkwxMjQuOTI2IDYwLjk3ODlaIiBmaWxsPSIjRUJCQ0JBIi8+Cjwvc3ZnPgo=&style=for-the-badge" />
</a>
</p> </p>
## Previews
<details>
<summary>🌻 Latte</summary>
<img src="assets/latte.webp"/>
</details>
<details>
<summary>🪴 Frappé</summary>
<img src="assets/frappe.webp"/>
</details>
<details>
<summary>🌺 Macchiato</summary>
<img src="assets/macchiato.webp"/>
</details>
<details>
<summary>🌿 Mocha</summary>
<img src="assets/mocha.webp"/>
</details>
## Usage ## Usage
1. Download the [latest release](https://github.com/catppuccin/gitea/releases/latest). 1. Download the [latest release](https://github.com/catppuccin/gitea/releases/latest).
@ -48,7 +25,7 @@
``` ```
[ui] [ui]
THEMES = catppuccin-latte-rosewater,catppuccin-latte-flamingo,catppuccin-latte-pink,catppuccin-latte-mauve,catppuccin-latte-red,catppuccin-latte-maroon,catppuccin-latte-peach,catppuccin-latte-yellow,catppuccin-latte-green,catppuccin-latte-teal,catppuccin-latte-sky,catppuccin-latte-sapphire,catppuccin-latte-blue,catppuccin-latte-lavender,catppuccin-frappe-rosewater,catppuccin-frappe-flamingo,catppuccin-frappe-pink,catppuccin-frappe-mauve,catppuccin-frappe-red,catppuccin-frappe-maroon,catppuccin-frappe-peach,catppuccin-frappe-yellow,catppuccin-frappe-green,catppuccin-frappe-teal,catppuccin-frappe-sky,catppuccin-frappe-sapphire,catppuccin-frappe-blue,catppuccin-frappe-lavender,catppuccin-macchiato-rosewater,catppuccin-macchiato-flamingo,catppuccin-macchiato-pink,catppuccin-macchiato-mauve,catppuccin-macchiato-red,catppuccin-macchiato-maroon,catppuccin-macchiato-peach,catppuccin-macchiato-yellow,catppuccin-macchiato-green,catppuccin-macchiato-teal,catppuccin-macchiato-sky,catppuccin-macchiato-sapphire,catppuccin-macchiato-blue,catppuccin-macchiato-lavender,catppuccin-mocha-rosewater,catppuccin-mocha-flamingo,catppuccin-mocha-pink,catppuccin-mocha-mauve,catppuccin-mocha-red,catppuccin-mocha-maroon,catppuccin-mocha-peach,catppuccin-mocha-yellow,catppuccin-mocha-green,catppuccin-mocha-teal,catppuccin-mocha-sky,catppuccin-mocha-sapphire,catppuccin-mocha-blue,catppuccin-mocha-lavender THEMES = rp-main-love,rp-main-gold,rp-main-rose,rp-main-pine,rp-main-foam,rp-main-iris,rp-moon-love,rp-moon-gold,rp-moon-rose,rp-moon-pine,rp-moon-foam,rp-moon-iris,rp-dawn-love,rp-dawn-gold,rp-dawn-rose,rp-dawn-pine,rp-dawn-foam,rp-dawn-iris
``` ```
<!-- AUTOGEN:INI END --> <!-- AUTOGEN:INI END -->

52
build.ts
View file

@ -4,24 +4,40 @@ import * as path from "std/path";
import * as sass from "sass"; import * as sass from "sass";
import * as rp from "npm:@rose-pine/palette"; import * as rp from "npm:@rose-pine/palette";
const builder = (flavor: string, accent: string) => ` type Flavor = "main" | "moon" | "dawn";
@import "@rose-pine/palette/dist/css/rose-pine.css";
$base: var(--rp-${flavor}-base) function isUpperCase(str: string) {
$surface: var(--rp-${flavor}-surface) return str !== str.toLowerCase() && str === str.toUpperCase();
$overlay: var(--rp-${flavor}-overlay) }
$muted: var(--rp-${flavor}-muted)
$subtle: var(--rp-${flavor}-subtle) console.log(`
$text: var(--rp-${flavor}-text) ${Object.keys(rp.roleColors)
$love: var(--rp-${flavor}-love) .map(
$gold: var(--rp-${flavor}-gold) (color) =>
$rose: var(--rp-${flavor}-rose) `$${color
$pine: var(--rp-${flavor}-pine) .split("")
$foam: var(--rp-${flavor}-foam) .map((c) => (isUpperCase(c) ? "-" + c.toLowerCase() : c))
$iris: var(--rp-${flavor}-iris) .join("")}: #${
$highlight-low: var(--rp-${flavor}-highlight-low) /* @ts-ignore I hate typescript */
$highlight-med: var(--rp-${flavor}-highlight-med) rp.roleColors[color]["main"].hex
$highlight-high: var(--rp-${flavor}-highlight-high) };`,
)
.join("\n")}
`);
const builder = (flavor: Flavor, accent: string) => `
${Object.keys(rp.roleColors)
.map(
(color) =>
`$${color
.split("")
.map((c) => (isUpperCase(c) ? "-" + c.toLowerCase() : c))
.join("")}: #${
/* @ts-ignore I hate typescript */
rp.roleColors[color][flavor].hex
};`,
)
.join("\n")}
$accent: $${accent}; $accent: $${accent};
$isDark: ${flavor !== "dawn"}; $isDark: ${flavor !== "dawn"};
@ -38,7 +54,7 @@ Deno.mkdirSync(path.join(__dirname, "dist"), { recursive: true });
const flavors = Object.keys(rp.variantColors); const flavors = Object.keys(rp.variantColors);
for (const flavor of flavors) { for (const flavor of flavors) {
for (const accent of accents) { for (const accent of accents) {
const input = builder(flavor, accent); const input = builder(flavor as Flavor, accent);
const result = sass.compileString(input, { const result = sass.compileString(input, {
loadPaths: [ loadPaths: [
path.join(__dirname, "src"), path.join(__dirname, "src"),

130
src/_chroma.scss
View file

@ -2,39 +2,39 @@
/* NameBuiltinPseudo */ /* NameBuiltinPseudo */
.chroma .bp { .chroma .bp {
color: $peach; color: $rose;
} }
/* Comment */ /* Comment */
.chroma .c { .chroma .c {
color: $overlay0; color: $subtle;
} }
/* CommentSingle */ /* CommentSingle */
.chroma .c1 { .chroma .c1 {
color: $overlay0; color: $subtle;
} }
/* CommentHashbang */ /* CommentHashbang */
.chroma .ch { .chroma .ch {
color: $overlay0; color: $subtle;
} }
/* CommentMultiline */ /* CommentMultiline */
.chroma .cm { .chroma .cm {
color: $overlay0; color: $subtle;
} }
/* CommentPreproc */ /* CommentPreproc */
.chroma .cp { .chroma .cp {
color: $blue; color: $iris;
} }
/* CommentPreprocFile */ /* CommentPreprocFile */
.chroma .cpf { .chroma .cpf {
color: $blue; color: $iris;
} }
/* CommentSpecial */ /* CommentSpecial */
.chroma .cs { .chroma .cs {
color: $overlay0; color: $subtle;
} }
/* LiteralStringDelimiter */ /* LiteralStringDelimiter */
.chroma .dl { .chroma .dl {
color: $blue; color: $iris;
} }
/* NameFunctionMagic */ /* NameFunctionMagic */
.chroma .fm { .chroma .fm {
@ -45,7 +45,7 @@
/* GenericDeleted */ /* GenericDeleted */
.chroma .gd { .chroma .gd {
color: $text; color: $text;
background-color: color.change($red, $alpha: 0.15); background-color: color.change($love, $alpha: 0.15);
} }
/* GenericEmph */ /* GenericEmph */
.chroma .ge { .chroma .ge {
@ -53,28 +53,28 @@
} }
/* GenericHeading */ /* GenericHeading */
.chroma .gh { .chroma .gh {
color: $sky; color: $foam;
} }
/* GenericInserted */ /* GenericInserted */
.chroma .gi { .chroma .gi {
color: $text; color: $text;
background-color: color.change($green, $alpha: 0.15); background-color: color.change($pine, $alpha: 0.15);
} }
/* GenericUnderline */ /* GenericUnderline */
.chroma .gl { .chroma .gl {
} }
/* GenericOutput */ /* GenericOutput */
.chroma .go { .chroma .go {
color: $peach; color: $rose;
} }
/* GenericPrompt */ /* GenericPrompt */
.chroma .gp { .chroma .gp {
color: $overlay0; color: $subtle;
font-weight: bold; font-weight: bold;
} }
/* GenericError */ /* GenericError */
.chroma .gr { .chroma .gr {
color: $maroon; color: $love;
} }
/* GenericStrong */ /* GenericStrong */
.chroma .gs { .chroma .gs {
@ -82,44 +82,44 @@
} }
/* GenericTraceback */ /* GenericTraceback */
.chroma .gt { .chroma .gt {
color: $maroon; color: $love;
} }
/* GenericSubheading */ /* GenericSubheading */
.chroma .gu { .chroma .gu {
color: $sky; color: $foam;
} }
/* LiteralNumberIntegerLong */ /* LiteralNumberIntegerLong */
.chroma .il { .chroma .il {
color: $peach; color: $rose;
} }
/* Keyword */ /* Keyword */
.chroma .k { .chroma .k {
color: $mauve; color: $iris;
} }
/* KeywordConstant */ /* KeywordConstant */
.chroma .kc { .chroma .kc {
color: $yellow; color: $gold;
} }
/* KeywordDeclaration */ /* KeywordDeclaration */
.chroma .kd { .chroma .kd {
color: $mauve; color: $iris;
} }
/* KeywordNamespace */ /* KeywordNamespace */
.chroma .kn { .chroma .kn {
color: $yellow; color: $gold;
} }
/* KeywordPseudo */ /* KeywordPseudo */
.chroma .kp { .chroma .kp {
color: $mauve; color: $iris;
font-weight: bold; font-weight: bold;
} }
/* KeywordReserved */ /* KeywordReserved */
.chroma .kr { .chroma .kr {
color: $mauve; color: $iris;
} }
/* KeywordType */ /* KeywordType */
.chroma .kt { .chroma .kt {
color: $yellow; color: $gold;
} }
/* Literal */ /* Literal */
.chroma .l { .chroma .l {
@ -129,168 +129,168 @@
} }
/* LiteralNumber */ /* LiteralNumber */
.chroma .m { .chroma .m {
color: $peach; color: $rose;
} }
/* LiteralNumberBin */ /* LiteralNumberBin */
.chroma .mb { .chroma .mb {
color: $peach; color: $rose;
} }
/* LiteralNumberFloat */ /* LiteralNumberFloat */
.chroma .mf { .chroma .mf {
color: $peach; color: $rose;
} }
/* LiteralNumberHex */ /* LiteralNumberHex */
.chroma .mh { .chroma .mh {
color: $peach; color: $rose;
} }
/* LiteralNumberInteger */ /* LiteralNumberInteger */
.chroma .mi { .chroma .mi {
color: $peach; color: $rose;
} }
/* LiteralNumberOct */ /* LiteralNumberOct */
.chroma .mo { .chroma .mo {
color: $peach; color: $rose;
} }
/* Name */ /* Name */
.chroma .n { .chroma .n {
color: $lavender; color: $iris;
} }
/* NameAttribute */ /* NameAttribute */
.chroma .na { .chroma .na {
color: $yellow; color: $gold;
} }
/* NameBuiltin */ /* NameBuiltin */
.chroma .nb { .chroma .nb {
color: $peach; color: $rose;
} }
/* NameClass */ /* NameClass */
.chroma .nc { .chroma .nc {
color: $yellow; color: $gold;
} }
/* NameDecorator */ /* NameDecorator */
.chroma .nd { .chroma .nd {
color: $pink; color: $rose;
} }
/* NameException */ /* NameException */
.chroma .ne { .chroma .ne {
color: $maroon; color: $love;
} }
/* NameFunction */ /* NameFunction */
.chroma .nf { .chroma .nf {
color: $blue; color: $iris;
} }
/* NameEntity */ /* NameEntity */
.chroma .ni { .chroma .ni {
color: $pink; color: $rose;
} }
/* NameLabel */ /* NameLabel */
.chroma .nl { .chroma .nl {
color: $yellow; color: $gold;
} }
/* NameNamespace */ /* NameNamespace */
.chroma .nn { .chroma .nn {
color: $yellow; color: $gold;
} }
/* NameConstant */ /* NameConstant */
.chroma .no { .chroma .no {
color: $yellow; color: $gold;
} }
/* NameTag */ /* NameTag */
.chroma .nt { .chroma .nt {
color: $mauve; color: $iris;
} }
/* NameVariable */ /* NameVariable */
.chroma .nv { .chroma .nv {
color: $peach; color: $rose;
} }
/* NameOther */ /* NameOther */
.chroma .nx { .chroma .nx {
color: $peach; color: $rose;
} }
/* Operator */ /* Operator */
.chroma .o { .chroma .o {
color: $sky; color: $foam;
} }
/* OperatorWord */ /* OperatorWord */
.chroma .ow { .chroma .ow {
color: $sky; color: $foam;
font-weight: bold; font-weight: bold;
} }
/* Punctuation */ /* Punctuation */
.chroma .p { .chroma .p {
color: $overlay2; color: $subtle;
} }
/* NameProperty */ /* NameProperty */
.chroma .py { .chroma .py {
} }
/* LiteralString */ /* LiteralString */
.chroma .s { .chroma .s {
color: $green; color: $pine;
} }
/* LiteralStringSingle */ /* LiteralStringSingle */
.chroma .s1 { .chroma .s1 {
color: $green; color: $pine;
} }
/* LiteralStringDouble */ /* LiteralStringDouble */
.chroma .s2 { .chroma .s2 {
color: $green; color: $pine;
} }
/* LiteralStringAffix */ /* LiteralStringAffix */
.chroma .sa { .chroma .sa {
color: $green; color: $pine;
} }
/* LiteralStringBacktick */ /* LiteralStringBacktick */
.chroma .sb { .chroma .sb {
color: $green; color: $pine;
} }
/* LiteralStringChar */ /* LiteralStringChar */
.chroma .sc { .chroma .sc {
color: $green; color: $pine;
} }
/* LiteralStringDoc */ /* LiteralStringDoc */
.chroma .sd { .chroma .sd {
color: $green; color: $pine;
} }
/* LiteralStringEscape */ /* LiteralStringEscape */
.chroma .se { .chroma .se {
color: $blue; color: $iris;
} }
/* LiteralStringHeredoc */ /* LiteralStringHeredoc */
.chroma .sh { .chroma .sh {
color: $green; color: $pine;
} }
/* LiteralStringInterpol */ /* LiteralStringInterpol */
.chroma .si { .chroma .si {
color: $green; color: $pine;
} }
/* LiteralStringRegex */ /* LiteralStringRegex */
.chroma .sr { .chroma .sr {
color: $blue; color: $iris;
} }
/* LiteralStringSymbol */ /* LiteralStringSymbol */
.chroma .ss { .chroma .ss {
color: $green; color: $pine;
} }
/* LiteralStringOther */ /* LiteralStringOther */
.chroma .sx { .chroma .sx {
color: $green; color: $pine;
} }
/* NameVariableClass */ /* NameVariableClass */
.chroma .vc { .chroma .vc {
color: $yellow; color: $gold;
} }
/* NameVariableGlobal */ /* NameVariableGlobal */
.chroma .vg { .chroma .vg {
color: $peach; color: $rose;
} }
/* NameVariableInstance */ /* NameVariableInstance */
.chroma .vi { .chroma .vi {
color: $yellow; color: $gold;
} }
/* NameVariableMagic */ /* NameVariableMagic */
.chroma .vm { .chroma .vm {
} }
/* TextWhitespace */ /* TextWhitespace */
.chroma .w { .chroma .w {
color: $surface0; color: $highlight-low;
} }

36
src/_codemirror.scss
View file

@ -10,19 +10,19 @@
} }
.cm-quote { .cm-quote {
color: $green; color: $pine;
} }
.cm-keyword { .cm-keyword {
color: $mauve; color: $iris;
} }
.cm-atom { .cm-atom {
color: $red; color: $love;
} }
.cm-number { .cm-number {
color: $peach; color: $rose;
} }
.cm-def { .cm-def {
@ -30,35 +30,35 @@
} }
.cm-variable-2 { .cm-variable-2 {
color: $sky; color: $foam;
} }
.cm-variable-3 { .cm-variable-3 {
color: $teal; color: $foam;
} }
.cm-comment { .cm-comment {
color: $surface2; color: $highlight-med;
} }
.cm-string { .cm-string {
color: $green; color: $pine;
} }
.cm-string-2 { .cm-string-2 {
color: $green; color: $pine;
} }
.cm-meta { .cm-meta {
color: $peach; color: $rose;
} }
.cm-qualifier { .cm-qualifier {
color: $peach; color: $rose;
} }
.cm-builtin { .cm-builtin {
color: $peach; color: $rose;
} }
.cm-bracket { .cm-bracket {
@ -66,26 +66,26 @@
} }
.cm-tag { .cm-tag {
color: $yellow; color: $gold;
} }
.cm-attribute { .cm-attribute {
color: $yellow; color: $gold;
} }
.cm-hr { .cm-hr {
color: $overlay2; color: $subtle;
} }
.cm-url { .cm-url {
color: $blue; color: $iris;
} }
.cm-link { .cm-link {
color: $blue; color: $iris;
} }
.cm-error { .cm-error {
color: $red; color: $love;
} }
} }

52
src/_monaco.scss
View file

@ -1,11 +1,11 @@
.monaco-editor { .monaco-editor {
// selected text // selected text
.selected-text { .selected-text {
background-color: $surface0 !important; background-color: $highlight-low !important;
} }
// line numbers // line numbers
.margin-view-overlays .line-numbers { .margin-view-overlays .line-numbers {
color: $subtext0 !important; color: $subtle !important;
} }
.line-numbers.active-line-number { .line-numbers.active-line-number {
color: $accent !important; color: $accent !important;
@ -16,8 +16,8 @@
.margin-view-overlays .current-line-margin { .margin-view-overlays .current-line-margin {
background-color: #{if( background-color: #{if(
$isDark, $isDark,
color.mix($surface0, $base, 64%), color.mix($highlight-low, $base, 64%),
color.mix($mantle, $base, 70%) color.mix($surface, $base, 70%)
)} !important; )} !important;
} }
@ -32,11 +32,11 @@
} }
// decorators // decorators
.mtk3 { .mtk3 {
color: $peach !important; color: $rose !important;
} }
// shell arguments // shell arguments
.mtk4 { .mtk4 {
color: $teal !important; color: $foam !important;
} }
// css constants & pre-defineds // css constants & pre-defineds
.mtk5 { .mtk5 {
@ -44,31 +44,31 @@
} }
// keywords // keywords
.mtk6 { .mtk6 {
color: $mauve !important; color: $iris !important;
} }
// numbers // numbers
.mtk7 { .mtk7 {
color: $peach !important; color: $rose !important;
} }
// comments // comments
.mtk8 { .mtk8 {
color: $overlay2 !important; color: $subtle !important;
} }
// sometimes a keyword, apparently // sometimes a keyword, apparently
.mtk9 { .mtk9 {
color: $mauve !important; color: $iris !important;
} }
// braces, brackets, parentheses // braces, brackets, parentheses
.mtk10 { .mtk10 {
color: $subtext0 !important; color: $subtle !important;
} }
// arrow brackets & equal signs in HTML // arrow brackets & equal signs in HTML
.mtk11 { .mtk11 {
color: $teal !important; color: $foam !important;
} }
// @ sign in javascript ¯\_(ツ)_/¯ // @ sign in javascript ¯\_(ツ)_/¯
.mtk12 { .mtk12 {
color: $teal !important; color: $foam !important;
} }
.mtk13 { .mtk13 {
color: #ff69b4 !important; color: #ff69b4 !important;
@ -78,11 +78,11 @@
} }
// regex, css classnames, and HTML keywords (huh) // regex, css classnames, and HTML keywords (huh)
.mtk15 { .mtk15 {
color: $mauve !important; color: $iris !important;
} }
// shebangs // shebangs
.mtk16 { .mtk16 {
color: $overlay2 !important; color: $subtle !important;
} }
.mtk17 { .mtk17 {
color: #ff69b4 !important; color: #ff69b4 !important;
@ -92,47 +92,47 @@
} }
// glob operator i guess // glob operator i guess
.mtk19 { .mtk19 {
color: $teal !important; color: $foam !important;
} }
.mtk20 { .mtk20 {
color: #ff69b4 !important; color: #ff69b4 !important;
} }
// strings // strings
.mtk21 { .mtk21 {
color: $green !important; color: $pine !important;
} }
.mtk22 { .mtk22 {
color: #ff69b4 !important; color: #ff69b4 !important;
} }
// functions // functions
.mtk23 { .mtk23 {
color: $blue !important; color: $iris !important;
} }
// shell variables // shell variables
.mtk24 { .mtk24 {
color: $peach !important; color: $rose !important;
} }
// weird variables // weird variables
.mtk25 { .mtk25 {
color: $pink !important; color: $rose !important;
} }
.bracket-highlighting-0 { .bracket-highlighting-0 {
color: color.mix($text, $red, 40%) !important; color: color.mix($text, $love, 40%) !important;
} }
.bracket-highlighting-1 { .bracket-highlighting-1 {
color: color.mix($text, $peach, 40%) !important; color: color.mix($text, $rose, 40%) !important;
} }
.bracket-highlighting-2 { .bracket-highlighting-2 {
color: color.mix($text, $yellow, 40%) !important; color: color.mix($text, $gold, 40%) !important;
} }
.bracket-highlighting-3 { .bracket-highlighting-3 {
color: color.mix($text, $green, 40%) !important; color: color.mix($text, $pine, 40%) !important;
} }
.bracket-highlighting-4 { .bracket-highlighting-4 {
color: color.mix($text, $blue, 40%) !important; color: color.mix($text, $iris, 40%) !important;
} }
.bracket-highlighting-5 { .bracket-highlighting-5 {
color: color.mix($text, $mauve, 40%) !important; color: color.mix($text, $iris, 40%) !important;
} }
} }

244
src/_theme.scss
View file

@ -1,14 +1,38 @@
@use "sass:color"; @use "sass:color";
// crust = base
// mantle = surface
// base = overlay
// subtext0 = subtle
// subtext1 = muted
// surface0 = highlight low
// surface1 = highlight med
// surface2 = highlight high
// red = love
// peach = rose
// yellow = gold
// green = pine
// teal = foam
// blue = $iris
// lavendar = $iris
// mauve = $iris
// pink = rose
// flamingo = love
// overlay2 = subtle
// rosewater = rose
// overlay0 = subtle
// sky = foam
// maroon =-love
// context-aware lighten: darkens if dark, lightens if light // context-aware lighten: darkens if dark, lightens if light
@function ctx_lighten($color, $amount) { @function ctx_lighten($color, $amount) {
$multiplier: if($isDark, -1, 1); $multiplier: if($isDark, -1, 1);
@return color.adjust($color, $lightness: $amount * $multiplier); @return color.adjust($color, $lightness: $amount * $multiplier);
} }
$lvl1: if($isDark, $crust, $base); $lvl1: if($isDark, $base, $overlay);
$lvl2: $mantle; $lvl2: $surface;
$lvl3: if($isDark, $base, $crust); $lvl3: if($isDark, $overlay, $base);
:root { :root {
@if $isDark { @if $isDark {
@ -50,155 +74,155 @@ $lvl3: if($isDark, $base, $crust);
--color-primary-alpha-80: #{color.change($accent, $alpha: 0.8)}; --color-primary-alpha-80: #{color.change($accent, $alpha: 0.8)};
--color-primary-alpha-90: #{color.change($accent, $alpha: 0.9)}; --color-primary-alpha-90: #{color.change($accent, $alpha: 0.9)};
--color-secondary: #{$surface1}; --color-secondary: #{$highlight-med};
--color-secondary-dark-1: #{ctx_lighten($surface0, -3%)}; --color-secondary-dark-1: #{ctx_lighten($highlight-low, -3%)};
--color-secondary-dark-2: #{ctx_lighten($surface0, -6%)}; --color-secondary-dark-2: #{ctx_lighten($highlight-low, -6%)};
--color-secondary-dark-3: #{ctx_lighten($surface0, -9%)}; --color-secondary-dark-3: #{ctx_lighten($highlight-low, -9%)};
--color-secondary-dark-4: #{ctx_lighten($surface0, -12%)}; --color-secondary-dark-4: #{ctx_lighten($highlight-low, -12%)};
--color-secondary-dark-5: #{ctx_lighten($surface0, -15%)}; --color-secondary-dark-5: #{ctx_lighten($highlight-low, -15%)};
--color-secondary-dark-6: #{ctx_lighten($surface0, -18%)}; --color-secondary-dark-6: #{ctx_lighten($highlight-low, -18%)};
--color-secondary-dark-7: #{ctx_lighten($surface0, -21%)}; --color-secondary-dark-7: #{ctx_lighten($highlight-low, -21%)};
--color-secondary-dark-8: #{ctx_lighten($surface0, -24%)}; --color-secondary-dark-8: #{ctx_lighten($highlight-low, -24%)};
--color-secondary-dark-9: #{ctx_lighten($surface0, -27%)}; --color-secondary-dark-9: #{ctx_lighten($highlight-low, -27%)};
--color-secondary-dark-10: #{ctx_lighten($surface0, -30%)}; --color-secondary-dark-10: #{ctx_lighten($highlight-low, -30%)};
--color-secondary-dark-11: #{ctx_lighten($surface0, -33%)}; --color-secondary-dark-11: #{ctx_lighten($highlight-low, -33%)};
--color-secondary-dark-12: #{ctx_lighten($surface0, -36%)}; --color-secondary-dark-12: #{ctx_lighten($highlight-low, -36%)};
--color-secondary-dark-13: #{ctx_lighten($surface0, -39%)}; --color-secondary-dark-13: #{ctx_lighten($highlight-low, -39%)};
--color-secondary-light-1: #{ctx_lighten($surface0, 3%)}; --color-secondary-light-1: #{ctx_lighten($highlight-low, 3%)};
--color-secondary-light-2: #{ctx_lighten($surface0, 6%)}; --color-secondary-light-2: #{ctx_lighten($highlight-low, 6%)};
--color-secondary-light-3: #{ctx_lighten($surface0, 9%)}; --color-secondary-light-3: #{ctx_lighten($highlight-low, 9%)};
--color-secondary-light-4: #{ctx_lighten($surface0, 12%)}; --color-secondary-light-4: #{ctx_lighten($highlight-low, 12%)};
--color-secondary-alpha-10: #{color.change($surface0, $alpha: 0.1)}; --color-secondary-alpha-10: #{color.change($highlight-low, $alpha: 0.1)};
--color-secondary-alpha-20: #{color.change($surface0, $alpha: 0.2)}; --color-secondary-alpha-20: #{color.change($highlight-low, $alpha: 0.2)};
--color-secondary-alpha-30: #{color.change($surface0, $alpha: 0.3)}; --color-secondary-alpha-30: #{color.change($highlight-low, $alpha: 0.3)};
--color-secondary-alpha-40: #{color.change($surface0, $alpha: 0.4)}; --color-secondary-alpha-40: #{color.change($highlight-low, $alpha: 0.4)};
--color-secondary-alpha-50: #{color.change($surface0, $alpha: 0.5)}; --color-secondary-alpha-50: #{color.change($highlight-low, $alpha: 0.5)};
--color-secondary-alpha-60: #{color.change($surface0, $alpha: 0.6)}; --color-secondary-alpha-60: #{color.change($highlight-low, $alpha: 0.6)};
--color-secondary-alpha-70: #{color.change($surface0, $alpha: 0.7)}; --color-secondary-alpha-70: #{color.change($highlight-low, $alpha: 0.7)};
--color-secondary-alpha-80: #{color.change($surface0, $alpha: 0.8)}; --color-secondary-alpha-80: #{color.change($highlight-low, $alpha: 0.8)};
--color-secondary-alpha-90: #{color.change($surface0, $alpha: 0.9)}; --color-secondary-alpha-90: #{color.change($highlight-low, $alpha: 0.9)};
/* colors */ /* colors */
--color-red: #{$red}; --color-red: #{$love};
--color-orange: #{$peach}; --color-orange: #{$rose};
--color-yellow: #{$yellow}; --color-yellow: #{$gold};
--color-olive: #{$green}; --color-olive: #{$pine};
--color-green: #{$green}; --color-green: #{$pine};
--color-teal: #{$teal}; --color-teal: #{$foam};
--color-blue: #{$blue}; --color-blue: #{$iris};
--color-violet: #{$lavender}; --color-violet: #{$iris};
--color-purple: #{$mauve}; --color-purple: #{$iris};
--color-pink: #{$pink}; --color-pink: #{$rose};
--color-brown: #{$flamingo}; --color-brown: #{$love};
--color-grey: #{$overlay2}; --color-grey: #{$subtle};
--color-black: #{if(isDark, $mantle, $text)}; --color-black: #{if(isDark, $surface, $text)};
/* light variants - produced via Sass scale-color(color, $lightness: -10%) */ /* light variants - produced via Sass scale-color(color, $lightness: -10%) */
--color-red-light: #{ctx_lighten($red, 10%)}; --color-red-light: #{ctx_lighten($love, 10%)};
--color-orange-light: #{ctx_lighten($peach, 10%)}; --color-orange-light: #{ctx_lighten($rose, 10%)};
--color-yellow-light: #{ctx_lighten($yellow, 10%)}; --color-yellow-light: #{ctx_lighten($gold, 10%)};
--color-olive-light: #{ctx_lighten($green, 10%)}; --color-olive-light: #{ctx_lighten($pine, 10%)};
--color-green-light: #{ctx_lighten($green, 10%)}; --color-green-light: #{ctx_lighten($pine, 10%)};
--color-teal-light: #{ctx_lighten($teal, 10%)}; --color-teal-light: #{ctx_lighten($foam, 10%)};
--color-blue-light: #{ctx_lighten($blue, 10%)}; --color-blue-light: #{ctx_lighten($iris, 10%)};
--color-violet-light: #{ctx_lighten($lavender, 10%)}; --color-violet-light: #{ctx_lighten($iris, 10%)};
--color-purple-light: #{ctx_lighten($mauve, 10%)}; --color-purple-light: #{ctx_lighten($iris, 10%)};
--color-pink-light: #{ctx_lighten($pink, 10%)}; --color-pink-light: #{ctx_lighten($rose, 10%)};
--color-brown-light: #{ctx_lighten($flamingo, 10%)}; --color-brown-light: #{ctx_lighten($love, 10%)};
--color-grey-light: #{ctx_lighten($overlay2, 10%)}; --color-grey-light: #{ctx_lighten($subtle, 10%)};
--color-black-light: #{if( --color-black-light: #{if(
isDark, isDark,
ctx_lighten($mantle, 10%), ctx_lighten($surface, 10%),
ctx_lighten($text, 10%) ctx_lighten($text, 10%)
)}; )};
/* other colors */ /* other colors */
--color-gold: #{$rosewater}; --color-gold: #{$rose};
--color-white: #{$text}; --color-white: #{$text};
--color-diff-removed-word-bg: #{color.change($red, $alpha: 0.15)}; --color-diff-removed-word-bg: #{color.change($love, $alpha: 0.15)};
--color-diff-added-word-bg: #{color.change($green, $alpha: 0.15)}; --color-diff-added-word-bg: #{color.change($pine, $alpha: 0.15)};
--color-diff-removed-row-bg: #{color.change($red, $alpha: 0.07)}; --color-diff-removed-row-bg: #{color.change($love, $alpha: 0.07)};
--color-diff-moved-row-bg: #{color.change($yellow, $alpha: 0.07)}; --color-diff-moved-row-bg: #{color.change($gold, $alpha: 0.07)};
--color-diff-added-row-bg: #{color.change($green, $alpha: 0.07)}; --color-diff-added-row-bg: #{color.change($pine, $alpha: 0.07)};
--color-diff-removed-row-border: #{color.change($red, $alpha: 0.07)}; --color-diff-removed-row-border: #{color.change($love, $alpha: 0.07)};
--color-diff-moved-row-border: #{color.change($yellow, $alpha: 0.07)}; --color-diff-moved-row-border: #{color.change($gold, $alpha: 0.07)};
--color-diff-added-row-border: #{color.change($green, $alpha: 0.07)}; --color-diff-added-row-border: #{color.change($pine, $alpha: 0.07)};
--color-diff-inactive: #{$overlay2}; --color-diff-inactive: #{$subtle};
--color-error-border: #{$red}; --color-error-border: #{$love};
--color-error-bg: #{$red}; --color-error-bg: #{$love};
--color-error-bg-active: #{ctx_lighten($red, 5%)}; --color-error-bg-active: #{ctx_lighten($love, 5%)};
--color-error-bg-hover: #{ctx_lighten($red, 10%)}; --color-error-bg-hover: #{ctx_lighten($love, 10%)};
--color-error-text: #{$lvl1}; --color-error-text: #{$lvl1};
--color-success-border: #{ctx_lighten($green, 10%)}; --color-success-border: #{ctx_lighten($pine, 10%)};
--color-success-bg: #{$green}; --color-success-bg: #{$pine};
--color-success-text: #{$lvl1}; --color-success-text: #{$lvl1};
--color-warning-border: #{ctx_lighten($yellow, 10%)}; --color-warning-border: #{ctx_lighten($gold, 10%)};
--color-warning-bg: #{$yellow}; --color-warning-bg: #{$gold};
--color-warning-text: #{$lvl1}; --color-warning-text: #{$lvl1};
--color-info-border: #{ctx_lighten($blue, 10%)}; --color-info-border: #{ctx_lighten($iris, 10%)};
--color-info-bg: #{$lvl1}; --color-info-bg: #{$lvl1};
--color-info-text: #{$text}; --color-info-text: #{$text};
--color-red-badge: #{ctx_lighten($red, 10%)}; --color-red-badge: #{ctx_lighten($love, 10%)};
--color-red-badge-bg: #{$lvl1}; --color-red-badge-bg: #{$lvl1};
--color-red-badge-hover-bg: #{ctx_lighten($red, 5%)}; --color-red-badge-hover-bg: #{ctx_lighten($love, 5%)};
--color-green-badge: #{$green}; --color-green-badge: #{$pine};
--color-green-badge-bg: #{$green}; --color-green-badge-bg: #{$pine};
--color-green-badge-hover-bg: #{ctx_lighten($green, 5%)}; --color-green-badge-hover-bg: #{ctx_lighten($pine, 5%)};
--color-yellow-badge: #{$yellow}; --color-yellow-badge: #{$gold};
--color-yellow-badge-bg: #{$lvl1}; --color-yellow-badge-bg: #{$lvl1};
--color-yellow-badge-hover-bg: #{ctx_lighten($yellow, 5%)}; --color-yellow-badge-hover-bg: #{ctx_lighten($gold, 5%)};
--color-orange-badge: #{$peach}; --color-orange-badge: #{$rose};
--color-orange-badge-bg: #{$lvl1}; --color-orange-badge-bg: #{$lvl1};
--color-orange-badge-hover-bg: #{ctx_lighten($peach, 5%)}; --color-orange-badge-hover-bg: #{ctx_lighten($rose, 5%)};
--color-git: #{$peach}; --color-git: #{$rose};
/* target-based colors */ /* target-based colors */
--color-body: #{$lvl1}; --color-body: #{$lvl1};
--color-box-header: #{$lvl2}; --color-box-header: #{$lvl2};
--color-box-body: #{$lvl2}; --color-box-body: #{$lvl2};
--color-box-body-highlight: #{$surface0}; --color-box-body-highlight: #{$highlight-low};
--color-text-dark: #{$subtext0}; --color-text-dark: #{$subtle};
--color-text: #{$text}; --color-text: #{$text};
--color-text-light: #{$subtext1}; --color-text-light: #{$muted};
--color-text-light-1: #{$subtext1}; --color-text-light-1: #{$muted};
--color-text-light-2: #{$subtext1}; --color-text-light-2: #{$muted};
--color-text-light-3: #{$subtext1}; --color-text-light-3: #{$muted};
--color-footer: #{$lvl2}; --color-footer: #{$lvl2};
--color-timeline: #{$surface0}; --color-timeline: #{$highlight-low};
--color-input-text: #{$text}; --color-input-text: #{$text};
--color-input-background: #{$surface0}; --color-input-background: #{$highlight-low};
--color-input-toggle-background: #{$surface0}; --color-input-toggle-background: #{$highlight-low};
--color-input-border: #{$surface1}; --color-input-border: #{$highlight-med};
--color-input-border-hover: #{$surface2}; --color-input-border-hover: #{$highlight-high};
--color-nav-bg: #{$lvl2}; --color-nav-bg: #{$lvl2};
--color-nav-hover-bg: #{$surface0}; --color-nav-hover-bg: #{$highlight-low};
--color-navbar: #{$lvl2}; --color-navbar: #{$lvl2};
--color-navbar-transparent: #{color.change($lvl1, $alpha: 0)}; --color-navbar-transparent: #{color.change($lvl1, $alpha: 0)};
--color-light: #{color.change($surface2, $alpha: 0.3)}; --color-light: #{color.change($highlight-high, $alpha: 0.3)};
--color-light-mimic-enabled: rgba( --color-light-mimic-enabled: rgba(
0, 0,
0, 0,
0, 0,
calc(40 / 255 * 222 / 255 / var(--opacity-disabled)) calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
); );
--color-light-border: #{$surface2}; --color-light-border: #{$highlight-high};
--color-hover: #{color.change($overlay0, $alpha: 0.1)}; --color-hover: #{color.change($subtle, $alpha: 0.1)};
--color-active: #{color.change($text, $alpha: 0.1)}; --color-active: #{color.change($text, $alpha: 0.1)};
--color-menu: #{$surface0}; --color-menu: #{$highlight-low};
--color-card: #{$surface0}; --color-card: #{$highlight-low};
--color-markup-table-row: #{color.change($text, $alpha: 0.02)}; --color-markup-table-row: #{color.change($text, $alpha: 0.02)};
--color-markup-code-block: #{color.change($text, $alpha: 0.05)}; --color-markup-code-block: #{color.change($text, $alpha: 0.05)};
--color-button: #{$surface0}; --color-button: #{$highlight-low};
--color-code-bg: #{$base}; --color-code-bg: #{$base};
--color-code-sidebar-bg: #{$surface0}; --color-code-sidebar-bg: #{$highlight-low};
--color-shadow: #{color.change($lvl1, $alpha: 0.1)}; --color-shadow: #{color.change($lvl1, $alpha: 0.1)};
--color-secondary-bg: #{$surface0}; --color-secondary-bg: #{$highlight-low};
--color-text-focus: #{$text}; --color-text-focus: #{$text};
--color-expand-button: #{$surface2}; --color-expand-button: #{$highlight-high};
--color-placeholder-text: #{$surface2}; --color-placeholder-text: #{$highlight-high};
--color-editor-line-highlight: var(--color-primary-light-5); --color-editor-line-highlight: var(--color-primary-light-5);
--color-project-board-bg: var(--color-secondary-light-2); --color-project-board-bg: var(--color-secondary-light-2);
/* gitea source code: */ /* gitea source code: */
@ -208,13 +232,13 @@ $lvl3: if($isDark, $base, $crust);
--color-reaction-active-bg: var(--color-primary-alpha-40); --color-reaction-active-bg: var(--color-primary-alpha-40);
--color-header-wrapper: #{$lvl2}; --color-header-wrapper: #{$lvl2};
--color-header-wrapper-transparent: #{color.change($lvl2, $alpha: 0)}; --color-header-wrapper-transparent: #{color.change($lvl2, $alpha: 0)};
--color-label-text: #{$crust}; --color-label-text: #{$base};
--color-label-bg: #{$accent}; --color-label-bg: #{$accent};
--color-label-hover-bg: #{ctx_lighten($accent, 6%)}; --color-label-hover-bg: #{ctx_lighten($accent, 6%)};
--color-label-active-bg: #{ctx_lighten($accent, 3%)}; --color-label-active-bg: #{ctx_lighten($accent, 3%)};
--color-accent: var(--color-primary-light-1); --color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5); --color-small-accent: var(--color-primary-light-5);
--color-active-line: #{$surface1}; --color-active-line: #{$highlight-med};
} }
@if $isDark { @if $isDark {
@ -283,7 +307,7 @@ $lvl3: if($isDark, $base, $crust);
} }
::selection { ::selection {
background: color.change($rosewater, $alpha: 0.3) !important; background: color.change($rose, $alpha: 0.3) !important;
} }
@import "chroma"; @import "chroma";