From 6576ad02886d2ad1801c6668ac0dc1d8481ff817 Mon Sep 17 00:00:00 2001 From: winston Date: Sun, 19 Mar 2023 07:34:27 +0100 Subject: [PATCH] feat: add codemirror --- .gitignore | 1 + build.ts | 2 +- src/_codemirror.scss | 91 +++++++++++++++++++++++++ src/_theme.scss | 47 +++++++------ src/catppuccin/_catppuccin.scss | 114 -------------------------------- 5 files changed, 120 insertions(+), 135 deletions(-) create mode 100644 .gitignore create mode 100644 src/_codemirror.scss delete mode 100644 src/catppuccin/_catppuccin.scss diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..178135c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/dist/ diff --git a/build.ts b/build.ts index f500242..c637900 100755 --- a/build.ts +++ b/build.ts @@ -25,7 +25,7 @@ const dirname = path.dirname(path.fromFileUrl(import.meta.url)); const builder = (flavor: string, accent: string) => ` @import "catppuccin/${flavor}"; $accent: $${accent}; -$is-dark: ${flavor !== "latte"}; +$isDark: ${flavor !== "latte"}; @import "theme"; `; diff --git a/src/_codemirror.scss b/src/_codemirror.scss new file mode 100644 index 0000000..36a86a2 --- /dev/null +++ b/src/_codemirror.scss @@ -0,0 +1,91 @@ +.CodeMirror, +.CodeMirror.cm-s-default, +.CodeMirror.cm-s-paper { + .cm-property { + color: $text; + } + + .cm-header { + color: $text; + } + + .cm-quote { + color: $green; + } + + .cm-keyword { + color: $mauve; + } + + .cm-atom { + color: $red; + } + + .cm-number { + color: $peach; + } + + .cm-def { + color: $text; + } + + .cm-variable-2 { + color: $sky; + } + + .cm-variable-3 { + color: $teal; + } + + .cm-comment { + color: $surface2; + } + + .cm-string { + color: $green; + } + + .cm-string-2 { + color: $green; + } + + .cm-meta { + color: $peach; + } + + .cm-qualifier { + color: $peach; + } + + .cm-builtin { + color: $peach; + } + + .cm-bracket { + color: $text; + } + + .cm-tag { + color: $yellow; + } + + .cm-attribute { + color: $yellow; + } + + .cm-hr { + color: $overlay2; + } + + .cm-url { + color: $blue; + } + + .cm-link { + color: $blue; + } + + .cm-error { + color: $red; + } +} diff --git a/src/_theme.scss b/src/_theme.scss index 0681e5d..2510e9c 100644 --- a/src/_theme.scss +++ b/src/_theme.scss @@ -1,12 +1,19 @@ @use "sass:color"; +// context-aware lighten: darkens if dark, lightens if light +@function ctx_lighten($color, $amount) { + $multiplier: if($isDark, -1, 1); + @return color.adjust($color, $lightness: $amount * $multiplier); +} + :root { - @if $is-dark { - color-schema: dark; + @if $isDark { + color-scheme: dark; + --is-dark-theme: true; } @else { - color-schema: light; + color-scheme: light; + --is-dark-theme: false; } - --is-dark-theme: $is-dark; accent-color: #{$accent}; @@ -86,19 +93,19 @@ --color-black: #{$mantle}; /* light variants - produced via Sass scale-color(color, $lightness: -10%) */ - --color-red-light: #{color.adjust($red, $lightness: -10%)}; - --color-orange-light: #{color.adjust($peach, $lightness: -10%)}; - --color-yellow-light: #{color.adjust($yellow, $lightness: -10%)}; - --color-olive-light: #{color.adjust($green, $lightness: -10%)}; - --color-green-light: #{color.adjust($green, $lightness: -10%)}; - --color-teal-light: #{color.adjust($teal, $lightness: -10%)}; - --color-blue-light: #{color.adjust($blue, $lightness: -10%)}; - --color-violet-light: #{color.adjust($lavender, $lightness: -10%)}; - --color-purple-light: #{color.adjust($mauve, $lightness: -10%)}; - --color-pink-light: #{color.adjust($pink, $lightness: -10%)}; - --color-brown-light: #{color.adjust($flamingo, $lightness: -10%)}; - --color-grey-light: #{color.adjust($overlay2, $lightness: -10%)}; - --color-black-light: #{color.adjust($mantle, $lightness: -10%)}; + --color-red-light: #{ctx_lighten($red, 10%)}; + --color-orange-light: #{ctx_lighten($peach, 10%)}; + --color-yellow-light: #{ctx_lighten($yellow, 10%)}; + --color-olive-light: #{ctx_lighten($green, 10%)}; + --color-green-light: #{ctx_lighten($green, 10%)}; + --color-teal-light: #{ctx_lighten($teal, 10%)}; + --color-blue-light: #{ctx_lighten($blue, 10%)}; + --color-violet-light: #{ctx_lighten($lavender, 10%)}; + --color-purple-light: #{ctx_lighten($mauve, 10%)}; + --color-pink-light: #{ctx_lighten($pink, 10%)}; + --color-brown-light: #{ctx_lighten($flamingo, 10%)}; + --color-grey-light: #{ctx_lighten($overlay2, 10%)}; + --color-black-light: #{ctx_lighten($mantle, 10%)}; /* other colors */ --color-gold: #{$rosewater}; @@ -219,8 +226,8 @@ filter: invert(100%) hue-rotate(180deg); } -.ui.ui.ui.button:not(.inverted), -.ui.ui.ui.label:not(.inverted) { +.ui.ui.ui.button:not(.inverted, .basic), +.ui.ui.ui.label:not(.inverted, .basic) { &.primary, &.green, &.red, @@ -241,4 +248,4 @@ } @import "chroma"; -// @import "../src/codemirror/dark"; +@import "codemirror"; diff --git a/src/catppuccin/_catppuccin.scss b/src/catppuccin/_catppuccin.scss deleted file mode 100644 index f809f05..0000000 --- a/src/catppuccin/_catppuccin.scss +++ /dev/null @@ -1,114 +0,0 @@ -$palette: ( - "mocha": ( - "rosewater": #f5e0dc, - "flamingo": #f2cdcd, - "pink": #f5c2e7, - "mauve": #cba6f7, - "red": #f38ba8, - "maroon": #eba0ac, - "peach": #fab387, - "yellow": #f9e2af, - "green": #a6e3a1, - "teal": #94e2d5, - "sky": #89dceb, - "sapphire": #74c7ec, - "blue": #89b4fa, - "lavender": #b4befe, - "text": #cdd6f4, - "subtext1": #bac2de, - "subtext0": #a6adc8, - "overlay2": #9399b2, - "overlay1": #7f849c, - "overlay0": #6c7086, - "surface2": #585b70, - "surface1": #45475a, - "surface0": #313244, - "base": #1e1e2e, - "mantle": #181825, - "crust": #11111b, - ), - "macchiato": ( - "rosewater": #f4dbd6, - "flamingo": #f0c6c6, - "pink": #f5bde6, - "mauve": #c6a0f6, - "red": #ed8796, - "maroon": #ee99a0, - "peach": #f5a97f, - "yellow": #eed49f, - "green": #a6da95, - "teal": #8bd5ca, - "sky": #91d7e3, - "sapphire": #7dc4e4, - "blue": #8aadf4, - "lavender": #b7bdf8, - "text": #cad3f5, - "subtext1": #b8c0e0, - "subtext0": #a5adcb, - "overlay2": #939ab7, - "overlay1": #8087a2, - "overlay0": #6e738d, - "surface2": #5b6078, - "surface1": #494d64, - "surface0": #363a4f, - "base": #24273a, - "mantle": #1e2030, - "crust": #181926, - ), - "frappe": ( - "rosewater": #f2d5cf, - "flamingo": #eebebe, - "pink": #f4b8e4, - "mauve": #ca9ee6, - "red": #e78284, - "maroon": #ea999c, - "peach": #ef9f76, - "yellow": #e5c890, - "green": #a6d189, - "teal": #81c8be, - "sky": #99d1db, - "sapphire": #85c1dc, - "blue": #8caaee, - "lavender": #babbf1, - "text": #c6d0f5, - "subtext1": #b5bfe2, - "subtext0": #a5adce, - "overlay2": #949cbb, - "overlay1": #838ba7, - "overlay0": #737994, - "surface2": #626880, - "surface1": #51576d, - "surface0": #414559, - "base": #303446, - "mantle": #292c3c, - "crust": #232634, - ), - "latte": ( - "rosewater": #dc8a78, - "flamingo": #dd7878, - "pink": #ea76cb, - "mauve": #8839ef, - "red": #d20f39, - "maroon": #e64553, - "peach": #fe640b, - "yellow": #df8e1d, - "green": #40a02b, - "teal": #179299, - "sky": #04a5e5, - "sapphire": #209fb5, - "blue": #1e66f5, - "lavender": #7287fd, - "text": #4c4f69, - "subtext1": #5c5f77, - "subtext0": #6c6f85, - "overlay2": #7c7f93, - "overlay1": #8c8fa1, - "overlay0": #9ca0b0, - "surface2": #acb0be, - "surface1": #bcc0cc, - "surface0": #ccd0da, - "crust": #dce0e8, - "mantle": #e6e9ef, - "base": #eff1f5, - ) -)