diff --git a/README.md b/README.md index aba09c3..b5ef35d 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,16 @@ -

- Logo
- - 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";