diff --git a/README.md b/README.md
index aba09c3..b5ef35d 100644
--- a/README.md
+++ b/README.md
@@ -1,39 +1,16 @@
-
-
-
- Catppuccin for Gitea
-
-
-
-
-
-
+
+
Rosé Pine for Gitea
+All natural pine, faux fur and a bit of soho vibes for the classy minimalist
+
-
+
+
+
-## Previews
-
-
-🌻 Latte
-
-
-
-🪴 Frappé
-
-
-
-🌺 Macchiato
-
-
-
-🌿 Mocha
-
-
-
## Usage
1. Download the [latest release](https://github.com/catppuccin/gitea/releases/latest).
@@ -48,7 +25,7 @@
```
[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
```
diff --git a/build.ts b/build.ts
index d03b25c..e72ca9d 100755
--- a/build.ts
+++ b/build.ts
@@ -4,24 +4,40 @@ import * as path from "std/path";
import * as sass from "sass";
import * as rp from "npm:@rose-pine/palette";
-const builder = (flavor: string, accent: string) => `
-@import "@rose-pine/palette/dist/css/rose-pine.css";
+type Flavor = "main" | "moon" | "dawn";
-$base: var(--rp-${flavor}-base)
-$surface: var(--rp-${flavor}-surface)
-$overlay: var(--rp-${flavor}-overlay)
-$muted: var(--rp-${flavor}-muted)
-$subtle: var(--rp-${flavor}-subtle)
-$text: var(--rp-${flavor}-text)
-$love: var(--rp-${flavor}-love)
-$gold: var(--rp-${flavor}-gold)
-$rose: var(--rp-${flavor}-rose)
-$pine: var(--rp-${flavor}-pine)
-$foam: var(--rp-${flavor}-foam)
-$iris: var(--rp-${flavor}-iris)
-$highlight-low: var(--rp-${flavor}-highlight-low)
-$highlight-med: var(--rp-${flavor}-highlight-med)
-$highlight-high: var(--rp-${flavor}-highlight-high)
+function isUpperCase(str: string) {
+ return str !== str.toLowerCase() && str === str.toUpperCase();
+}
+
+console.log(`
+${Object.keys(rp.roleColors)
+ .map(
+ (color) =>
+ `$${color
+ .split("")
+ .map((c) => (isUpperCase(c) ? "-" + c.toLowerCase() : c))
+ .join("")}: #${
+ /* @ts-ignore I hate typescript */
+ rp.roleColors[color]["main"].hex
+ };`,
+ )
+ .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};
$isDark: ${flavor !== "dawn"};
@@ -38,7 +54,7 @@ Deno.mkdirSync(path.join(__dirname, "dist"), { recursive: true });
const flavors = Object.keys(rp.variantColors);
for (const flavor of flavors) {
for (const accent of accents) {
- const input = builder(flavor, accent);
+ const input = builder(flavor as Flavor, accent);
const result = sass.compileString(input, {
loadPaths: [
path.join(__dirname, "src"),
diff --git a/src/_chroma.scss b/src/_chroma.scss
index 53f153a..b6478a6 100644
--- a/src/_chroma.scss
+++ b/src/_chroma.scss
@@ -2,39 +2,39 @@
/* NameBuiltinPseudo */
.chroma .bp {
- color: $peach;
+ color: $rose;
}
/* Comment */
.chroma .c {
- color: $overlay0;
+ color: $subtle;
}
/* CommentSingle */
.chroma .c1 {
- color: $overlay0;
+ color: $subtle;
}
/* CommentHashbang */
.chroma .ch {
- color: $overlay0;
+ color: $subtle;
}
/* CommentMultiline */
.chroma .cm {
- color: $overlay0;
+ color: $subtle;
}
/* CommentPreproc */
.chroma .cp {
- color: $blue;
+ color: $iris;
}
/* CommentPreprocFile */
.chroma .cpf {
- color: $blue;
+ color: $iris;
}
/* CommentSpecial */
.chroma .cs {
- color: $overlay0;
+ color: $subtle;
}
/* LiteralStringDelimiter */
.chroma .dl {
- color: $blue;
+ color: $iris;
}
/* NameFunctionMagic */
.chroma .fm {
@@ -45,7 +45,7 @@
/* GenericDeleted */
.chroma .gd {
color: $text;
- background-color: color.change($red, $alpha: 0.15);
+ background-color: color.change($love, $alpha: 0.15);
}
/* GenericEmph */
.chroma .ge {
@@ -53,28 +53,28 @@
}
/* GenericHeading */
.chroma .gh {
- color: $sky;
+ color: $foam;
}
/* GenericInserted */
.chroma .gi {
color: $text;
- background-color: color.change($green, $alpha: 0.15);
+ background-color: color.change($pine, $alpha: 0.15);
}
/* GenericUnderline */
.chroma .gl {
}
/* GenericOutput */
.chroma .go {
- color: $peach;
+ color: $rose;
}
/* GenericPrompt */
.chroma .gp {
- color: $overlay0;
+ color: $subtle;
font-weight: bold;
}
/* GenericError */
.chroma .gr {
- color: $maroon;
+ color: $love;
}
/* GenericStrong */
.chroma .gs {
@@ -82,44 +82,44 @@
}
/* GenericTraceback */
.chroma .gt {
- color: $maroon;
+ color: $love;
}
/* GenericSubheading */
.chroma .gu {
- color: $sky;
+ color: $foam;
}
/* LiteralNumberIntegerLong */
.chroma .il {
- color: $peach;
+ color: $rose;
}
/* Keyword */
.chroma .k {
- color: $mauve;
+ color: $iris;
}
/* KeywordConstant */
.chroma .kc {
- color: $yellow;
+ color: $gold;
}
/* KeywordDeclaration */
.chroma .kd {
- color: $mauve;
+ color: $iris;
}
/* KeywordNamespace */
.chroma .kn {
- color: $yellow;
+ color: $gold;
}
/* KeywordPseudo */
.chroma .kp {
- color: $mauve;
+ color: $iris;
font-weight: bold;
}
/* KeywordReserved */
.chroma .kr {
- color: $mauve;
+ color: $iris;
}
/* KeywordType */
.chroma .kt {
- color: $yellow;
+ color: $gold;
}
/* Literal */
.chroma .l {
@@ -129,168 +129,168 @@
}
/* LiteralNumber */
.chroma .m {
- color: $peach;
+ color: $rose;
}
/* LiteralNumberBin */
.chroma .mb {
- color: $peach;
+ color: $rose;
}
/* LiteralNumberFloat */
.chroma .mf {
- color: $peach;
+ color: $rose;
}
/* LiteralNumberHex */
.chroma .mh {
- color: $peach;
+ color: $rose;
}
/* LiteralNumberInteger */
.chroma .mi {
- color: $peach;
+ color: $rose;
}
/* LiteralNumberOct */
.chroma .mo {
- color: $peach;
+ color: $rose;
}
/* Name */
.chroma .n {
- color: $lavender;
+ color: $iris;
}
/* NameAttribute */
.chroma .na {
- color: $yellow;
+ color: $gold;
}
/* NameBuiltin */
.chroma .nb {
- color: $peach;
+ color: $rose;
}
/* NameClass */
.chroma .nc {
- color: $yellow;
+ color: $gold;
}
/* NameDecorator */
.chroma .nd {
- color: $pink;
+ color: $rose;
}
/* NameException */
.chroma .ne {
- color: $maroon;
+ color: $love;
}
/* NameFunction */
.chroma .nf {
- color: $blue;
+ color: $iris;
}
/* NameEntity */
.chroma .ni {
- color: $pink;
+ color: $rose;
}
/* NameLabel */
.chroma .nl {
- color: $yellow;
+ color: $gold;
}
/* NameNamespace */
.chroma .nn {
- color: $yellow;
+ color: $gold;
}
/* NameConstant */
.chroma .no {
- color: $yellow;
+ color: $gold;
}
/* NameTag */
.chroma .nt {
- color: $mauve;
+ color: $iris;
}
/* NameVariable */
.chroma .nv {
- color: $peach;
+ color: $rose;
}
/* NameOther */
.chroma .nx {
- color: $peach;
+ color: $rose;
}
/* Operator */
.chroma .o {
- color: $sky;
+ color: $foam;
}
/* OperatorWord */
.chroma .ow {
- color: $sky;
+ color: $foam;
font-weight: bold;
}
/* Punctuation */
.chroma .p {
- color: $overlay2;
+ color: $subtle;
}
/* NameProperty */
.chroma .py {
}
/* LiteralString */
.chroma .s {
- color: $green;
+ color: $pine;
}
/* LiteralStringSingle */
.chroma .s1 {
- color: $green;
+ color: $pine;
}
/* LiteralStringDouble */
.chroma .s2 {
- color: $green;
+ color: $pine;
}
/* LiteralStringAffix */
.chroma .sa {
- color: $green;
+ color: $pine;
}
/* LiteralStringBacktick */
.chroma .sb {
- color: $green;
+ color: $pine;
}
/* LiteralStringChar */
.chroma .sc {
- color: $green;
+ color: $pine;
}
/* LiteralStringDoc */
.chroma .sd {
- color: $green;
+ color: $pine;
}
/* LiteralStringEscape */
.chroma .se {
- color: $blue;
+ color: $iris;
}
/* LiteralStringHeredoc */
.chroma .sh {
- color: $green;
+ color: $pine;
}
/* LiteralStringInterpol */
.chroma .si {
- color: $green;
+ color: $pine;
}
/* LiteralStringRegex */
.chroma .sr {
- color: $blue;
+ color: $iris;
}
/* LiteralStringSymbol */
.chroma .ss {
- color: $green;
+ color: $pine;
}
/* LiteralStringOther */
.chroma .sx {
- color: $green;
+ color: $pine;
}
/* NameVariableClass */
.chroma .vc {
- color: $yellow;
+ color: $gold;
}
/* NameVariableGlobal */
.chroma .vg {
- color: $peach;
+ color: $rose;
}
/* NameVariableInstance */
.chroma .vi {
- color: $yellow;
+ color: $gold;
}
/* NameVariableMagic */
.chroma .vm {
}
/* TextWhitespace */
.chroma .w {
- color: $surface0;
+ color: $highlight-low;
}
diff --git a/src/_codemirror.scss b/src/_codemirror.scss
index 36a86a2..e8af3e4 100644
--- a/src/_codemirror.scss
+++ b/src/_codemirror.scss
@@ -10,19 +10,19 @@
}
.cm-quote {
- color: $green;
+ color: $pine;
}
.cm-keyword {
- color: $mauve;
+ color: $iris;
}
.cm-atom {
- color: $red;
+ color: $love;
}
.cm-number {
- color: $peach;
+ color: $rose;
}
.cm-def {
@@ -30,35 +30,35 @@
}
.cm-variable-2 {
- color: $sky;
+ color: $foam;
}
.cm-variable-3 {
- color: $teal;
+ color: $foam;
}
.cm-comment {
- color: $surface2;
+ color: $highlight-med;
}
.cm-string {
- color: $green;
+ color: $pine;
}
.cm-string-2 {
- color: $green;
+ color: $pine;
}
.cm-meta {
- color: $peach;
+ color: $rose;
}
.cm-qualifier {
- color: $peach;
+ color: $rose;
}
.cm-builtin {
- color: $peach;
+ color: $rose;
}
.cm-bracket {
@@ -66,26 +66,26 @@
}
.cm-tag {
- color: $yellow;
+ color: $gold;
}
.cm-attribute {
- color: $yellow;
+ color: $gold;
}
.cm-hr {
- color: $overlay2;
+ color: $subtle;
}
.cm-url {
- color: $blue;
+ color: $iris;
}
.cm-link {
- color: $blue;
+ color: $iris;
}
.cm-error {
- color: $red;
+ color: $love;
}
}
diff --git a/src/_monaco.scss b/src/_monaco.scss
index 073ff38..b7166f6 100644
--- a/src/_monaco.scss
+++ b/src/_monaco.scss
@@ -1,11 +1,11 @@
.monaco-editor {
// selected text
.selected-text {
- background-color: $surface0 !important;
+ background-color: $highlight-low !important;
}
// line numbers
.margin-view-overlays .line-numbers {
- color: $subtext0 !important;
+ color: $subtle !important;
}
.line-numbers.active-line-number {
color: $accent !important;
@@ -16,8 +16,8 @@
.margin-view-overlays .current-line-margin {
background-color: #{if(
$isDark,
- color.mix($surface0, $base, 64%),
- color.mix($mantle, $base, 70%)
+ color.mix($highlight-low, $base, 64%),
+ color.mix($surface, $base, 70%)
)} !important;
}
@@ -32,11 +32,11 @@
}
// decorators
.mtk3 {
- color: $peach !important;
+ color: $rose !important;
}
// shell arguments
.mtk4 {
- color: $teal !important;
+ color: $foam !important;
}
// css constants & pre-defineds
.mtk5 {
@@ -44,31 +44,31 @@
}
// keywords
.mtk6 {
- color: $mauve !important;
+ color: $iris !important;
}
// numbers
.mtk7 {
- color: $peach !important;
+ color: $rose !important;
}
// comments
.mtk8 {
- color: $overlay2 !important;
+ color: $subtle !important;
}
// sometimes a keyword, apparently
.mtk9 {
- color: $mauve !important;
+ color: $iris !important;
}
// braces, brackets, parentheses
.mtk10 {
- color: $subtext0 !important;
+ color: $subtle !important;
}
// arrow brackets & equal signs in HTML
.mtk11 {
- color: $teal !important;
+ color: $foam !important;
}
// @ sign in javascript ¯\_(ツ)_/¯
.mtk12 {
- color: $teal !important;
+ color: $foam !important;
}
.mtk13 {
color: #ff69b4 !important;
@@ -78,11 +78,11 @@
}
// regex, css classnames, and HTML keywords (huh)
.mtk15 {
- color: $mauve !important;
+ color: $iris !important;
}
// shebangs
.mtk16 {
- color: $overlay2 !important;
+ color: $subtle !important;
}
.mtk17 {
color: #ff69b4 !important;
@@ -92,47 +92,47 @@
}
// glob operator i guess
.mtk19 {
- color: $teal !important;
+ color: $foam !important;
}
.mtk20 {
color: #ff69b4 !important;
}
// strings
.mtk21 {
- color: $green !important;
+ color: $pine !important;
}
.mtk22 {
color: #ff69b4 !important;
}
// functions
.mtk23 {
- color: $blue !important;
+ color: $iris !important;
}
// shell variables
.mtk24 {
- color: $peach !important;
+ color: $rose !important;
}
// weird variables
.mtk25 {
- color: $pink !important;
+ color: $rose !important;
}
.bracket-highlighting-0 {
- color: color.mix($text, $red, 40%) !important;
+ color: color.mix($text, $love, 40%) !important;
}
.bracket-highlighting-1 {
- color: color.mix($text, $peach, 40%) !important;
+ color: color.mix($text, $rose, 40%) !important;
}
.bracket-highlighting-2 {
- color: color.mix($text, $yellow, 40%) !important;
+ color: color.mix($text, $gold, 40%) !important;
}
.bracket-highlighting-3 {
- color: color.mix($text, $green, 40%) !important;
+ color: color.mix($text, $pine, 40%) !important;
}
.bracket-highlighting-4 {
- color: color.mix($text, $blue, 40%) !important;
+ color: color.mix($text, $iris, 40%) !important;
}
.bracket-highlighting-5 {
- color: color.mix($text, $mauve, 40%) !important;
+ color: color.mix($text, $iris, 40%) !important;
}
}
diff --git a/src/_theme.scss b/src/_theme.scss
index 1e23457..a6615ef 100644
--- a/src/_theme.scss
+++ b/src/_theme.scss
@@ -1,14 +1,38 @@
@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
@function ctx_lighten($color, $amount) {
$multiplier: if($isDark, -1, 1);
@return color.adjust($color, $lightness: $amount * $multiplier);
}
-$lvl1: if($isDark, $crust, $base);
-$lvl2: $mantle;
-$lvl3: if($isDark, $base, $crust);
+$lvl1: if($isDark, $base, $overlay);
+$lvl2: $surface;
+$lvl3: if($isDark, $overlay, $base);
:root {
@if $isDark {
@@ -50,155 +74,155 @@ $lvl3: if($isDark, $base, $crust);
--color-primary-alpha-80: #{color.change($accent, $alpha: 0.8)};
--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-2: #{ctx_lighten($surface0, -6%)};
- --color-secondary-dark-3: #{ctx_lighten($surface0, -9%)};
- --color-secondary-dark-4: #{ctx_lighten($surface0, -12%)};
- --color-secondary-dark-5: #{ctx_lighten($surface0, -15%)};
- --color-secondary-dark-6: #{ctx_lighten($surface0, -18%)};
- --color-secondary-dark-7: #{ctx_lighten($surface0, -21%)};
- --color-secondary-dark-8: #{ctx_lighten($surface0, -24%)};
- --color-secondary-dark-9: #{ctx_lighten($surface0, -27%)};
- --color-secondary-dark-10: #{ctx_lighten($surface0, -30%)};
- --color-secondary-dark-11: #{ctx_lighten($surface0, -33%)};
- --color-secondary-dark-12: #{ctx_lighten($surface0, -36%)};
- --color-secondary-dark-13: #{ctx_lighten($surface0, -39%)};
+ --color-secondary-dark-1: #{ctx_lighten($highlight-low, -3%)};
+ --color-secondary-dark-2: #{ctx_lighten($highlight-low, -6%)};
+ --color-secondary-dark-3: #{ctx_lighten($highlight-low, -9%)};
+ --color-secondary-dark-4: #{ctx_lighten($highlight-low, -12%)};
+ --color-secondary-dark-5: #{ctx_lighten($highlight-low, -15%)};
+ --color-secondary-dark-6: #{ctx_lighten($highlight-low, -18%)};
+ --color-secondary-dark-7: #{ctx_lighten($highlight-low, -21%)};
+ --color-secondary-dark-8: #{ctx_lighten($highlight-low, -24%)};
+ --color-secondary-dark-9: #{ctx_lighten($highlight-low, -27%)};
+ --color-secondary-dark-10: #{ctx_lighten($highlight-low, -30%)};
+ --color-secondary-dark-11: #{ctx_lighten($highlight-low, -33%)};
+ --color-secondary-dark-12: #{ctx_lighten($highlight-low, -36%)};
+ --color-secondary-dark-13: #{ctx_lighten($highlight-low, -39%)};
- --color-secondary-light-1: #{ctx_lighten($surface0, 3%)};
- --color-secondary-light-2: #{ctx_lighten($surface0, 6%)};
- --color-secondary-light-3: #{ctx_lighten($surface0, 9%)};
- --color-secondary-light-4: #{ctx_lighten($surface0, 12%)};
+ --color-secondary-light-1: #{ctx_lighten($highlight-low, 3%)};
+ --color-secondary-light-2: #{ctx_lighten($highlight-low, 6%)};
+ --color-secondary-light-3: #{ctx_lighten($highlight-low, 9%)};
+ --color-secondary-light-4: #{ctx_lighten($highlight-low, 12%)};
- --color-secondary-alpha-10: #{color.change($surface0, $alpha: 0.1)};
- --color-secondary-alpha-20: #{color.change($surface0, $alpha: 0.2)};
- --color-secondary-alpha-30: #{color.change($surface0, $alpha: 0.3)};
- --color-secondary-alpha-40: #{color.change($surface0, $alpha: 0.4)};
- --color-secondary-alpha-50: #{color.change($surface0, $alpha: 0.5)};
- --color-secondary-alpha-60: #{color.change($surface0, $alpha: 0.6)};
- --color-secondary-alpha-70: #{color.change($surface0, $alpha: 0.7)};
- --color-secondary-alpha-80: #{color.change($surface0, $alpha: 0.8)};
- --color-secondary-alpha-90: #{color.change($surface0, $alpha: 0.9)};
+ --color-secondary-alpha-10: #{color.change($highlight-low, $alpha: 0.1)};
+ --color-secondary-alpha-20: #{color.change($highlight-low, $alpha: 0.2)};
+ --color-secondary-alpha-30: #{color.change($highlight-low, $alpha: 0.3)};
+ --color-secondary-alpha-40: #{color.change($highlight-low, $alpha: 0.4)};
+ --color-secondary-alpha-50: #{color.change($highlight-low, $alpha: 0.5)};
+ --color-secondary-alpha-60: #{color.change($highlight-low, $alpha: 0.6)};
+ --color-secondary-alpha-70: #{color.change($highlight-low, $alpha: 0.7)};
+ --color-secondary-alpha-80: #{color.change($highlight-low, $alpha: 0.8)};
+ --color-secondary-alpha-90: #{color.change($highlight-low, $alpha: 0.9)};
/* colors */
- --color-red: #{$red};
- --color-orange: #{$peach};
- --color-yellow: #{$yellow};
- --color-olive: #{$green};
- --color-green: #{$green};
- --color-teal: #{$teal};
- --color-blue: #{$blue};
- --color-violet: #{$lavender};
- --color-purple: #{$mauve};
- --color-pink: #{$pink};
- --color-brown: #{$flamingo};
- --color-grey: #{$overlay2};
- --color-black: #{if(isDark, $mantle, $text)};
+ --color-red: #{$love};
+ --color-orange: #{$rose};
+ --color-yellow: #{$gold};
+ --color-olive: #{$pine};
+ --color-green: #{$pine};
+ --color-teal: #{$foam};
+ --color-blue: #{$iris};
+ --color-violet: #{$iris};
+ --color-purple: #{$iris};
+ --color-pink: #{$rose};
+ --color-brown: #{$love};
+ --color-grey: #{$subtle};
+ --color-black: #{if(isDark, $surface, $text)};
/* light variants - produced via Sass scale-color(color, $lightness: -10%) */
- --color-red-light: #{ctx_lighten($red, 10%)};
- --color-orange-light: #{ctx_lighten($peach, 10%)};
- --color-yellow-light: #{ctx_lighten($yellow, 10%)};
- --color-olive-light: #{ctx_lighten($green, 10%)};
- --color-green-light: #{ctx_lighten($green, 10%)};
- --color-teal-light: #{ctx_lighten($teal, 10%)};
- --color-blue-light: #{ctx_lighten($blue, 10%)};
- --color-violet-light: #{ctx_lighten($lavender, 10%)};
- --color-purple-light: #{ctx_lighten($mauve, 10%)};
- --color-pink-light: #{ctx_lighten($pink, 10%)};
- --color-brown-light: #{ctx_lighten($flamingo, 10%)};
- --color-grey-light: #{ctx_lighten($overlay2, 10%)};
+ --color-red-light: #{ctx_lighten($love, 10%)};
+ --color-orange-light: #{ctx_lighten($rose, 10%)};
+ --color-yellow-light: #{ctx_lighten($gold, 10%)};
+ --color-olive-light: #{ctx_lighten($pine, 10%)};
+ --color-green-light: #{ctx_lighten($pine, 10%)};
+ --color-teal-light: #{ctx_lighten($foam, 10%)};
+ --color-blue-light: #{ctx_lighten($iris, 10%)};
+ --color-violet-light: #{ctx_lighten($iris, 10%)};
+ --color-purple-light: #{ctx_lighten($iris, 10%)};
+ --color-pink-light: #{ctx_lighten($rose, 10%)};
+ --color-brown-light: #{ctx_lighten($love, 10%)};
+ --color-grey-light: #{ctx_lighten($subtle, 10%)};
--color-black-light: #{if(
isDark,
- ctx_lighten($mantle, 10%),
+ ctx_lighten($surface, 10%),
ctx_lighten($text, 10%)
)};
/* other colors */
- --color-gold: #{$rosewater};
+ --color-gold: #{$rose};
--color-white: #{$text};
- --color-diff-removed-word-bg: #{color.change($red, $alpha: 0.15)};
- --color-diff-added-word-bg: #{color.change($green, $alpha: 0.15)};
- --color-diff-removed-row-bg: #{color.change($red, $alpha: 0.07)};
- --color-diff-moved-row-bg: #{color.change($yellow, $alpha: 0.07)};
- --color-diff-added-row-bg: #{color.change($green, $alpha: 0.07)};
- --color-diff-removed-row-border: #{color.change($red, $alpha: 0.07)};
- --color-diff-moved-row-border: #{color.change($yellow, $alpha: 0.07)};
- --color-diff-added-row-border: #{color.change($green, $alpha: 0.07)};
- --color-diff-inactive: #{$overlay2};
- --color-error-border: #{$red};
- --color-error-bg: #{$red};
- --color-error-bg-active: #{ctx_lighten($red, 5%)};
- --color-error-bg-hover: #{ctx_lighten($red, 10%)};
+ --color-diff-removed-word-bg: #{color.change($love, $alpha: 0.15)};
+ --color-diff-added-word-bg: #{color.change($pine, $alpha: 0.15)};
+ --color-diff-removed-row-bg: #{color.change($love, $alpha: 0.07)};
+ --color-diff-moved-row-bg: #{color.change($gold, $alpha: 0.07)};
+ --color-diff-added-row-bg: #{color.change($pine, $alpha: 0.07)};
+ --color-diff-removed-row-border: #{color.change($love, $alpha: 0.07)};
+ --color-diff-moved-row-border: #{color.change($gold, $alpha: 0.07)};
+ --color-diff-added-row-border: #{color.change($pine, $alpha: 0.07)};
+ --color-diff-inactive: #{$subtle};
+ --color-error-border: #{$love};
+ --color-error-bg: #{$love};
+ --color-error-bg-active: #{ctx_lighten($love, 5%)};
+ --color-error-bg-hover: #{ctx_lighten($love, 10%)};
--color-error-text: #{$lvl1};
- --color-success-border: #{ctx_lighten($green, 10%)};
- --color-success-bg: #{$green};
+ --color-success-border: #{ctx_lighten($pine, 10%)};
+ --color-success-bg: #{$pine};
--color-success-text: #{$lvl1};
- --color-warning-border: #{ctx_lighten($yellow, 10%)};
- --color-warning-bg: #{$yellow};
+ --color-warning-border: #{ctx_lighten($gold, 10%)};
+ --color-warning-bg: #{$gold};
--color-warning-text: #{$lvl1};
- --color-info-border: #{ctx_lighten($blue, 10%)};
+ --color-info-border: #{ctx_lighten($iris, 10%)};
--color-info-bg: #{$lvl1};
--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-hover-bg: #{ctx_lighten($red, 5%)};
- --color-green-badge: #{$green};
- --color-green-badge-bg: #{$green};
- --color-green-badge-hover-bg: #{ctx_lighten($green, 5%)};
- --color-yellow-badge: #{$yellow};
+ --color-red-badge-hover-bg: #{ctx_lighten($love, 5%)};
+ --color-green-badge: #{$pine};
+ --color-green-badge-bg: #{$pine};
+ --color-green-badge-hover-bg: #{ctx_lighten($pine, 5%)};
+ --color-yellow-badge: #{$gold};
--color-yellow-badge-bg: #{$lvl1};
- --color-yellow-badge-hover-bg: #{ctx_lighten($yellow, 5%)};
- --color-orange-badge: #{$peach};
+ --color-yellow-badge-hover-bg: #{ctx_lighten($gold, 5%)};
+ --color-orange-badge: #{$rose};
--color-orange-badge-bg: #{$lvl1};
- --color-orange-badge-hover-bg: #{ctx_lighten($peach, 5%)};
- --color-git: #{$peach};
+ --color-orange-badge-hover-bg: #{ctx_lighten($rose, 5%)};
+ --color-git: #{$rose};
/* target-based colors */
--color-body: #{$lvl1};
--color-box-header: #{$lvl2};
--color-box-body: #{$lvl2};
- --color-box-body-highlight: #{$surface0};
- --color-text-dark: #{$subtext0};
+ --color-box-body-highlight: #{$highlight-low};
+ --color-text-dark: #{$subtle};
--color-text: #{$text};
- --color-text-light: #{$subtext1};
- --color-text-light-1: #{$subtext1};
- --color-text-light-2: #{$subtext1};
- --color-text-light-3: #{$subtext1};
+ --color-text-light: #{$muted};
+ --color-text-light-1: #{$muted};
+ --color-text-light-2: #{$muted};
+ --color-text-light-3: #{$muted};
--color-footer: #{$lvl2};
- --color-timeline: #{$surface0};
+ --color-timeline: #{$highlight-low};
--color-input-text: #{$text};
- --color-input-background: #{$surface0};
- --color-input-toggle-background: #{$surface0};
- --color-input-border: #{$surface1};
- --color-input-border-hover: #{$surface2};
+ --color-input-background: #{$highlight-low};
+ --color-input-toggle-background: #{$highlight-low};
+ --color-input-border: #{$highlight-med};
+ --color-input-border-hover: #{$highlight-high};
--color-nav-bg: #{$lvl2};
- --color-nav-hover-bg: #{$surface0};
+ --color-nav-hover-bg: #{$highlight-low};
--color-navbar: #{$lvl2};
--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(
0,
0,
0,
calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
);
- --color-light-border: #{$surface2};
- --color-hover: #{color.change($overlay0, $alpha: 0.1)};
+ --color-light-border: #{$highlight-high};
+ --color-hover: #{color.change($subtle, $alpha: 0.1)};
--color-active: #{color.change($text, $alpha: 0.1)};
- --color-menu: #{$surface0};
- --color-card: #{$surface0};
+ --color-menu: #{$highlight-low};
+ --color-card: #{$highlight-low};
--color-markup-table-row: #{color.change($text, $alpha: 0.02)};
--color-markup-code-block: #{color.change($text, $alpha: 0.05)};
- --color-button: #{$surface0};
+ --color-button: #{$highlight-low};
--color-code-bg: #{$base};
- --color-code-sidebar-bg: #{$surface0};
+ --color-code-sidebar-bg: #{$highlight-low};
--color-shadow: #{color.change($lvl1, $alpha: 0.1)};
- --color-secondary-bg: #{$surface0};
+ --color-secondary-bg: #{$highlight-low};
--color-text-focus: #{$text};
- --color-expand-button: #{$surface2};
- --color-placeholder-text: #{$surface2};
+ --color-expand-button: #{$highlight-high};
+ --color-placeholder-text: #{$highlight-high};
--color-editor-line-highlight: var(--color-primary-light-5);
--color-project-board-bg: var(--color-secondary-light-2);
/* gitea source code: */
@@ -208,13 +232,13 @@ $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-text: #{$crust};
+ --color-label-text: #{$base};
--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};
+ --color-active-line: #{$highlight-med};
}
@if $isDark {
@@ -283,7 +307,7 @@ $lvl3: if($isDark, $base, $crust);
}
::selection {
- background: color.change($rosewater, $alpha: 0.3) !important;
+ background: color.change($rose, $alpha: 0.3) !important;
}
@import "chroma";