feat: ✨ monaco editor and other improvements
Lucas Colombo
12 months ago
parent
4bee2a7f60
commit
67b639832e
@ -0,0 +1,155 @@
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin make-monaco-styles($is-dark: true) {
|
||||
$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('theme/sapphire/base')};
|
||||
$peach: #{color.get('theme/peach/base')};
|
||||
$teal: #{color.get('theme/teal/base')};
|
||||
$green: #{color.get('theme/green/base')};
|
||||
$blue: #{color.get('theme/blue/base')};
|
||||
$pink: #{color.get('theme/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;
|
||||
// }
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin apply-styles {
|
||||
.page-content.home {
|
||||
div.center {
|
||||
img {
|
||||
// background-color: color.get('primary/base');
|
||||
// border-radius: var.get('measure/4x');
|
||||
// padding: var.get('measure/1.25x');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin apply-styles() {
|
||||
.markup {
|
||||
table {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,13 @@
|
||||
@use './repo-header';
|
||||
@use './repo';
|
||||
@use './project';
|
||||
@use './home';
|
||||
@use './markup';
|
||||
|
||||
@mixin apply-custom-styles {
|
||||
@include repo-header.apply-styles();
|
||||
@include repo.apply-styles();
|
||||
@include project.apply-styles();
|
||||
@include home.apply-styles();
|
||||
@include markup.apply-styles();
|
||||
}
|
||||
Loading…
Reference in New Issue