feat: ✨ update theme colors and improve styling for better readability
Lucas Colombo
1 month ago
parent
a0d2fee502
commit
38be548b55
@ -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');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue