aiden
/
gitea-lugit-theme
mirror of https://github.com/lucas-labs/gitea-lugit-theme
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ code highlighting styles

Browse Source
master
Lucas Colombo 1 month ago
parent 44a25e5c29
commit 701e67c177
10 changed files with 1007 additions and 445 deletions
Show Stats Download Patch File Download Diff File

7
src/themes/scss/theme/index.scss
Unescape Escape View File

@ -11,7 +11,12 @@
@include components.editor; // github-style (kinda) markdown editor in comments, issues, etc. @include components.editor; // github-style (kinda) markdown editor in comments, issues, etc.
@include components.menu; // github-style dropdown menus @include components.menu; // github-style dropdown menus
// modules // code highlighting
@include modules.chroma; // syntax highlighting
@include modules.codemirror; // code editor
@include modules.monaco; // vscode-like code editor
// customized pages
@include modules.repo; // repo page @include modules.repo; // repo page
@include modules.issues; // issues page @include modules.issues; // issues page
} }

304
src/themes/scss/theme/modules/_chroma.scss
Unescape Escape View File

@ -0,0 +1,304 @@
@use '@lucas-labs/lui-micro/color' as color;
@use '@lucas-labs/lui-micro/var' as var;
@mixin chroma {
.chroma .code-inner{
font: 14px var.get('code-font-family');
}
/* NameBuiltinPseudo */
.chroma .bp {
color: color.get('palette/orange/base');
}
/* Comment */
.chroma .c {
color: color.get('elevated/7');
}
/* CommentSingle */
.chroma .c1 {
color: color.get('elevated/7');
}
/* CommentHashbang */
.chroma .ch {
color: color.get('elevated/7');
}
/* CommentMultiline */
.chroma .cm {
color: color.get('elevated/7');
}
/* CommentPreproc */
.chroma .cp {
color: color.get('palette/blue/base');
}
/* CommentPreprocFile */
.chroma .cpf {
color: color.get('palette/blue/base');
}
/* CommentSpecial */
.chroma .cs {
color: color.get('elevated/7');
}
/* LiteralStringDelimiter */
.chroma .dl {
color: color.get('palette/blue/base');
}
/* NameFunctionMagic */
.chroma .fm {
}
/* Generic */
.chroma .g {
}
/* GenericDeleted */
.chroma .gd {
color: color.get('theme');
background-color: rgba(#{color.get('palette/red/base', 'rgb')}, 0.15);
}
/* GenericEmph */
.chroma .ge {
font-style: italic;
}
/* GenericHeading */
.chroma .gh {
color: color.get('palette/teal/base');
}
/* GenericInserted */
.chroma .gi {
color: color.get('theme');
background-color: rgba(#{color.get('palette/green/base', 'rgb')}, 0.15);
}
/* GenericUnderline */
.chroma .gl {
}
/* GenericOutput */
.chroma .go {
color: color.get('palette/orange/base');
}
/* GenericPrompt */
.chroma .gp {
color: color.get('elevated/7');
font-weight: bold;
}
/* GenericError */
.chroma .gr {
color: color.get('palette/brown/base');
}
/* GenericStrong */
.chroma .gs {
font-weight: bold;
}
/* GenericTraceback */
.chroma .gt {
color: color.get('palette/brown/base');
}
/* GenericSubheading */
.chroma .gu {
color: color.get('palette/teal/base');
}
/* LiteralNumberIntegerLong */
.chroma .il {
color: color.get('palette/orange/base');
}
/* Keyword */
.chroma .k {
color: color.get('palette/purple/base');
}
/* KeywordConstant */
.chroma .kc {
color: color.get('palette/yellow/base');
}
/* KeywordDeclaration */
.chroma .kd {
color: color.get('palette/purple/base');
}
/* KeywordNamespace */
.chroma .kn {
color: color.get('palette/yellow/base');
}
/* KeywordPseudo */
.chroma .kp {
color: color.get('palette/purple/base');
font-weight: bold;
}
/* KeywordReserved */
.chroma .kr {
color: color.get('palette/purple/base');
}
/* KeywordType */
.chroma .kt {
color: color.get('palette/yellow/base');
}
/* Literal */
.chroma .l {
}
/* LiteralDate */
.chroma .ld {
}
/* LiteralNumber */
.chroma .m {
color: color.get('palette/orange/base');
}
/* LiteralNumberBin */
.chroma .mb {
color: color.get('palette/orange/base');
}
/* LiteralNumberFloat */
.chroma .mf {
color: color.get('palette/orange/base');
}
/* LiteralNumberHex */
.chroma .mh {
color: color.get('palette/orange/base');
}
/* LiteralNumberInteger */
.chroma .mi {
color: color.get('palette/orange/base');
}
/* LiteralNumberOct */
.chroma .mo {
color: color.get('palette/orange/base');
}
/* Name */
.chroma .n {
color: color.get('palette/violet/base');
}
/* NameAttribute */
.chroma .na {
color: color.get('palette/yellow/base');
}
/* NameBuiltin */
.chroma .nb {
color: color.get('palette/orange/base');
}
/* NameClass */
.chroma .nc {
color: color.get('palette/yellow/base');
}
/* NameDecorator */
.chroma .nd {
color: color.get('palette/pink/base');
}
/* NameException */
.chroma .ne {
color: color.get('palette/brown/base');
}
/* NameFunction */
.chroma .nf {
color: color.get('palette/blue/base');
}
/* NameEntity */
.chroma .ni {
color: color.get('palette/pink/base');
}
/* NameLabel */
.chroma .nl {
color: color.get('palette/yellow/base');
}
/* NameNamespace */
.chroma .nn {
color: color.get('palette/yellow/base');
}
/* NameConstant */
.chroma .no {
color: color.get('palette/yellow/base');
}
/* NameTag */
.chroma .nt {
color: color.get('palette/purple/base');
}
/* NameVariable */
.chroma .nv {
color: color.get('palette/orange/base');
}
/* NameOther */
.chroma .nx {
color: color.get('palette/orange/base');
}
/* Operator */
.chroma .o {
color: color.get('palette/teal/base');
}
/* OperatorWord */
.chroma .ow {
color: color.get('palette/teal/base');
font-weight: bold;
}
/* Punctuation */
.chroma .p {
color: color.get('elevated/9');
}
/* NameProperty */
.chroma .py {
}
/* LiteralString */
.chroma .s {
color: color.get('palette/green/base');
}
/* LiteralStringSingle */
.chroma .s1 {
color: color.get('palette/green/base');
}
/* LiteralStringDouble */
.chroma .s2 {
color: color.get('palette/green/base');
}
/* LiteralStringAffix */
.chroma .sa {
color: color.get('palette/green/base');
}
/* LiteralStringBacktick */
.chroma .sb {
color: color.get('palette/green/base');
}
/* LiteralStringChar */
.chroma .sc {
color: color.get('palette/green/base');
}
/* LiteralStringDoc */
.chroma .sd {
color: color.get('palette/green/base');
}
/* LiteralStringEscape */
.chroma .se {
color: color.get('palette/blue/base');
}
/* LiteralStringHeredoc */
.chroma .sh {
color: color.get('palette/green/base');
}
/* LiteralStringInterpol */
.chroma .si {
color: color.get('palette/green/base');
}
/* LiteralStringRegex */
.chroma .sr {
color: color.get('palette/blue/base');
}
/* LiteralStringSymbol */
.chroma .ss {
color: color.get('palette/green/base');
}
/* LiteralStringOther */
.chroma .sx {
color: color.get('palette/green/base');
}
/* NameVariableClass */
.chroma .vc {
color: color.get('palette/yellow/base');
}
/* NameVariableGlobal */
.chroma .vg {
color: color.get('palette/orange/base');
}
/* NameVariableInstance */
.chroma .vi {
color: color.get('palette/yellow/base');
}
/* NameVariableMagic */
.chroma .vm {
}
/* TextWhitespace */
.chroma .w {
color: color.get('elevated/4');
}
}

95
src/themes/scss/theme/modules/_codemirror.scss
Unescape Escape View File

@ -0,0 +1,95 @@
@use '@lucas-labs/lui-micro/color' as color;
@mixin codemirror {
.CodeMirror,
.CodeMirror.cm-s-default,
.CodeMirror.cm-s-paper {
.cm-property {
color: color.get('text')
}
.cm-header {
color: color.get('text')
}
.cm-quote {
color: color.get('palette/green/base')
}
.cm-keyword {
color: color.get('palette/purple/base');
}
.cm-atom {
color: color.get('palette/red/base');
}
.cm-number {
color: color.get('palette/orange/base');
}
.cm-def {
color: color.get('text')
}
.cm-variable-2 {
color: color.get('palette/blue/base');
}
.cm-variable-3 {
color: color.get('palette/teal/base');
}
.cm-comment {
color: color.get('elevation/6')
}
.cm-string {
color: color.get('palette/green/base')
}
.cm-string-2 {
color: color.get('palette/green/base')
}
.cm-meta {
color: color.get('palette/orange/base');
}
.cm-qualifier {
color: color.get('palette/orange/base');
}
.cm-builtin {
color: color.get('palette/orange/base');
}
.cm-bracket {
color: color.get('text')
}
.cm-tag {
color: color.get('palette/yellow/base');
}
.cm-attribute {
color: color.get('palette/yellow/base');
}
.cm-hr {
color: color.get('elevation/9');
}
.cm-url {
color: color.get('palette/blue/base');
}
.cm-link {
color: color.get('palette/blue/base');
}
.cm-error {
color: color.get('palette/red/base');
}
}
}

155
src/themes/scss/theme/modules/_monaco.scss
Unescape Escape View File

@ -0,0 +1,155 @@
@use '@lucas-labs/lui-micro/color' as color;
@mixin monaco {
$surface0: #{color.get('elevation/4')};
$subtext0: #{color.get('elevation/10')};
$overlay2: #{color.get('elevation/9')};
$mantle: #{color.get('elevation/0')};
$base: #{color.get('elevation/3')};
$accent: #{color.get('primary/base')};
$text: #{color.get('text')};
$mauve: #{color.get('palette/purple/base')};
$peach: #{color.get('palette/orange/base')};
$teal: #{color.get('palette/teal/base')};
$green: #{color.get('palette/green/base')};
$blue: #{color.get('palette/blue/base')};
$pink: #{color.get('palette/pink/base')};
.monaco-editor {
--vscode-editor-background: #{$mantle} !important;
--vscode-editorGutter-background: #{$mantle} !important;
// selected text
.selected-text {
background-color: $surface0 !important;
}
// line numbers
.margin-view-overlays .line-numbers {
color: $subtext0 !important;
}
.line-numbers.active-line-number {
color: $accent !important;
}
// current / cursor line
.view-overlays .current-line,
.margin-view-overlays .current-line-margin {
background-color: #{color.get('elevation/2')} !important;
}
// Note: all of the hotpink stuff is there so it's easily visible, since these editor scope mappings are a mess
// plaintext
.mtk1 {
color: $text !important;
}
.mtk2 {
color: #ff69b4 !important;
}
// decorators
.mtk3 {
color: $peach !important;
}
// shell arguments
.mtk4 {
color: $teal !important;
}
// css constants & pre-defineds
.mtk5 {
color: $text !important;
}
// keywords
.mtk6 {
color: $mauve !important;
}
// numbers
.mtk7 {
color: $peach !important;
}
// comments
.mtk8 {
color: $overlay2 !important;
}
// sometimes a keyword, apparently
.mtk9 {
color: $mauve !important;
}
// braces, brackets, parentheses
.mtk10 {
color: $subtext0 !important;
}
// arrow brackets & equal signs in HTML
.mtk11 {
color: $teal !important;
}
// @ sign in javascript ¯\_(ツ)_/¯
.mtk12 {
color: $teal !important;
}
.mtk13 {
color: #ff69b4 !important;
}
.mtk14 {
color: #ff69b4 !important;
}
// regex, css classnames, and HTML keywords (huh)
.mtk15 {
color: $mauve !important;
}
// shebangs
.mtk16 {
color: $overlay2 !important;
}
.mtk17 {
color: #ff69b4 !important;
}
.mtk18 {
color: #ff69b4 !important;
}
// glob operator i guess
.mtk19 {
color: $teal !important;
}
.mtk20 {
color: #ff69b4 !important;
}
// strings
.mtk21 {
color: $green !important;
}
.mtk22 {
color: #ff69b4 !important;
}
// functions
.mtk23 {
color: $blue !important;
}
// shell variables
.mtk24 {
color: $peach !important;
}
// weird variables
.mtk25 {
color: $pink !important;
}
// .bracket-highlighting-0 {
// color: color.mix($text, $red, 40%) !important;
// }
// .bracket-highlighting-1 {
// color: color.mix($text, $peach, 40%) !important;
// }
// .bracket-highlighting-2 {
// color: color.mix($text, $yellow, 40%) !important;
// }
// .bracket-highlighting-3 {
// color: color.mix($text, $green, 40%) !important;
// }
// .bracket-highlighting-4 {
// color: color.mix($text, $blue, 40%) !important;
// }
// .bracket-highlighting-5 {
// color: color.mix($text, $mauve, 40%) !important;
// }
}
}

3
src/themes/scss/theme/modules/index.scss
Unescape Escape View File

@ -1,2 +1,5 @@
@forward './repo'; @forward './repo';
@forward './issues'; @forward './issues';
@forward './chroma';
@forward './codemirror';
@forward './monaco';
Write Preview
Loading…
Cancel
Save