mirror of
https://github.com/catppuccin/gitea.git
synced 2024-11-25 08:01:02 -05:00
feat: init
This commit is contained in:
winston
commit
438945465d
7 changed files with 756 additions and 0 deletions
296
theme/_chroma.scss
Normal file
296
theme/_chroma.scss
Normal file
|
|
@ -0,0 +1,296 @@
|
||||||
|
@use "sass:color";
|
||||||
|
|
||||||
|
/* NameBuiltinPseudo */
|
||||||
|
.chroma .bp {
|
||||||
|
color: $peach;
|
||||||
|
}
|
||||||
|
/* Comment */
|
||||||
|
.chroma .c {
|
||||||
|
color: $surface2;
|
||||||
|
}
|
||||||
|
/* CommentSingle */
|
||||||
|
.chroma .c1 {
|
||||||
|
color: $surface2;
|
||||||
|
}
|
||||||
|
/* CommentHashbang */
|
||||||
|
.chroma .ch {
|
||||||
|
color: $surface2;
|
||||||
|
}
|
||||||
|
/* CommentMultiline */
|
||||||
|
.chroma .cm {
|
||||||
|
color: $surface2;
|
||||||
|
}
|
||||||
|
/* CommentPreproc */
|
||||||
|
.chroma .cp {
|
||||||
|
color: $blue;
|
||||||
|
}
|
||||||
|
/* CommentPreprocFile */
|
||||||
|
.chroma .cpf {
|
||||||
|
color: $blue;
|
||||||
|
}
|
||||||
|
/* CommentSpecial */
|
||||||
|
.chroma .cs {
|
||||||
|
color: $surface2;
|
||||||
|
}
|
||||||
|
/* LiteralStringDelimiter */
|
||||||
|
.chroma .dl {
|
||||||
|
color: $blue;
|
||||||
|
}
|
||||||
|
/* NameFunctionMagic */
|
||||||
|
.chroma .fm {
|
||||||
|
}
|
||||||
|
/* Generic */
|
||||||
|
.chroma .g {
|
||||||
|
}
|
||||||
|
/* GenericDeleted */
|
||||||
|
.chroma .gd {
|
||||||
|
color: $text;
|
||||||
|
background-color: color.change($red, $alpha: 0.15);
|
||||||
|
}
|
||||||
|
/* GenericEmph */
|
||||||
|
.chroma .ge {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
/* GenericHeading */
|
||||||
|
.chroma .gh {
|
||||||
|
color: $sky;
|
||||||
|
}
|
||||||
|
/* GenericInserted */
|
||||||
|
.chroma .gi {
|
||||||
|
color: $text;
|
||||||
|
background-color: color.change($green, $alpha: 0.15);
|
||||||
|
}
|
||||||
|
/* GenericUnderline */
|
||||||
|
.chroma .gl {
|
||||||
|
}
|
||||||
|
/* GenericOutput */
|
||||||
|
.chroma .go {
|
||||||
|
color: $peach;
|
||||||
|
}
|
||||||
|
/* GenericPrompt */
|
||||||
|
.chroma .gp {
|
||||||
|
color: $overlay0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
/* GenericError */
|
||||||
|
.chroma .gr {
|
||||||
|
color: $maroon;
|
||||||
|
}
|
||||||
|
/* GenericStrong */
|
||||||
|
.chroma .gs {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
/* GenericTraceback */
|
||||||
|
.chroma .gt {
|
||||||
|
color: $maroon;
|
||||||
|
}
|
||||||
|
/* GenericSubheading */
|
||||||
|
.chroma .gu {
|
||||||
|
color: $sky;
|
||||||
|
}
|
||||||
|
/* LiteralNumberIntegerLong */
|
||||||
|
.chroma .il {
|
||||||
|
color: $peach;
|
||||||
|
}
|
||||||
|
/* Keyword */
|
||||||
|
.chroma .k {
|
||||||
|
color: $mauve;
|
||||||
|
}
|
||||||
|
/* KeywordConstant */
|
||||||
|
.chroma .kc {
|
||||||
|
color: $yellow;
|
||||||
|
}
|
||||||
|
/* KeywordDeclaration */
|
||||||
|
.chroma .kd {
|
||||||
|
color: $mauve;
|
||||||
|
}
|
||||||
|
/* KeywordNamespace */
|
||||||
|
.chroma .kn {
|
||||||
|
color: $yellow;
|
||||||
|
}
|
||||||
|
/* KeywordPseudo */
|
||||||
|
.chroma .kp {
|
||||||
|
color: $mauve;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
/* KeywordReserved */
|
||||||
|
.chroma .kr {
|
||||||
|
color: $mauve;
|
||||||
|
}
|
||||||
|
/* KeywordType */
|
||||||
|
.chroma .kt {
|
||||||
|
color: $yellow;
|
||||||
|
}
|
||||||
|
/* Literal */
|
||||||
|
.chroma .l {
|
||||||
|
}
|
||||||
|
/* LiteralDate */
|
||||||
|
.chroma .ld {
|
||||||
|
}
|
||||||
|
/* LiteralNumber */
|
||||||
|
.chroma .m {
|
||||||
|
color: $peach;
|
||||||
|
}
|
||||||
|
/* LiteralNumberBin */
|
||||||
|
.chroma .mb {
|
||||||
|
color: $peach;
|
||||||
|
}
|
||||||
|
/* LiteralNumberFloat */
|
||||||
|
.chroma .mf {
|
||||||
|
color: $peach;
|
||||||
|
}
|
||||||
|
/* LiteralNumberHex */
|
||||||
|
.chroma .mh {
|
||||||
|
color: $peach;
|
||||||
|
}
|
||||||
|
/* LiteralNumberInteger */
|
||||||
|
.chroma .mi {
|
||||||
|
color: $peach;
|
||||||
|
}
|
||||||
|
/* LiteralNumberOct */
|
||||||
|
.chroma .mo {
|
||||||
|
color: $peach;
|
||||||
|
}
|
||||||
|
/* Name */
|
||||||
|
.chroma .n {
|
||||||
|
color: $lavender;
|
||||||
|
}
|
||||||
|
/* NameAttribute */
|
||||||
|
.chroma .na {
|
||||||
|
color: $yellow;
|
||||||
|
}
|
||||||
|
/* NameBuiltin */
|
||||||
|
.chroma .nb {
|
||||||
|
color: $peach;
|
||||||
|
}
|
||||||
|
/* NameClass */
|
||||||
|
.chroma .nc {
|
||||||
|
color: $yellow;
|
||||||
|
}
|
||||||
|
/* NameDecorator */
|
||||||
|
.chroma .nd {
|
||||||
|
color: $pink;
|
||||||
|
}
|
||||||
|
/* NameException */
|
||||||
|
.chroma .ne {
|
||||||
|
color: $maroon;
|
||||||
|
}
|
||||||
|
/* NameFunction */
|
||||||
|
.chroma .nf {
|
||||||
|
color: $sky;
|
||||||
|
}
|
||||||
|
/* NameEntity */
|
||||||
|
.chroma .ni {
|
||||||
|
color: $pink;
|
||||||
|
}
|
||||||
|
/* NameLabel */
|
||||||
|
.chroma .nl {
|
||||||
|
color: $yellow;
|
||||||
|
}
|
||||||
|
/* NameNamespace */
|
||||||
|
.chroma .nn {
|
||||||
|
color: $yellow;
|
||||||
|
}
|
||||||
|
/* NameConstant */
|
||||||
|
.chroma .no {
|
||||||
|
color: $yellow;
|
||||||
|
}
|
||||||
|
/* NameTag */
|
||||||
|
.chroma .nt {
|
||||||
|
color: $mauve;
|
||||||
|
}
|
||||||
|
/* NameVariable */
|
||||||
|
.chroma .nv {
|
||||||
|
color: $peach;
|
||||||
|
}
|
||||||
|
/* NameOther */
|
||||||
|
.chroma .nx {
|
||||||
|
color: $peach;
|
||||||
|
}
|
||||||
|
/* Operator */
|
||||||
|
.chroma .o {
|
||||||
|
color: $sky;
|
||||||
|
}
|
||||||
|
/* OperatorWord */
|
||||||
|
.chroma .ow {
|
||||||
|
color: $sky;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
/* Punctuation */
|
||||||
|
.chroma .p {
|
||||||
|
color: $text;
|
||||||
|
}
|
||||||
|
/* NameProperty */
|
||||||
|
.chroma .py {
|
||||||
|
}
|
||||||
|
/* LiteralString */
|
||||||
|
.chroma .s {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
/* LiteralStringSingle */
|
||||||
|
.chroma .s1 {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
/* LiteralStringDouble */
|
||||||
|
.chroma .s2 {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
/* LiteralStringAffix */
|
||||||
|
.chroma .sa {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
/* LiteralStringBacktick */
|
||||||
|
.chroma .sb {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
/* LiteralStringChar */
|
||||||
|
.chroma .sc {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
/* LiteralStringDoc */
|
||||||
|
.chroma .sd {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
/* LiteralStringEscape */
|
||||||
|
.chroma .se {
|
||||||
|
color: $blue;
|
||||||
|
}
|
||||||
|
/* LiteralStringHeredoc */
|
||||||
|
.chroma .sh {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
/* LiteralStringInterpol */
|
||||||
|
.chroma .si {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
/* LiteralStringRegex */
|
||||||
|
.chroma .sr {
|
||||||
|
color: $blue;
|
||||||
|
}
|
||||||
|
/* LiteralStringSymbol */
|
||||||
|
.chroma .ss {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
/* LiteralStringOther */
|
||||||
|
.chroma .sx {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
/* NameVariableClass */
|
||||||
|
.chroma .vc {
|
||||||
|
color: $yellow;
|
||||||
|
}
|
||||||
|
/* NameVariableGlobal */
|
||||||
|
.chroma .vg {
|
||||||
|
color: $peach;
|
||||||
|
}
|
||||||
|
/* NameVariableInstance */
|
||||||
|
.chroma .vi {
|
||||||
|
color: $yellow;
|
||||||
|
}
|
||||||
|
/* NameVariableMagic */
|
||||||
|
.chroma .vm {
|
||||||
|
}
|
||||||
|
/* TextWhitespace */
|
||||||
|
.chroma .w {
|
||||||
|
color: $surface0;
|
||||||
|
}
|
||||||
114
theme/catppuccin/_catppuccin.scss
Normal file
114
theme/catppuccin/_catppuccin.scss
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
$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,
|
||||||
|
)
|
||||||
|
)
|
||||||
26
theme/catppuccin/_frappe.scss
Normal file
26
theme/catppuccin/_frappe.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
$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;
|
||||||
26
theme/catppuccin/_latte.scss
Normal file
26
theme/catppuccin/_latte.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
$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;
|
||||||
26
theme/catppuccin/_macchiato.scss
Normal file
26
theme/catppuccin/_macchiato.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
$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;
|
||||||
26
theme/catppuccin/_mocha.scss
Normal file
26
theme/catppuccin/_mocha.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
$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;
|
||||||
242
theme/theme-catppuccin-mocha.scss
Normal file
242
theme/theme-catppuccin-mocha.scss
Normal file
|
|
@ -0,0 +1,242 @@
|
||||||
|
@use "sass:color";
|
||||||
|
@import "catppuccin/mocha";
|
||||||
|
|
||||||
|
$accent: $mauve;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
color-scheme: dark;
|
||||||
|
accent-color: #{$accent};
|
||||||
|
--is-dark-theme: true;
|
||||||
|
|
||||||
|
--color-primary: #{$accent};
|
||||||
|
--color-primary-contrast: #{$crust};
|
||||||
|
|
||||||
|
--color-primary-dark-1: #{color.adjust($accent, $lightness: -3%)};
|
||||||
|
--color-primary-dark-2: #{color.adjust($accent, $lightness: -6%)};
|
||||||
|
--color-primary-dark-3: #{color.adjust($accent, $lightness: -9%)};
|
||||||
|
--color-primary-dark-4: #{color.adjust($accent, $lightness: -12%)};
|
||||||
|
--color-primary-dark-5: #{color.adjust($accent, $lightness: -15%)};
|
||||||
|
--color-primary-dark-6: #{color.adjust($accent, $lightness: -18%)};
|
||||||
|
--color-primary-dark-7: #{color.adjust($accent, $lightness: -21%)};
|
||||||
|
|
||||||
|
--color-primary-light-1: #{color.adjust($accent, $lightness: 3%)};
|
||||||
|
--color-primary-light-2: #{color.adjust($accent, $lightness: 6%)};
|
||||||
|
--color-primary-light-3: #{color.adjust($accent, $lightness: 9%)};
|
||||||
|
--color-primary-light-4: #{color.adjust($accent, $lightness: 12%)};
|
||||||
|
--color-primary-light-5: #{color.adjust($accent, $lightness: 15%)};
|
||||||
|
--color-primary-light-6: #{color.adjust($accent, $lightness: 18%)};
|
||||||
|
--color-primary-light-7: #{color.adjust($accent, $lightness: 21%)};
|
||||||
|
|
||||||
|
--color-primary-alpha-10: #{color.change($accent, $alpha: 0.1)};
|
||||||
|
--color-primary-alpha-20: #{color.change($accent, $alpha: 0.2)};
|
||||||
|
--color-primary-alpha-30: #{color.change($accent, $alpha: 0.3)};
|
||||||
|
--color-primary-alpha-40: #{color.change($accent, $alpha: 0.4)};
|
||||||
|
--color-primary-alpha-50: #{color.change($accent, $alpha: 0.5)};
|
||||||
|
--color-primary-alpha-60: #{color.change($accent, $alpha: 0.6)};
|
||||||
|
--color-primary-alpha-70: #{color.change($accent, $alpha: 0.7)};
|
||||||
|
--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-dark-1: #{color.adjust($surface1, $lightness: 5%)};
|
||||||
|
--color-secondary-dark-2: #{color.adjust($surface1, $lightness: 10%)};
|
||||||
|
--color-secondary-dark-3: #{color.adjust($surface1, $lightness: 15%)};
|
||||||
|
--color-secondary-dark-4: #{color.adjust($surface1, $lightness: 20%)};
|
||||||
|
--color-secondary-dark-5: #{color.adjust($surface1, $lightness: 25%)};
|
||||||
|
--color-secondary-dark-6: #{color.adjust($surface1, $lightness: 30%)};
|
||||||
|
--color-secondary-dark-7: #{color.adjust($surface1, $lightness: 35%)};
|
||||||
|
--color-secondary-dark-8: #{color.adjust($surface1, $lightness: 40%)};
|
||||||
|
--color-secondary-dark-9: #{color.adjust($surface1, $lightness: 45%)};
|
||||||
|
--color-secondary-dark-10: #{color.adjust($surface1, $lightness: 50%)};
|
||||||
|
--color-secondary-dark-11: #{color.adjust($surface1, $lightness: 55%)};
|
||||||
|
--color-secondary-dark-12: #{color.adjust($surface1, $lightness: 60%)};
|
||||||
|
--color-secondary-dark-13: #{color.adjust($surface1, $lightness: 65%)};
|
||||||
|
|
||||||
|
--color-secondary-light-1: #{color.adjust($surface1, $lightness: -5%)};
|
||||||
|
--color-secondary-light-2: #{color.adjust($surface1, $lightness: -10%)};
|
||||||
|
--color-secondary-light-3: #{color.adjust($surface1, $lightness: -15%)};
|
||||||
|
--color-secondary-light-4: #{color.adjust($surface1, $lightness: -20%)};
|
||||||
|
|
||||||
|
--color-secondary-alpha-10: #{color.change($surface1, $alpha: 0.1)};
|
||||||
|
--color-secondary-alpha-20: #{color.change($surface1, $alpha: 0.2)};
|
||||||
|
--color-secondary-alpha-30: #{color.change($surface1, $alpha: 0.3)};
|
||||||
|
--color-secondary-alpha-40: #{color.change($surface1, $alpha: 0.4)};
|
||||||
|
--color-secondary-alpha-50: #{color.change($surface1, $alpha: 0.5)};
|
||||||
|
--color-secondary-alpha-60: #{color.change($surface1, $alpha: 0.6)};
|
||||||
|
--color-secondary-alpha-70: #{color.change($surface1, $alpha: 0.7)};
|
||||||
|
--color-secondary-alpha-80: #{color.change($surface1, $alpha: 0.8)};
|
||||||
|
--color-secondary-alpha-90: #{color.change($surface1, $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: #{$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%)};
|
||||||
|
|
||||||
|
/* other colors */
|
||||||
|
--color-gold: #{$rosewater};
|
||||||
|
--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.15)};
|
||||||
|
--color-diff-moved-row-bg: #{color.change($yellow, $alpha: 0.15)};
|
||||||
|
--color-diff-added-row-bg: #{color.change($green, $alpha: 0.15)};
|
||||||
|
--color-diff-removed-row-border: #{color.change($red, $alpha: 0.15)};
|
||||||
|
--color-diff-moved-row-border: #{color.change($yellow, $alpha: 0.15)};
|
||||||
|
--color-diff-added-row-border: #{color.change($green, $alpha: 0.15)};
|
||||||
|
--color-diff-inactive: #{$overlay2};
|
||||||
|
--color-error-border: #{$red};
|
||||||
|
--color-error-bg: #{$red};
|
||||||
|
--color-error-bg-active: #{color.adjust($red, $lightness: -5%)};
|
||||||
|
--color-error-bg-hover: #{color.adjust($red, $lightness: -10%)};
|
||||||
|
--color-error-text: #{$crust};
|
||||||
|
--color-success-border: #{color.adjust($green, $lightness: -10%)};
|
||||||
|
--color-success-bg: #{$green};
|
||||||
|
--color-success-text: #{$crust};
|
||||||
|
--color-warning-border: #{color.adjust($yellow, $lightness: -10%)};
|
||||||
|
--color-warning-bg: #{$yellow};
|
||||||
|
--color-warning-text: #{$crust};
|
||||||
|
--color-info-border: #{color.adjust($blue, $lightness: -10%)};
|
||||||
|
--color-info-bg: #{$crust};
|
||||||
|
--color-info-text: #{$crust};
|
||||||
|
--color-red-badge: #{color.adjust($red, $lightness: -10%)};
|
||||||
|
--color-red-badge-bg: #{$crust};
|
||||||
|
--color-red-badge-hover-bg: #{color.adjust($red, $lightness: -5%)};
|
||||||
|
--color-green-badge: #{$green};
|
||||||
|
--color-green-badge-bg: #{$crust};
|
||||||
|
--color-green-badge-hover-bg: #{color.adjust($green, $lightness: -5%)};
|
||||||
|
--color-yellow-badge: #{$yellow};
|
||||||
|
--color-yellow-badge-bg: #{$crust};
|
||||||
|
--color-yellow-badge-hover-bg: #{color.adjust($yellow, $lightness: -5%)};
|
||||||
|
--color-orange-badge: #{$peach};
|
||||||
|
--color-orange-badge-bg: #{$crust};
|
||||||
|
--color-orange-badge-hover-bg: #{color.adjust($peach, $lightness: -5%)};
|
||||||
|
--color-git: #{$peach};
|
||||||
|
|
||||||
|
/* target-based colors */
|
||||||
|
--color-body: #{$crust};
|
||||||
|
--color-box-header: #{$mantle};
|
||||||
|
--color-box-body: #{$base};
|
||||||
|
--color-box-body-highlight: #{$surface0};
|
||||||
|
--color-text-dark: #{$subtext0};
|
||||||
|
--color-text: #{$text};
|
||||||
|
--color-text-light: #{$subtext1};
|
||||||
|
--color-text-light-1: #{$subtext1};
|
||||||
|
--color-text-light-2: #{$subtext1};
|
||||||
|
--color-text-light-3: #{$subtext1};
|
||||||
|
--color-footer: #{$mantle};
|
||||||
|
--color-timeline: #{$surface0};
|
||||||
|
--color-input-text: #{$text};
|
||||||
|
--color-input-background: #{$surface0};
|
||||||
|
--color-input-toggle-background: #{$surface0};
|
||||||
|
--color-input-border: #{$surface1};
|
||||||
|
--color-input-border-hover: #{$surface2};
|
||||||
|
--color-navbar: #{$mantle};
|
||||||
|
--color-navbar-transparent: #{color.change($crust, $alpha: 0)};
|
||||||
|
--color-light: #{color.change($crust, $alpha: 0.1)};
|
||||||
|
--color-light-mimic-enabled: rgba(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
|
||||||
|
);
|
||||||
|
--color-light-border: #ffffff28;
|
||||||
|
--color-hover: #ffffff10;
|
||||||
|
--color-active: #{color.change($text, $alpha: 0.1)};
|
||||||
|
--color-menu: #{$surface0};
|
||||||
|
--color-card: #{$surface0};
|
||||||
|
--color-markup-table-row: #ffffff06;
|
||||||
|
--color-markup-code-block: #ffffff0d;
|
||||||
|
--color-button: #353846;
|
||||||
|
--color-code-bg: #{$base};
|
||||||
|
--color-code-sidebar-bg: #2e323e;
|
||||||
|
--color-shadow: #{color.change($crust, $alpha: 0.1)};
|
||||||
|
--color-secondary-bg: #2a2e3a;
|
||||||
|
--color-text-focus: #{$text};
|
||||||
|
--color-expand-button: #{$surface2};
|
||||||
|
--color-placeholder-text: #{$surface2};
|
||||||
|
--color-editor-line-highlight: var(--color-primary-light-5);
|
||||||
|
--color-project-board-bg: var(--color-secondary-light-2);
|
||||||
|
/* should ideally be --color-text-dark, see #15651 */
|
||||||
|
--color-caret: var(--color-text);
|
||||||
|
--color-reaction-bg: #ffffff12;
|
||||||
|
--color-reaction-active-bg: var(--color-primary-alpha-40);
|
||||||
|
--color-header-bar: #{$mantle};
|
||||||
|
--color-label-active-bg: #4c525e;
|
||||||
|
--color-accent: var(--color-primary-light-1);
|
||||||
|
--color-small-accent: var(--color-primary-light-5);
|
||||||
|
--color-active-line: #{$surface1};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* invert emojis that are hard to read otherwise */
|
||||||
|
.emoji[aria-label="check mark"],
|
||||||
|
.emoji[aria-label="currency exchange"],
|
||||||
|
.emoji[aria-label="TOP arrow"],
|
||||||
|
.emoji[aria-label="END arrow"],
|
||||||
|
.emoji[aria-label="ON! arrow"],
|
||||||
|
.emoji[aria-label="SOON arrow"],
|
||||||
|
.emoji[aria-label="heavy dollar sign"],
|
||||||
|
.emoji[aria-label="copyright"],
|
||||||
|
.emoji[aria-label="registered"],
|
||||||
|
.emoji[aria-label="trade mark"],
|
||||||
|
.emoji[aria-label="multiply"],
|
||||||
|
.emoji[aria-label="plus"],
|
||||||
|
.emoji[aria-label="minus"],
|
||||||
|
.emoji[aria-label="divide"],
|
||||||
|
.emoji[aria-label="curly loop"],
|
||||||
|
.emoji[aria-label="double curly loop"],
|
||||||
|
.emoji[aria-label="wavy dash"],
|
||||||
|
.emoji[aria-label="paw prints"],
|
||||||
|
.emoji[aria-label="musical note"],
|
||||||
|
.emoji[aria-label="musical notes"] {
|
||||||
|
filter: invert(100%) hue-rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.ui.ui.button:not(.inverted),
|
||||||
|
.ui.ui.ui.label:not(.inverted) {
|
||||||
|
&.primary,
|
||||||
|
&.green,
|
||||||
|
&.red,
|
||||||
|
&.teal {
|
||||||
|
color: $crust;
|
||||||
|
&:hover {
|
||||||
|
color: $base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.basic.modal {
|
||||||
|
background-color: $base;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: color.change($rosewater, $alpha: 0.3) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@import "chroma";
|
||||||
|
@import "../src/codemirror/dark";
|
||||||
Loading…
Reference in a new issue