refactor(chroma): wip - need to test if this works
This commit is contained in:
parent
b037ea025c
commit
bb79915028
1
build.ts
1
build.ts
|
@ -14,6 +14,7 @@ Deno.mkdirSync(path.join(__dirname, "dist"), { recursive: true });
|
||||||
const sassBuilder = (flavor: string, accent: string) => `
|
const sassBuilder = (flavor: string, accent: string) => `
|
||||||
@import "@catppuccin/palette/scss/${flavor}";
|
@import "@catppuccin/palette/scss/${flavor}";
|
||||||
$accent: $${accent};
|
$accent: $${accent};
|
||||||
|
$flavor: ${flavor};
|
||||||
$isDark: ${flavor !== "latte"};
|
$isDark: ${flavor !== "latte"};
|
||||||
@import "theme";
|
@import "theme";
|
||||||
`;
|
`;
|
||||||
|
|
296
src/_chroma.scss
296
src/_chroma.scss
|
@ -1,296 +0,0 @@
|
||||||
@use "sass:color";
|
|
||||||
|
|
||||||
/* NameBuiltinPseudo */
|
|
||||||
.chroma .bp {
|
|
||||||
color: $peach;
|
|
||||||
}
|
|
||||||
/* Comment */
|
|
||||||
.chroma .c {
|
|
||||||
color: $overlay0;
|
|
||||||
}
|
|
||||||
/* CommentSingle */
|
|
||||||
.chroma .c1 {
|
|
||||||
color: $overlay0;
|
|
||||||
}
|
|
||||||
/* CommentHashbang */
|
|
||||||
.chroma .ch {
|
|
||||||
color: $overlay0;
|
|
||||||
}
|
|
||||||
/* CommentMultiline */
|
|
||||||
.chroma .cm {
|
|
||||||
color: $overlay0;
|
|
||||||
}
|
|
||||||
/* CommentPreproc */
|
|
||||||
.chroma .cp {
|
|
||||||
color: $blue;
|
|
||||||
}
|
|
||||||
/* CommentPreprocFile */
|
|
||||||
.chroma .cpf {
|
|
||||||
color: $blue;
|
|
||||||
}
|
|
||||||
/* CommentSpecial */
|
|
||||||
.chroma .cs {
|
|
||||||
color: $overlay0;
|
|
||||||
}
|
|
||||||
/* 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: $blue;
|
|
||||||
}
|
|
||||||
/* 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: $overlay2;
|
|
||||||
}
|
|
||||||
/* 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;
|
|
||||||
}
|
|
|
@ -1,5 +1,9 @@
|
||||||
@use "sass:color";
|
@use "sass:color";
|
||||||
|
|
||||||
|
@mixin chroma($flavor) {
|
||||||
|
@import url("https://raw.githubusercontent.com/catppuccin/chroma/012c54d4b3122128c1523fe7ca2d41e9e11be7e4/dist/#{$flavor}-chroma-style.css");
|
||||||
|
}
|
||||||
|
|
||||||
// context-aware lighten: darkens if dark, lightens if light
|
// context-aware lighten: darkens if dark, lightens if light
|
||||||
@function ctx_lighten($color, $amount) {
|
@function ctx_lighten($color, $amount) {
|
||||||
$multiplier: if($isDark, -1, 1);
|
$multiplier: if($isDark, -1, 1);
|
||||||
|
@ -324,6 +328,6 @@ $lvl3: if($isDark, $base, $crust);
|
||||||
background: color.change($accent, $alpha: 0.3) !important;
|
background: color.change($accent, $alpha: 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "chroma";
|
@include chroma($flavor);
|
||||||
@import "codemirror";
|
@import "codemirror";
|
||||||
@import "monaco";
|
@import "monaco";
|
||||||
|
|
Loading…
Reference in New Issue