From bb79915028fffdd3a3773a36724d3143391a7005 Mon Sep 17 00:00:00 2001 From: sgoudham Date: Tue, 8 Oct 2024 01:01:33 +0100 Subject: [PATCH] refactor(chroma): wip - need to test if this works --- build.ts | 1 + src/_chroma.scss | 296 ----------------------------------------------- src/_theme.scss | 6 +- 3 files changed, 6 insertions(+), 297 deletions(-) delete mode 100644 src/_chroma.scss diff --git a/build.ts b/build.ts index 5e2ee53..620862e 100755 --- a/build.ts +++ b/build.ts @@ -14,6 +14,7 @@ Deno.mkdirSync(path.join(__dirname, "dist"), { recursive: true }); const sassBuilder = (flavor: string, accent: string) => ` @import "@catppuccin/palette/scss/${flavor}"; $accent: $${accent}; +$flavor: ${flavor}; $isDark: ${flavor !== "latte"}; @import "theme"; `; diff --git a/src/_chroma.scss b/src/_chroma.scss deleted file mode 100644 index 53f153a..0000000 --- a/src/_chroma.scss +++ /dev/null @@ -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; -} diff --git a/src/_theme.scss b/src/_theme.scss index a4b9bd0..9cead1a 100644 --- a/src/_theme.scss +++ b/src/_theme.scss @@ -1,5 +1,9 @@ @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 @function ctx_lighten($color, $amount) { $multiplier: if($isDark, -1, 1); @@ -324,6 +328,6 @@ $lvl3: if($isDark, $base, $crust); background: color.change($accent, $alpha: 0.3) !important; } -@import "chroma"; +@include chroma($flavor); @import "codemirror"; @import "monaco";