From 38be548b5576c45ff61996db3b1f66f4ad000919 Mon Sep 17 00:00:00 2001 From: Lucas Colombo Date: Mon, 20 Jan 2025 08:38:29 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20update=20theme=20colors=20a?= =?UTF-8?q?nd=20improve=20styling=20for=20better=20readability?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/themes/scss/light.scss | 32 +- src/themes/scss/theme/index.scss | 16 +- src/themes/scss/theme/modules/_chroma.scss | 394 +++++------------- .../scss/theme/modules/issues/_issue.scss | 4 +- src/themes/scss/theme/vars/_colors.scss | 38 +- 5 files changed, 139 insertions(+), 345 deletions(-) diff --git a/src/themes/scss/light.scss b/src/themes/scss/light.scss index d1528ac..448e107 100644 --- a/src/themes/scss/light.scss +++ b/src/themes/scss/light.scss @@ -7,15 +7,15 @@ $brand: #6296e2; $colors: ( primary: c.variants($brand), - secondary: c.variants(#999cc5), - text: #4c4f69, - subtle: #6c6f85, // same as elevation/10 + secondary: c.variants(#bcc0cc), + text: #484b60, + subtle: #656c90, // same as elevation/10 palette: ( 'red': c.variants(#d20f39), // red 'orange': c.variants(#fe640b), // peach 'yellow': c.variants(#df8e1d), // yellow 'olive': c.variants(#e2f095), - 'green': c.variants(#11752d), // green + 'green': c.variants(#34ac56), // green 'teal': c.variants(#179299), // teal 'blue': c.variants(#1e66f5), // blue 'violet': c.variants(#7287fd), // lavender @@ -26,18 +26,18 @@ $colors: ( 'white': c.variants(#e6edf3), // white ), elevation: ( - '1': #dce0e8, // elevation/1 - '2': #e6e9ef, // elevation/2 - '3': #eff1f5, // elevation/3 - '4': #dcdfe7, // elevation/4 - '5': #bcc0cc, // elevation/5 - '6': #acb0be, // elevation/6 - '7': #9ca0b0, // elevation/7 - '8': #8c8fa1, // elevation/8 - '9': #7c7f93, // elevation/9 - '10': #6c6f85, // elevation/10 - '11': #5c5f77, // elevation/11 - '12': #4c4f69, // elevation/12 + '1': #fcfcfd, // elevation/1 + '2': #f6f7f9, // elevation/2 + '3': #eff1f5, // elevation/3 + '4': #e6e9ef, // elevation/4 + '5': #d7dce6, // elevation/5 + '6': #bcc0cc, // elevation/6 + '7': #9ba7bf, // elevation/7 + '8': #838fae, // elevation/8 + '9': #717a9f, // elevation/9 + '10': #656c90, // elevation/10 + '11': #565b77, // elevation/11 + '12': #484b60, // elevation/12 ) ); diff --git a/src/themes/scss/theme/index.scss b/src/themes/scss/theme/index.scss index 429cb56..40ec624 100644 --- a/src/themes/scss/theme/index.scss +++ b/src/themes/scss/theme/index.scss @@ -7,16 +7,16 @@ @include vars.colors($is-dark); // components - @include components.signed-label; // label for GPG signed commits - @include components.editor; // github-style (kinda) markdown editor in comments, issues, etc. - @include components.menu; // github-style dropdown menus + @include components.signed-label; // label for GPG signed commits + @include components.editor; // github-style (kinda) markdown editor in comments, issues, etc. + @include components.menu; // github-style dropdown menus // code highlighting - @include modules.chroma; // syntax highlighting - @include modules.codemirror; // code editor - @include modules.monaco; // vscode-like code editor + @include modules.chroma($is-dark); // 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 + @include modules.repo; // repo page + @include modules.issues; // issues page } diff --git a/src/themes/scss/theme/modules/_chroma.scss b/src/themes/scss/theme/modules/_chroma.scss index 921a81c..e92b580 100644 --- a/src/themes/scss/theme/modules/_chroma.scss +++ b/src/themes/scss/theme/modules/_chroma.scss @@ -1,304 +1,100 @@ @use '@lucas-labs/lui-micro/color' as color; @use '@lucas-labs/lui-micro/var' as var; +@mixin chroma($dark: false) { + $orange: if($dark, 'palette/orange/base', 'palette/orange/dark/15%'); + $blue: if($dark, 'palette/blue/base', 'palette/blue/dark/15%'); + $fg: 'text'; + $subtle: 'subtle'; + $more-subtle: if($dark, 'elevation/8', 'elevation/8'); + $brown: if($dark, 'palette/brown/base', 'palette/brown/dark/15%'); + $red: if($dark, 'palette/red/base', 'palette/red/dark/15%'); + $green: if($dark, 'palette/green/base', 'palette/green/dark/10%'); + $teal: if($dark, 'palette/teal/base', 'palette/teal/dark/15%'); + $purple: if($dark, 'palette/purple/base', 'palette/purple/dark/10%'); + $yellow: if($dark, 'palette/yellow/base', 'palette/yellow/dark/25%'); + $violet: if($dark, 'palette/violet/base', 'palette/violet/dark/50%'); + $pink: if($dark, 'palette/pink/base', 'palette/pink/dark/25%'); + $blwh: if($dark, 'palette/white/base', 'palette/black/base'); -@mixin chroma { - .chroma .code-inner{ - font: 14px var.get('code-font-family'); - } + .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'); - } -} + .bp { color: color.get($orange); font-weight: 600;} // NameBuiltinPseudo + .c { color: color.get($subtle); font-style: italic; } // Comment + .c1 { color: color.get($subtle); font-style: italic; } // CommentSingle + .ch { color: color.get($subtle); font-style: italic; } // CommentHashbang + .cm { color: color.get($subtle); font-style: italic; } // CommentMultiline + .cp { color: color.get($blue); } // CommentPreproc + .cpf { color: color.get($blue); } // CommentPreprocFile + .cs { color: color.get($subtle); } // CommentSpecial + .dl { color: color.get($blue); } // LiteralStringDelimiter + .fm {} // NameFunctionMagic + .g {} // Generic + .gd { color: color.get($blwh); background-color: rgba(#{color.get($red, 'rgb')}, .25); } // GenericDeleted + .ge { font-style: italic; } // GenericEmph + .gh { color: color.get($teal); } // GenericHeading + .gi { color: color.get($blwh); background-color: rgba(#{color.get($green, 'rgb')}, 0.3); } // GenericInserted + .gl {} // GenericUnderline + .go { color: color.get($orange); } // GenericOutput + .gp { color: color.get($subtle); font-weight: bold; } // GenericPrompt + .gr { color: color.get($brown); } // GenericError + .gs { font-weight: bold; } // GenericStrong + .gt { color: color.get($brown); } // GenericTraceback + .gu { color: color.get($teal); } // GenericSubheading + .il { color: color.get($orange); } // LiteralNumberIntegerLong + .k { color: color.get($purple); font-weight: 600; } // Keyword + .kc { color: color.get($yellow); } // KeywordConstant + .kd { color: color.get($purple); font-weight: 600; } // KeywordDeclaration + .kn { color: color.get($yellow); } // KeywordNamespace + .kp { color: color.get($purple); font-weight: 600; } // KeywordPseudo + .kr { color: color.get($purple); font-weight: 600;} // KeywordReserved + .kt { color: color.get($yellow); } // KeywordType + .l {} // Literal + .ld {} // LiteralDate + .m { color: color.get($orange); } // LiteralNumber + .mb { color: color.get($orange); } // LiteralNumberBin + .mf { color: color.get($orange); } // LiteralNumberFloat + .mh { color: color.get($orange); } // LiteralNumberHex + .mi { color: color.get($orange); } // LiteralNumberInteger + .mo { color: color.get($orange); } // LiteralNumberOct + .n { color: color.get($violet); } // Name + .na { color: color.get($yellow); } // NameAttribute + .nb { color: color.get($orange); font-weight: 600; } // NameBuiltin + .nc { color: color.get($pink); } // NameClass + .nd { color: color.get($pink); } // NameDecorator + .ne { color: color.get($brown); } // NameException + .nf { color: color.get($blue); } // NameFunction + .ni { color: color.get($pink); } // NameEntity + .nl { color: color.get($yellow); } // NameLabel + .nn { color: color.get($yellow); } // NameNamespace + .no { color: color.get($yellow); } // NameConstant + .nt { color: color.get($purple); } // NameTag + .nv { color: color.get($orange); } // NameVariable + .nx { color: color.get($orange); } // NameOther + .o { color: color.get($teal); } // Operator + .ow { color: color.get($teal); font-weight: bold; } // OperatorWord + .p { color: color.get($subtle); } // Punctuation + .py {} // NameProperty + .s { color: color.get($green); } // LiteralString + .s1 { color: color.get($green); } // LiteralStringSingle + .s2 { color: color.get($green); } // LiteralStringDouble + .sa { color: color.get($green); } // LiteralStringAffix + .sb { color: color.get($green); } // LiteralStringBacktick + .sc { color: color.get($green); } // LiteralStringChar + .sd { color: color.get($green); } // LiteralStringDoc + .se { color: color.get($blue); } // LiteralStringEscape + .sh { color: color.get($green); } // LiteralStringHeredoc + .si { color: color.get($green); } // LiteralStringInterpol + .sr { color: color.get($blue); } // LiteralStringRegex + .ss { color: color.get($green); } // LiteralStringSymbol + .sx { color: color.get($green); } // LiteralStringOther + .vc { color: color.get($yellow); } // NameVariableClass + .vg { color: color.get($orange); } // NameVariableGlobal + .vi { color: color.get($yellow); } // NameVariableInstance + .vm {} // NameVariableMagic + .w { color: color.get($more-subtle); } // TextWhitespace + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/issues/_issue.scss b/src/themes/scss/theme/modules/issues/_issue.scss index 1e5c81c..7187cc4 100644 --- a/src/themes/scss/theme/modules/issues/_issue.scss +++ b/src/themes/scss/theme/modules/issues/_issue.scss @@ -37,7 +37,7 @@ .timeline-item { &.comment { .content { - background-color: transparent !important; + background-color: var(--color-box-body); >.comment-header, >.ui.segment { &:before, &:after { @@ -70,8 +70,6 @@ } } } - - } // comment form at the end diff --git a/src/themes/scss/theme/vars/_colors.scss b/src/themes/scss/theme/vars/_colors.scss index 3171da7..74328de 100644 --- a/src/themes/scss/theme/vars/_colors.scss +++ b/src/themes/scss/theme/vars/_colors.scss @@ -140,7 +140,7 @@ --color-pink-light: #{color.get('palette/pink/light/10%')}; --color-brown-light: #{color.get('palette/brown/light/10%')}; --color-black-light: #{if( - is-dark, + $is-dark, color.get('palette/black/light/10%'), color.get('palette/white/light/10%') )}; @@ -160,7 +160,7 @@ --color-pink-dark-1: #{color.get('palette/pink/dark/10%')}; --color-brown-dark-1: #{color.get('palette/brown/dark/10%')}; --color-black-dark-1: #{if( - is-dark, + $is-dark, color.get('palette/black/dark/10%'), color.get('palette/white/dark/10%') )}; @@ -180,7 +180,7 @@ --color-pink-dark-2: #{color.get('palette/pink/dark/20%')}; --color-brown-dark-2: #{color.get('palette/brown/dark/20%')}; --color-black-dark-2: #{if( - is-dark, + $is-dark, color.get('palette/black/dark/20%'), color.get('palette/white/dark/20%') )}; @@ -211,23 +211,23 @@ --color-grey: #{color.get('elevation/9')}; --color-grey-light: #{color.get('elevation/11')}; --color-gold: #{color.get('palette/yellow/dark/20%')}; - --color-white: #{if(is-dark, color.get('palette/black/base'), color.get('palette/white/base'))}; + --color-white: #{if($is-dark, color.get('palette/black/base'), color.get('palette/white/base'))}; --color-git: #f05133; // ┌──────┐ // │ diff │ // └──────┘ - --color-diff-added-linenum-bg: #{color.get('palette/teal/dark/50%')}; - --color-diff-added-row-bg: #{color.get('palette/teal/dark/60%')}; - --color-diff-added-row-border: #{color.get('palette/teal/dark/40%')};; - --color-diff-added-word-bg: #{color.get('palette/teal/dark/50%')}; - --color-diff-moved-row-bg: #{color.get('palette/yellow/dark/75%')}; - --color-diff-moved-row-border: #{color.get('palette/yellow/dark/65%')}; - --color-diff-removed-linenum-bg: #{color.get('palette/red/dark/60%')}; - --color-diff-removed-row-bg: #{color.get('palette/red/dark/65%')}; - --color-diff-removed-row-border: #{color.get('palette/red/dark/50%')};; - --color-diff-removed-word-bg: #{color.get('palette/red/dark/55%')}; - --color-diff-inactive: #{color.get('elevation/6')}; + --color-diff-added-linenum-bg: #{if($is-dark, #{color.get('palette/teal/dark/50%')}, rgba(#{color.get('palette/white/base', 'rgb')}, .2))}; + --color-diff-added-row-bg: #{if($is-dark, #{color.get('palette/teal/dark/60%')}, rgba(#{color.get('palette/green/light/20%', 'rgb')}, .25))}; + --color-diff-added-row-border: #{if($is-dark, #{color.get('palette/teal/dark/40%')}, rgba(#{color.get('palette/green/light/25%', 'rgb')}, .25))}; + --color-diff-added-word-bg: #{if($is-dark, #{color.get('palette/teal/dark/50%')}, rgba(#{color.get('palette/green/light/6%', 'rgb')}, .3))}; + --color-diff-moved-row-bg: #{if($is-dark, #{color.get('palette/yellow/dark/75%')}, rgba(#{color.get('palette/yellow/light/20%', 'rgb')}, .25))}; + --color-diff-moved-row-border: #{if($is-dark, #{color.get('palette/yellow/dark/65%')}, rgba(#{color.get('palette/yellow/light/25%', 'rgb')}, .25))}; + --color-diff-removed-linenum-bg: #{if($is-dark, #{color.get('palette/red/dark/60%')}, rgba(#{color.get('palette/white/base', 'rgb')}, .2))}; + --color-diff-removed-row-bg: #{if($is-dark, #{color.get('palette/red/dark/65%')}, rgba(#{color.get('palette/red/light/30%', 'rgb')}, .15))}; + --color-diff-removed-row-border: #{if($is-dark, #{color.get('palette/red/dark/50%')}, rgba(#{color.get('palette/red/light/35%', 'rgb')}, .2))}; + --color-diff-removed-word-bg: #{if($is-dark, #{color.get('palette/red/dark/55%')}, rgba(#{color.get('palette/red/light/25%', 'rgb')}, .2))}; + --color-diff-inactive: #{if($is-dark, #{color.get('elevation/6')}, red)}; // ┌────────┐ // │ status │ @@ -279,12 +279,12 @@ --color-text-light-2: #{color.get('subtle')}; --color-text-light-3: #{color.get('subtle')}; --color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2); - --color-timeline: #{color.get('elevation/4')}; + --color-timeline: #{color.get('elevation/5')}; // box --color-box-header: #{rgba(color.get('elevation/4', 'rgb'), 1)}; --color-box-body: #{color.get('elevation/3')}; - --color-box-body-highlight: #1e2226; + --color-box-body-highlight: #{color.get('elevation/4')}; // input --color-input-text: var(--color-text-dark); @@ -303,8 +303,8 @@ --color-menu: #{color.get('elevation/4')}; --color-card: #{color.get('elevation/4')}; --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02); - --color-markup-code-block: #{color.get('elevation/5')}; - --color-markup-code-inline: #{color.get('elevation/5')}; + --color-markup-code-block: #{color.get('elevation/4')}; + --color-markup-code-inline: #{color.get('elevation/4')}; --color-button: #{color.get('elevation/4')}; --color-code-bg: #{color.get('elevation/3')}; --color-shadow: rgba(#{color.get('elevation/1', 'rgb')}, 0.5);