mirror of
https://github.com/catppuccin/gitea.git
synced 2024-12-22 04:22:14 -05:00
feat: add codemirror
This commit is contained in:
winston
parent
5607ab9f53
commit
6576ad0288
5 changed files with 120 additions and 135 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/dist/
|
||||
2
build.ts
2
build.ts
|
|
@ -25,7 +25,7 @@ const dirname = path.dirname(path.fromFileUrl(import.meta.url));
|
|||
const builder = (flavor: string, accent: string) => `
|
||||
@import "catppuccin/${flavor}";
|
||||
$accent: $${accent};
|
||||
$is-dark: ${flavor !== "latte"};
|
||||
$isDark: ${flavor !== "latte"};
|
||||
@import "theme";
|
||||
`;
|
||||
|
||||
|
|
|
|||
91
src/_codemirror.scss
Normal file
91
src/_codemirror.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
.CodeMirror,
|
||||
.CodeMirror.cm-s-default,
|
||||
.CodeMirror.cm-s-paper {
|
||||
.cm-property {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.cm-header {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.cm-quote {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
.cm-keyword {
|
||||
color: $mauve;
|
||||
}
|
||||
|
||||
.cm-atom {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.cm-number {
|
||||
color: $peach;
|
||||
}
|
||||
|
||||
.cm-def {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.cm-variable-2 {
|
||||
color: $sky;
|
||||
}
|
||||
|
||||
.cm-variable-3 {
|
||||
color: $teal;
|
||||
}
|
||||
|
||||
.cm-comment {
|
||||
color: $surface2;
|
||||
}
|
||||
|
||||
.cm-string {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
.cm-string-2 {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
.cm-meta {
|
||||
color: $peach;
|
||||
}
|
||||
|
||||
.cm-qualifier {
|
||||
color: $peach;
|
||||
}
|
||||
|
||||
.cm-builtin {
|
||||
color: $peach;
|
||||
}
|
||||
|
||||
.cm-bracket {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.cm-tag {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
.cm-attribute {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
.cm-hr {
|
||||
color: $overlay2;
|
||||
}
|
||||
|
||||
.cm-url {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.cm-link {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.cm-error {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,19 @@
|
|||
@use "sass:color";
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
:root {
|
||||
@if $is-dark {
|
||||
color-schema: dark;
|
||||
@if $isDark {
|
||||
color-scheme: dark;
|
||||
--is-dark-theme: true;
|
||||
} @else {
|
||||
color-schema: light;
|
||||
color-scheme: light;
|
||||
--is-dark-theme: false;
|
||||
}
|
||||
--is-dark-theme: $is-dark;
|
||||
|
||||
accent-color: #{$accent};
|
||||
|
||||
|
|
@ -86,19 +93,19 @@
|
|||
--color-black: #{$mantle};
|
||||
|
||||
/* light variants - produced via Sass scale-color(color, $lightness: -10%) */
|
||||
--color-red-light: #{color.adjust($red, $lightness: -10%)};
|
||||
--color-orange-light: #{color.adjust($peach, $lightness: -10%)};
|
||||
--color-yellow-light: #{color.adjust($yellow, $lightness: -10%)};
|
||||
--color-olive-light: #{color.adjust($green, $lightness: -10%)};
|
||||
--color-green-light: #{color.adjust($green, $lightness: -10%)};
|
||||
--color-teal-light: #{color.adjust($teal, $lightness: -10%)};
|
||||
--color-blue-light: #{color.adjust($blue, $lightness: -10%)};
|
||||
--color-violet-light: #{color.adjust($lavender, $lightness: -10%)};
|
||||
--color-purple-light: #{color.adjust($mauve, $lightness: -10%)};
|
||||
--color-pink-light: #{color.adjust($pink, $lightness: -10%)};
|
||||
--color-brown-light: #{color.adjust($flamingo, $lightness: -10%)};
|
||||
--color-grey-light: #{color.adjust($overlay2, $lightness: -10%)};
|
||||
--color-black-light: #{color.adjust($mantle, $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-black-light: #{ctx_lighten($mantle, 10%)};
|
||||
|
||||
/* other colors */
|
||||
--color-gold: #{$rosewater};
|
||||
|
|
@ -219,8 +226,8 @@
|
|||
filter: invert(100%) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
.ui.ui.ui.button:not(.inverted),
|
||||
.ui.ui.ui.label:not(.inverted) {
|
||||
.ui.ui.ui.button:not(.inverted, .basic),
|
||||
.ui.ui.ui.label:not(.inverted, .basic) {
|
||||
&.primary,
|
||||
&.green,
|
||||
&.red,
|
||||
|
|
@ -241,4 +248,4 @@
|
|||
}
|
||||
|
||||
@import "chroma";
|
||||
// @import "../src/codemirror/dark";
|
||||
@import "codemirror";
|
||||
|
|
|
|||
|
|
@ -1,114 +0,0 @@
|
|||
$palette: (
|
||||
"mocha": (
|
||||
"rosewater": #f5e0dc,
|
||||
"flamingo": #f2cdcd,
|
||||
"pink": #f5c2e7,
|
||||
"mauve": #cba6f7,
|
||||
"red": #f38ba8,
|
||||
"maroon": #eba0ac,
|
||||
"peach": #fab387,
|
||||
"yellow": #f9e2af,
|
||||
"green": #a6e3a1,
|
||||
"teal": #94e2d5,
|
||||
"sky": #89dceb,
|
||||
"sapphire": #74c7ec,
|
||||
"blue": #89b4fa,
|
||||
"lavender": #b4befe,
|
||||
"text": #cdd6f4,
|
||||
"subtext1": #bac2de,
|
||||
"subtext0": #a6adc8,
|
||||
"overlay2": #9399b2,
|
||||
"overlay1": #7f849c,
|
||||
"overlay0": #6c7086,
|
||||
"surface2": #585b70,
|
||||
"surface1": #45475a,
|
||||
"surface0": #313244,
|
||||
"base": #1e1e2e,
|
||||
"mantle": #181825,
|
||||
"crust": #11111b,
|
||||
),
|
||||
"macchiato": (
|
||||
"rosewater": #f4dbd6,
|
||||
"flamingo": #f0c6c6,
|
||||
"pink": #f5bde6,
|
||||
"mauve": #c6a0f6,
|
||||
"red": #ed8796,
|
||||
"maroon": #ee99a0,
|
||||
"peach": #f5a97f,
|
||||
"yellow": #eed49f,
|
||||
"green": #a6da95,
|
||||
"teal": #8bd5ca,
|
||||
"sky": #91d7e3,
|
||||
"sapphire": #7dc4e4,
|
||||
"blue": #8aadf4,
|
||||
"lavender": #b7bdf8,
|
||||
"text": #cad3f5,
|
||||
"subtext1": #b8c0e0,
|
||||
"subtext0": #a5adcb,
|
||||
"overlay2": #939ab7,
|
||||
"overlay1": #8087a2,
|
||||
"overlay0": #6e738d,
|
||||
"surface2": #5b6078,
|
||||
"surface1": #494d64,
|
||||
"surface0": #363a4f,
|
||||
"base": #24273a,
|
||||
"mantle": #1e2030,
|
||||
"crust": #181926,
|
||||
),
|
||||
"frappe": (
|
||||
"rosewater": #f2d5cf,
|
||||
"flamingo": #eebebe,
|
||||
"pink": #f4b8e4,
|
||||
"mauve": #ca9ee6,
|
||||
"red": #e78284,
|
||||
"maroon": #ea999c,
|
||||
"peach": #ef9f76,
|
||||
"yellow": #e5c890,
|
||||
"green": #a6d189,
|
||||
"teal": #81c8be,
|
||||
"sky": #99d1db,
|
||||
"sapphire": #85c1dc,
|
||||
"blue": #8caaee,
|
||||
"lavender": #babbf1,
|
||||
"text": #c6d0f5,
|
||||
"subtext1": #b5bfe2,
|
||||
"subtext0": #a5adce,
|
||||
"overlay2": #949cbb,
|
||||
"overlay1": #838ba7,
|
||||
"overlay0": #737994,
|
||||
"surface2": #626880,
|
||||
"surface1": #51576d,
|
||||
"surface0": #414559,
|
||||
"base": #303446,
|
||||
"mantle": #292c3c,
|
||||
"crust": #232634,
|
||||
),
|
||||
"latte": (
|
||||
"rosewater": #dc8a78,
|
||||
"flamingo": #dd7878,
|
||||
"pink": #ea76cb,
|
||||
"mauve": #8839ef,
|
||||
"red": #d20f39,
|
||||
"maroon": #e64553,
|
||||
"peach": #fe640b,
|
||||
"yellow": #df8e1d,
|
||||
"green": #40a02b,
|
||||
"teal": #179299,
|
||||
"sky": #04a5e5,
|
||||
"sapphire": #209fb5,
|
||||
"blue": #1e66f5,
|
||||
"lavender": #7287fd,
|
||||
"text": #4c4f69,
|
||||
"subtext1": #5c5f77,
|
||||
"subtext0": #6c6f85,
|
||||
"overlay2": #7c7f93,
|
||||
"overlay1": #8c8fa1,
|
||||
"overlay0": #9ca0b0,
|
||||
"surface2": #acb0be,
|
||||
"surface1": #bcc0cc,
|
||||
"surface0": #ccd0da,
|
||||
"crust": #dce0e8,
|
||||
"mantle": #e6e9ef,
|
||||
"base": #eff1f5,
|
||||
)
|
||||
)
|
||||
Loading…
Reference in a new issue