feat: ✨ code highlighting styles
This commit is contained in:
Lucas Colombo
@ -1,89 +1,89 @@
|
||||
@use '@lucas-labs/lui-micro' as lui;
|
||||
@use './_utils/color-utils' as c;
|
||||
@use './theme' as theme;
|
||||
|
||||
$is-dark: true;
|
||||
$brand: #a6c6f7;
|
||||
|
||||
$colors: (
|
||||
primary: c.variants($brand),
|
||||
secondary: c.variants(#1e1d2f),
|
||||
text: #e6edf3,
|
||||
subtle: #abaaca, // same as elevation/10
|
||||
palette: (
|
||||
'red': c.variants(#f38ba8), // red
|
||||
'orange': c.variants(#fab387), // peach
|
||||
'yellow': c.variants(#f9e2af), // yellow
|
||||
'olive': c.variants(#e2f095),
|
||||
'green': c.variants(#00E676), // green
|
||||
'teal': c.variants(#94e2d5), // teal
|
||||
'blue': c.variants(#89b4fa), // blue
|
||||
'violet': c.variants(#b4befe), // lavender
|
||||
'purple': c.variants(#9b6bf5), // mauve
|
||||
'pink': c.variants(#f5c2e7), // pink
|
||||
'brown': c.variants(#f2cdcd), // flamingo
|
||||
'black': c.variants(#181825), // black
|
||||
'white': c.variants(#e6edf3), // white
|
||||
),
|
||||
elevation: (
|
||||
'1': #000000, // elevation/1
|
||||
'2': #040406, // elevation/2
|
||||
'3': #07070e, // elevation/3
|
||||
'4': #0c0c18, // elevation/4
|
||||
'5': #15142c, // elevation/5
|
||||
'6': #1e1d2f, // elevation/6
|
||||
'7': #2d2c3f, // elevation/7
|
||||
'8': #403f55, // elevation/8
|
||||
'9': #6d6c89, // elevation/9
|
||||
'10': #abaaca, // elevation/10
|
||||
'11': #c3c2e4, // elevation/11
|
||||
'12': #d3d2f0, // elevation/12
|
||||
)
|
||||
);
|
||||
|
||||
$variables: (
|
||||
'font-size': (
|
||||
'xs': .714rem,
|
||||
'sm': .857rem,
|
||||
'md': 1rem,
|
||||
'lg': 1.143rem,
|
||||
'xl': 1.286rem,
|
||||
),
|
||||
'font-family': '-apple-system, "Segoe UI", system-ui, "SF Pro Text", Inter, Roboto, "Helvetica Neue", Arial, sans-serif',
|
||||
'code-font-family': 'ui-monospace, SFMono-Regular, "Source Code Pro", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji)',
|
||||
'emoji-font-family': '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"',
|
||||
'measure': (
|
||||
'.25x': 4px,
|
||||
'.375x': 6px,
|
||||
'.5x': 8px,
|
||||
'.75x': 12px,
|
||||
'.875x': 14px,
|
||||
'1x': 16px,
|
||||
'1.25x': 20px,
|
||||
'1.5x': 24px,
|
||||
'2x': 32px,
|
||||
'2.5x': 40px,
|
||||
'3x': 48px,
|
||||
'4x': 64px,
|
||||
),
|
||||
'navbar-logo': (
|
||||
'width': 56px,
|
||||
'height': 20px,
|
||||
),
|
||||
'repo-home': (
|
||||
'sidebar-width': 296px,
|
||||
)
|
||||
);
|
||||
|
||||
// init lui-micro, css-vars only (no reboot, no basic)
|
||||
@include lui.init(
|
||||
$theme: (colors: $colors, variables: $variables),
|
||||
$options: (
|
||||
reboot: false,
|
||||
basic: false,
|
||||
fg-var-name: 'text',
|
||||
bg-var-name: 'elevation/1',
|
||||
),
|
||||
);
|
||||
|
||||
@use '@lucas-labs/lui-micro' as lui;
|
||||
@use './_utils/color-utils' as c;
|
||||
@use './theme' as theme;
|
||||
|
||||
$is-dark: true;
|
||||
$brand: #a6c6f7;
|
||||
|
||||
$colors: (
|
||||
primary: c.variants($brand),
|
||||
secondary: c.variants(#1e1d2f),
|
||||
text: #e6edf3,
|
||||
subtle: #abaaca, // same as elevation/10
|
||||
palette: (
|
||||
'red': c.variants(#f38ba8), // red
|
||||
'orange': c.variants(#fab387), // peach
|
||||
'yellow': c.variants(#f9e2af), // yellow
|
||||
'olive': c.variants(#e2f095),
|
||||
'green': c.variants(#00E676), // green
|
||||
'teal': c.variants(#94e2d5), // teal
|
||||
'blue': c.variants(#89b4fa), // blue
|
||||
'violet': c.variants(#b4befe), // lavender
|
||||
'purple': c.variants(#9b6bf5), // mauve
|
||||
'pink': c.variants(#f5c2e7), // pink
|
||||
'brown': c.variants(#f2cdcd), // flamingo
|
||||
'black': c.variants(#181825), // black
|
||||
'white': c.variants(#e6edf3), // white
|
||||
),
|
||||
elevation: (
|
||||
'1': #000000, // elevation/1
|
||||
'2': #040406, // elevation/2
|
||||
'3': #07070e, // elevation/3
|
||||
'4': #0c0c18, // elevation/4
|
||||
'5': #15142c, // elevation/5
|
||||
'6': #1e1d2f, // elevation/6
|
||||
'7': #2d2c3f, // elevation/7
|
||||
'8': #403f55, // elevation/8
|
||||
'9': #6d6c89, // elevation/9
|
||||
'10': #abaaca, // elevation/10
|
||||
'11': #c3c2e4, // elevation/11
|
||||
'12': #d3d2f0, // elevation/12
|
||||
)
|
||||
);
|
||||
|
||||
$variables: (
|
||||
'font-size': (
|
||||
'xs': .714rem,
|
||||
'sm': .857rem,
|
||||
'md': 1rem,
|
||||
'lg': 1.143rem,
|
||||
'xl': 1.286rem,
|
||||
),
|
||||
'font-family': '-apple-system, "Segoe UI", system-ui, "SF Pro Text", Inter, Roboto, "Helvetica Neue", Arial, sans-serif',
|
||||
'code-font-family': 'ui-monospace, SFMono-Regular, "Source Code Pro", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji)',
|
||||
'emoji-font-family': '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"',
|
||||
'measure': (
|
||||
'.25x': 4px,
|
||||
'.375x': 6px,
|
||||
'.5x': 8px,
|
||||
'.75x': 12px,
|
||||
'.875x': 14px,
|
||||
'1x': 16px,
|
||||
'1.25x': 20px,
|
||||
'1.5x': 24px,
|
||||
'2x': 32px,
|
||||
'2.5x': 40px,
|
||||
'3x': 48px,
|
||||
'4x': 64px,
|
||||
),
|
||||
'navbar-logo': (
|
||||
'width': 56px,
|
||||
'height': 20px,
|
||||
),
|
||||
'repo-home': (
|
||||
'sidebar-width': 296px,
|
||||
)
|
||||
);
|
||||
|
||||
// init lui-micro, css-vars only (no reboot, no basic)
|
||||
@include lui.init(
|
||||
$theme: (colors: $colors, variables: $variables),
|
||||
$options: (
|
||||
reboot: false,
|
||||
basic: false,
|
||||
fg-var-name: 'text',
|
||||
bg-var-name: 'elevation/1',
|
||||
),
|
||||
);
|
||||
|
||||
@include theme.make-theme($is-dark);
|
||||
@ -1,90 +1,90 @@
|
||||
// @use '@lucas-labs/lui-micro' as lui;
|
||||
// @use './utils/color-utils' as c;
|
||||
// @use './theme' as theme;
|
||||
|
||||
// $is-dark: false;
|
||||
|
||||
// $brand: #6296e2;
|
||||
|
||||
// $colors: (
|
||||
// theme: (
|
||||
// 'rosewater': c.variants(#dc8a78),
|
||||
// 'flamingo': c.variants(#dd7878),
|
||||
// 'pink': c.variants(#ea76cb),
|
||||
// 'mauve': c.variants(#8652e7),
|
||||
// 'red': c.variants(#d20f39),
|
||||
// 'maroon': c.variants(#e64553),
|
||||
// 'peach': c.variants(#fe640b),
|
||||
// 'yellow': c.variants(#df8e1d),
|
||||
// 'green': c.variants(#11752d),
|
||||
// 'teal': c.variants(#179299),
|
||||
// 'sky': c.variants(#04a5e5),
|
||||
// 'sapphire': c.variants(#209fb5),
|
||||
// 'blue': c.variants(#1e66f5),
|
||||
// 'lavender': c.variants(#7287fd),
|
||||
// 'black': c.variants(#181825),
|
||||
// 'white': c.variants(#e6edf3),
|
||||
// ),
|
||||
// text: #4c4f69,
|
||||
// primary: c.variants($brand),
|
||||
// secondary: c.variants(#999cc5),
|
||||
// elevation: (
|
||||
// '1': #dce0e8, // crust
|
||||
// '2': #e6e9ef, // mantle
|
||||
// '3': #eff1f5, // base
|
||||
// '4': #dcdfe7, // surface0
|
||||
// '5': #bcc0cc, // surface1
|
||||
// '6': #acb0be, // surface2
|
||||
// '7': #9ca0b0, // overlay0
|
||||
// '8': #8c8fa1, // overlay1
|
||||
// '9': #7c7f93, // overlay2
|
||||
// '10': #6c6f85, // subtext0
|
||||
// '11': #5c5f77, // subtext1
|
||||
// '12': #4c4f69, //
|
||||
// )
|
||||
// );
|
||||
|
||||
// // init lui-micro, css-vars only (no reboot, no basic)
|
||||
// @include lui.init(
|
||||
// $theme: (
|
||||
// colors: $colors,
|
||||
// variables: (
|
||||
// 'font-size': (
|
||||
// 'xs': .75rem,
|
||||
// 'sm': .875rem,
|
||||
// 'md': 1rem,
|
||||
// 'lg': 1.125rem,
|
||||
// 'xl': 1.25rem,
|
||||
// ),
|
||||
// 'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif',
|
||||
// 'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
|
||||
// 'measure': (
|
||||
// '.25x': 4px,
|
||||
// '.375x': 6px,
|
||||
// '.5x': 8px,
|
||||
// '.75x': 12px,
|
||||
// '1x': 16px,
|
||||
// '1.25x': 20px,
|
||||
// '1.5x': 24px,
|
||||
// '2x': 32px,
|
||||
// '2.5x': 40px,
|
||||
// '3x': 48px,
|
||||
// '4x': 64px,
|
||||
// ),
|
||||
// 'repo-home': (
|
||||
// 'sidebar-width': 296px,
|
||||
// )
|
||||
// ),
|
||||
// ),
|
||||
|
||||
// $options: (
|
||||
// reboot: false,
|
||||
// basic: false,
|
||||
// fg-var-name: 'text',
|
||||
// bg-var-name: 'elevation/1',
|
||||
// ),
|
||||
// );
|
||||
|
||||
// @include theme.make-theme(
|
||||
// $is-dark: $is-dark,
|
||||
// @use '@lucas-labs/lui-micro' as lui;
|
||||
// @use './utils/color-utils' as c;
|
||||
// @use './theme' as theme;
|
||||
|
||||
// $is-dark: false;
|
||||
|
||||
// $brand: #6296e2;
|
||||
|
||||
// $colors: (
|
||||
// theme: (
|
||||
// 'rosewater': c.variants(#dc8a78),
|
||||
// 'flamingo': c.variants(#dd7878),
|
||||
// 'pink': c.variants(#ea76cb),
|
||||
// 'mauve': c.variants(#8652e7),
|
||||
// 'red': c.variants(#d20f39),
|
||||
// 'maroon': c.variants(#e64553),
|
||||
// 'peach': c.variants(#fe640b),
|
||||
// 'yellow': c.variants(#df8e1d),
|
||||
// 'green': c.variants(#11752d),
|
||||
// 'teal': c.variants(#179299),
|
||||
// 'sky': c.variants(#04a5e5),
|
||||
// 'sapphire': c.variants(#209fb5),
|
||||
// 'blue': c.variants(#1e66f5),
|
||||
// 'lavender': c.variants(#7287fd),
|
||||
// 'black': c.variants(#181825),
|
||||
// 'white': c.variants(#e6edf3),
|
||||
// ),
|
||||
// text: #4c4f69,
|
||||
// primary: c.variants($brand),
|
||||
// secondary: c.variants(#999cc5),
|
||||
// elevation: (
|
||||
// '1': #dce0e8, // crust
|
||||
// '2': #e6e9ef, // mantle
|
||||
// '3': #eff1f5, // base
|
||||
// '4': #dcdfe7, // surface0
|
||||
// '5': #bcc0cc, // surface1
|
||||
// '6': #acb0be, // surface2
|
||||
// '7': #9ca0b0, // overlay0
|
||||
// '8': #8c8fa1, // overlay1
|
||||
// '9': #7c7f93, // overlay2
|
||||
// '10': #6c6f85, // subtext0
|
||||
// '11': #5c5f77, // subtext1
|
||||
// '12': #4c4f69, //
|
||||
// )
|
||||
// );
|
||||
|
||||
// // init lui-micro, css-vars only (no reboot, no basic)
|
||||
// @include lui.init(
|
||||
// $theme: (
|
||||
// colors: $colors,
|
||||
// variables: (
|
||||
// 'font-size': (
|
||||
// 'xs': .75rem,
|
||||
// 'sm': .875rem,
|
||||
// 'md': 1rem,
|
||||
// 'lg': 1.125rem,
|
||||
// 'xl': 1.25rem,
|
||||
// ),
|
||||
// 'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif',
|
||||
// 'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
|
||||
// 'measure': (
|
||||
// '.25x': 4px,
|
||||
// '.375x': 6px,
|
||||
// '.5x': 8px,
|
||||
// '.75x': 12px,
|
||||
// '1x': 16px,
|
||||
// '1.25x': 20px,
|
||||
// '1.5x': 24px,
|
||||
// '2x': 32px,
|
||||
// '2.5x': 40px,
|
||||
// '3x': 48px,
|
||||
// '4x': 64px,
|
||||
// ),
|
||||
// 'repo-home': (
|
||||
// 'sidebar-width': 296px,
|
||||
// )
|
||||
// ),
|
||||
// ),
|
||||
|
||||
// $options: (
|
||||
// reboot: false,
|
||||
// basic: false,
|
||||
// fg-var-name: 'text',
|
||||
// bg-var-name: 'elevation/1',
|
||||
// ),
|
||||
// );
|
||||
|
||||
// @include theme.make-theme(
|
||||
// $is-dark: $is-dark,
|
||||
// );
|
||||
@ -11,7 +11,12 @@
|
||||
@include components.editor; // github-style (kinda) markdown editor in comments, issues, etc.
|
||||
@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.issues; // issues page
|
||||
}
|
||||
|
||||
304
src/themes/scss/theme/modules/_chroma.scss
Normal file
304
src/themes/scss/theme/modules/_chroma.scss
Normal 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
Normal file
95
src/themes/scss/theme/modules/_codemirror.scss
Normal 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
Normal file
155
src/themes/scss/theme/modules/_monaco.scss
Normal 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;
|
||||
// }
|
||||
}
|
||||
}
|
||||
@ -1,2 +1,5 @@
|
||||
@forward './repo';
|
||||
@forward './issues';
|
||||
@forward './chroma';
|
||||
@forward './codemirror';
|
||||
@forward './monaco';
|
||||
Reference in New Issue
Block a user