infrastructure/gitea-custom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ✨ update theme colors and improve styling for better readability

Browse Source
This commit is contained in:
Lucas Colombo 2025-01-20 08:38:29 -03:00
parent a0d2fee502
commit 38be548b55
5 changed files with 139 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/themes/scss/light.scss
View File

@ -7,15 +7,15 @@ $brand: #6296e2;
$colors: ( $colors: (
primary: c.variants($brand), primary: c.variants($brand),
secondary: c.variants(#999cc5), secondary: c.variants(#bcc0cc),
text: #4c4f69, text: #484b60,
subtle: #6c6f85, // same as elevation/10 subtle: #656c90, // same as elevation/10
palette: ( palette: (
'red': c.variants(#d20f39), // red 'red': c.variants(#d20f39), // red
'orange': c.variants(#fe640b), // peach 'orange': c.variants(#fe640b), // peach
'yellow': c.variants(#df8e1d), // yellow 'yellow': c.variants(#df8e1d), // yellow
'olive': c.variants(#e2f095), 'olive': c.variants(#e2f095),
'green': c.variants(#11752d), // green 'green': c.variants(#34ac56), // green
'teal': c.variants(#179299), // teal 'teal': c.variants(#179299), // teal
'blue': c.variants(#1e66f5), // blue 'blue': c.variants(#1e66f5), // blue
'violet': c.variants(#7287fd), // lavender 'violet': c.variants(#7287fd), // lavender
@ -26,18 +26,18 @@ $colors: (
'white': c.variants(#e6edf3), // white 'white': c.variants(#e6edf3), // white
), ),
elevation: ( elevation: (
'1': #dce0e8, // elevation/1 '1': #fcfcfd, // elevation/1
'2': #e6e9ef, // elevation/2 '2': #f6f7f9, // elevation/2
'3': #eff1f5, // elevation/3 '3': #eff1f5, // elevation/3
'4': #dcdfe7, // elevation/4 '4': #e6e9ef, // elevation/4
'5': #bcc0cc, // elevation/5 '5': #d7dce6, // elevation/5
'6': #acb0be, // elevation/6 '6': #bcc0cc, // elevation/6
'7': #9ca0b0, // elevation/7 '7': #9ba7bf, // elevation/7
'8': #8c8fa1, // elevation/8 '8': #838fae, // elevation/8
'9': #7c7f93, // elevation/9 '9': #717a9f, // elevation/9
'10': #6c6f85, // elevation/10 '10': #656c90, // elevation/10
'11': #5c5f77, // elevation/11 '11': #565b77, // elevation/11
'12': #4c4f69, // elevation/12 '12': #484b60, // elevation/12
) )
); );

16
src/themes/scss/theme/index.scss
View File

@ -7,16 +7,16 @@
@include vars.colors($is-dark); @include vars.colors($is-dark);
// components // components
@include components.signed-label; // label for GPG signed commits @include components.signed-label; // label for GPG signed commits
@include components.editor; // github-style (kinda) markdown editor in comments, issues, etc. @include components.editor; // github-style (kinda) markdown editor in comments, issues, etc.
@include components.menu; // github-style dropdown menus @include components.menu; // github-style dropdown menus
// code highlighting // code highlighting
@include modules.chroma; // syntax highlighting @include modules.chroma($is-dark); // syntax highlighting
@include modules.codemirror; // code editor @include modules.codemirror; // code editor
@include modules.monaco; // vscode-like code editor @include modules.monaco; // vscode-like code editor
// customized pages // customized pages
@include modules.repo; // repo page @include modules.repo; // repo page
@include modules.issues; // issues page @include modules.issues; // issues page
} }

390
src/themes/scss/theme/modules/_chroma.scss
View File

@ -1,304 +1,100 @@
@use '@lucas-labs/lui-micro/color' as color; @use '@lucas-labs/lui-micro/color' as color;
@use '@lucas-labs/lui-micro/var' as var; @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 {
.chroma .code-inner{ .code-inner {
font: 14px var.get('code-font-family'); font: 14px var.get('code-font-family');
} }
/* NameBuiltinPseudo */ .bp { color: color.get($orange); font-weight: 600;} // NameBuiltinPseudo
.chroma .bp { .c { color: color.get($subtle); font-style: italic; } // Comment
color: color.get('palette/orange/base'); .c1 { color: color.get($subtle); font-style: italic; } // CommentSingle
} .ch { color: color.get($subtle); font-style: italic; } // CommentHashbang
/* Comment */ .cm { color: color.get($subtle); font-style: italic; } // CommentMultiline
.chroma .c { .cp { color: color.get($blue); } // CommentPreproc
color: color.get('elevated/7'); .cpf { color: color.get($blue); } // CommentPreprocFile
} .cs { color: color.get($subtle); } // CommentSpecial
/* CommentSingle */ .dl { color: color.get($blue); } // LiteralStringDelimiter
.chroma .c1 { .fm {} // NameFunctionMagic
color: color.get('elevated/7'); .g {} // Generic
} .gd { color: color.get($blwh); background-color: rgba(#{color.get($red, 'rgb')}, .25); } // GenericDeleted
/* CommentHashbang */ .ge { font-style: italic; } // GenericEmph
.chroma .ch { .gh { color: color.get($teal); } // GenericHeading
color: color.get('elevated/7'); .gi { color: color.get($blwh); background-color: rgba(#{color.get($green, 'rgb')}, 0.3); } // GenericInserted
} .gl {} // GenericUnderline
/* CommentMultiline */ .go { color: color.get($orange); } // GenericOutput
.chroma .cm { .gp { color: color.get($subtle); font-weight: bold; } // GenericPrompt
color: color.get('elevated/7'); .gr { color: color.get($brown); } // GenericError
} .gs { font-weight: bold; } // GenericStrong
/* CommentPreproc */ .gt { color: color.get($brown); } // GenericTraceback
.chroma .cp { .gu { color: color.get($teal); } // GenericSubheading
color: color.get('palette/blue/base'); .il { color: color.get($orange); } // LiteralNumberIntegerLong
} .k { color: color.get($purple); font-weight: 600; } // Keyword
/* CommentPreprocFile */ .kc { color: color.get($yellow); } // KeywordConstant
.chroma .cpf { .kd { color: color.get($purple); font-weight: 600; } // KeywordDeclaration
color: color.get('palette/blue/base'); .kn { color: color.get($yellow); } // KeywordNamespace
} .kp { color: color.get($purple); font-weight: 600; } // KeywordPseudo
/* CommentSpecial */ .kr { color: color.get($purple); font-weight: 600;} // KeywordReserved
.chroma .cs { .kt { color: color.get($yellow); } // KeywordType
color: color.get('elevated/7'); .l {} // Literal
} .ld {} // LiteralDate
/* LiteralStringDelimiter */ .m { color: color.get($orange); } // LiteralNumber
.chroma .dl { .mb { color: color.get($orange); } // LiteralNumberBin
color: color.get('palette/blue/base'); .mf { color: color.get($orange); } // LiteralNumberFloat
} .mh { color: color.get($orange); } // LiteralNumberHex
/* NameFunctionMagic */ .mi { color: color.get($orange); } // LiteralNumberInteger
.chroma .fm { .mo { color: color.get($orange); } // LiteralNumberOct
} .n { color: color.get($violet); } // Name
/* Generic */ .na { color: color.get($yellow); } // NameAttribute
.chroma .g { .nb { color: color.get($orange); font-weight: 600; } // NameBuiltin
} .nc { color: color.get($pink); } // NameClass
/* GenericDeleted */ .nd { color: color.get($pink); } // NameDecorator
.chroma .gd { .ne { color: color.get($brown); } // NameException
color: color.get('theme'); .nf { color: color.get($blue); } // NameFunction
background-color: rgba(#{color.get('palette/red/base', 'rgb')}, 0.15); .ni { color: color.get($pink); } // NameEntity
} .nl { color: color.get($yellow); } // NameLabel
/* GenericEmph */ .nn { color: color.get($yellow); } // NameNamespace
.chroma .ge { .no { color: color.get($yellow); } // NameConstant
font-style: italic; .nt { color: color.get($purple); } // NameTag
} .nv { color: color.get($orange); } // NameVariable
/* GenericHeading */ .nx { color: color.get($orange); } // NameOther
.chroma .gh { .o { color: color.get($teal); } // Operator
color: color.get('palette/teal/base'); .ow { color: color.get($teal); font-weight: bold; } // OperatorWord
} .p { color: color.get($subtle); } // Punctuation
/* GenericInserted */ .py {} // NameProperty
.chroma .gi { .s { color: color.get($green); } // LiteralString
color: color.get('theme'); .s1 { color: color.get($green); } // LiteralStringSingle
background-color: rgba(#{color.get('palette/green/base', 'rgb')}, 0.15); .s2 { color: color.get($green); } // LiteralStringDouble
} .sa { color: color.get($green); } // LiteralStringAffix
/* GenericUnderline */ .sb { color: color.get($green); } // LiteralStringBacktick
.chroma .gl { .sc { color: color.get($green); } // LiteralStringChar
} .sd { color: color.get($green); } // LiteralStringDoc
/* GenericOutput */ .se { color: color.get($blue); } // LiteralStringEscape
.chroma .go { .sh { color: color.get($green); } // LiteralStringHeredoc
color: color.get('palette/orange/base'); .si { color: color.get($green); } // LiteralStringInterpol
} .sr { color: color.get($blue); } // LiteralStringRegex
/* GenericPrompt */ .ss { color: color.get($green); } // LiteralStringSymbol
.chroma .gp { .sx { color: color.get($green); } // LiteralStringOther
color: color.get('elevated/7'); .vc { color: color.get($yellow); } // NameVariableClass
font-weight: bold; .vg { color: color.get($orange); } // NameVariableGlobal
} .vi { color: color.get($yellow); } // NameVariableInstance
/* GenericError */ .vm {} // NameVariableMagic
.chroma .gr { .w { color: color.get($more-subtle); } // TextWhitespace
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');
} }
} }

4
src/themes/scss/theme/modules/issues/_issue.scss
View File

@ -37,7 +37,7 @@
.timeline-item { .timeline-item {
&.comment { &.comment {
.content { .content {
background-color: transparent !important; background-color: var(--color-box-body);
>.comment-header, >.ui.segment { >.comment-header, >.ui.segment {
&:before, &:after { &:before, &:after {
@ -70,8 +70,6 @@
} }
} }
} }
} }
// comment form at the end // comment form at the end

38
src/themes/scss/theme/vars/_colors.scss
View File

@ -140,7 +140,7 @@
--color-pink-light: #{color.get('palette/pink/light/10%')}; --color-pink-light: #{color.get('palette/pink/light/10%')};
--color-brown-light: #{color.get('palette/brown/light/10%')}; --color-brown-light: #{color.get('palette/brown/light/10%')};
--color-black-light: #{if( --color-black-light: #{if(
is-dark, $is-dark,
color.get('palette/black/light/10%'), color.get('palette/black/light/10%'),
color.get('palette/white/light/10%') color.get('palette/white/light/10%')
)}; )};
@ -160,7 +160,7 @@
--color-pink-dark-1: #{color.get('palette/pink/dark/10%')}; --color-pink-dark-1: #{color.get('palette/pink/dark/10%')};
--color-brown-dark-1: #{color.get('palette/brown/dark/10%')}; --color-brown-dark-1: #{color.get('palette/brown/dark/10%')};
--color-black-dark-1: #{if( --color-black-dark-1: #{if(
is-dark, $is-dark,
color.get('palette/black/dark/10%'), color.get('palette/black/dark/10%'),
color.get('palette/white/dark/10%') color.get('palette/white/dark/10%')
)}; )};
@ -180,7 +180,7 @@
--color-pink-dark-2: #{color.get('palette/pink/dark/20%')}; --color-pink-dark-2: #{color.get('palette/pink/dark/20%')};
--color-brown-dark-2: #{color.get('palette/brown/dark/20%')}; --color-brown-dark-2: #{color.get('palette/brown/dark/20%')};
--color-black-dark-2: #{if( --color-black-dark-2: #{if(
is-dark, $is-dark,
color.get('palette/black/dark/20%'), color.get('palette/black/dark/20%'),
color.get('palette/white/dark/20%') color.get('palette/white/dark/20%')
)}; )};
@ -211,23 +211,23 @@
--color-grey: #{color.get('elevation/9')}; --color-grey: #{color.get('elevation/9')};
--color-grey-light: #{color.get('elevation/11')}; --color-grey-light: #{color.get('elevation/11')};
--color-gold: #{color.get('palette/yellow/dark/20%')}; --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; --color-git: #f05133;
// ┌──────┐ // ┌──────┐
// │ diff │ // │ diff │
// └──────┘ // └──────┘
--color-diff-added-linenum-bg: #{color.get('palette/teal/dark/50%')}; --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: #{color.get('palette/teal/dark/60%')}; --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: #{color.get('palette/teal/dark/40%')};; --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: #{color.get('palette/teal/dark/50%')}; --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: #{color.get('palette/yellow/dark/75%')}; --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: #{color.get('palette/yellow/dark/65%')}; --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: #{color.get('palette/red/dark/60%')}; --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: #{color.get('palette/red/dark/65%')}; --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: #{color.get('palette/red/dark/50%')};; --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: #{color.get('palette/red/dark/55%')}; --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: #{color.get('elevation/6')}; --color-diff-inactive: #{if($is-dark, #{color.get('elevation/6')}, red)};
// ┌────────┐ // ┌────────┐
// │ status │ // │ status │
@ -279,12 +279,12 @@
--color-text-light-2: #{color.get('subtle')}; --color-text-light-2: #{color.get('subtle')};
--color-text-light-3: #{color.get('subtle')}; --color-text-light-3: #{color.get('subtle')};
--color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2); --color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2);
--color-timeline: #{color.get('elevation/4')}; --color-timeline: #{color.get('elevation/5')};
// box // box
--color-box-header: #{rgba(color.get('elevation/4', 'rgb'), 1)}; --color-box-header: #{rgba(color.get('elevation/4', 'rgb'), 1)};
--color-box-body: #{color.get('elevation/3')}; --color-box-body: #{color.get('elevation/3')};
--color-box-body-highlight: #1e2226; --color-box-body-highlight: #{color.get('elevation/4')};
// input // input
--color-input-text: var(--color-text-dark); --color-input-text: var(--color-text-dark);
@ -303,8 +303,8 @@
--color-menu: #{color.get('elevation/4')}; --color-menu: #{color.get('elevation/4')};
--color-card: #{color.get('elevation/4')}; --color-card: #{color.get('elevation/4')};
--color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02); --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02);
--color-markup-code-block: #{color.get('elevation/5')}; --color-markup-code-block: #{color.get('elevation/4')};
--color-markup-code-inline: #{color.get('elevation/5')}; --color-markup-code-inline: #{color.get('elevation/4')};
--color-button: #{color.get('elevation/4')}; --color-button: #{color.get('elevation/4')};
--color-code-bg: #{color.get('elevation/3')}; --color-code-bg: #{color.get('elevation/3')};
--color-shadow: rgba(#{color.get('elevation/1', 'rgb')}, 0.5); --color-shadow: rgba(#{color.get('elevation/1', 'rgb')}, 0.5);