feat: ✨ update theme colors and improve styling for better readability
This commit is contained in:
Lucas Colombo
parent
a0d2fee502
commit
38be548b55
@ -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
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user