156 lines
4.2 KiB
SCSS
156 lines
4.2 KiB
SCSS
@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;
|
|
// }
|
|
}
|
|
}
|