leo/essence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve colors of Prism theme.

Browse Source
This commit is contained in:
Leo
2024-09-11 15:10:02 -05:00
parent e74c42372f
commit 8461e4e7b4
1 changed files with 106 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
scss/vendors/_prismjs.scss vendored
View File

@@ -1,16 +1,16 @@
/** /**
* Prism Essence Theme, based on Material Theme. * Essence's Prism Theme, based on Material Theme, but brighter.
* *
* Author: Leo Nguyen * Author: Leo Nguyen
*/ */
$prism-bg: hsl(220, 25%, 25%); $prism-bg: hsl(220, 15%, 20%);
$prism-gray: hsl(230, 40%, 70%); $prism-gray: hsl(210, 30%, 65%);
$prism-red: hsl(0, 100%, 80%); $prism-red: hsl(0, 100%, 80%);
$prism-orange: hsl(15, 90%, 70%); $prism-orange: hsl(25, 100%, 70%);
$prism-yellow: hsl(50, 100%, 75%); $prism-yellow: hsl(50, 100%, 70%);
$prism-green: hsl(100, 80%, 80%); $prism-green: hsl(100, 80%, 80%);
$prism-cyan: hsl(200, 100%, 80%); $prism-cyan: hsl(190, 100%, 80%);
$prism-blue: hsl(230, 100%, 80%); $prism-blue: hsl(230, 100%, 80%);
$prism-purple: hsl(275, 100%, 80%); $prism-purple: hsl(275, 100%, 80%);
pre { pre {
@@ -18,14 +18,10 @@ pre {
padding: 1.5rem; padding: 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: $prism-bg; background: $prism-bg;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1rem;
line-height: 1.5; line-height: 1.5;
overflow: auto; overflow: auto;
white-space: pre; white-space: pre;
word-spacing: normal; word-spacing: normal;
word-break: normal;
word-wrap: normal;
tab-size: 4; tab-size: 4;
hyphens: none; hyphens: none;
@@ -36,100 +32,105 @@ pre {
} }
} }
/* Purple (keyword) */ div.code-toolbar > .toolbar > .toolbar-item > a,
.token.keyword, div.code-toolbar > .toolbar > .toolbar-item > button,
.token.important, div.code-toolbar > .toolbar > .toolbar-item > span {
.token.builtin,
.token.atrule {
color: $prism-purple;
}
/* Yellow (entity, class) */
.token.entity,
.token.class,
.token.name,
.token.class-name,
.token.package,
.token.scope,
.token.attr-name {
color: $prism-yellow;
}
/* Blue (function) */
.token.function-name,
.token.function {
color: $prism-blue;
}
/* Red (tag) */
.token.tag,
.token.namespace,
.token.selector,
.token.deleted {
color: $prism-red;
}
/* Green (string, attribute) */
.token.string,
.token.char,
.token.property,
.token.attr-value,
.token.regex {
color: $prism-green;
}
/* Orange (number, literal) */
.token.number,
.token.boolean,
.token.constant {
color: $prism-orange;
}
/* Cyan (sign) */
.token.symbol,
.token.punctuation,
.token.operator,
.token.url,
.token.unit,
.token.hexcode,
.token.doctype-tag {
color: $prism-cyan;
}
/* White (variable, CSS pseudo class) */
.token.variable,
.token.pseudo-class {
color: #fff;
}
/* Gray (comment) */
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: $prism-gray;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: green;
}
div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > span {
padding: 0.5em 1em; padding: 0.5em 1em;
margin: 0.25em 0.5em; margin: 0.25em 0.5em;
font-size: 0.9em; font-size: 0.9em;
color: #eee; color: #eee;
} }
.token {
/* Red (constant, tag, selector) */
&.constant,
&.tag,
&.selector,
&.namespace,
&.deleted {
color: $prism-red;
}
/* Orange/Red (number, boolean, constant) */
&.number,
&.boolean {
color: $prism-orange;
}
/* Yellow (entity, class) */
&.entity,
&.class,
&.name,
&.class-name,
&.package,
&.scope,
&.attr-name {
color: $prism-yellow;
}
/* Green (string, attribute) */
&.string,
&.char,
&.property,
&.attr-value,
&.regex {
color: $prism-green;
}
/* Cyan (symbol) */
&.symbol,
&.punctuation,
&.operator,
&.url,
&.unit,
&.hexcode,
&.doctype-tag {
color: $prism-cyan;
}
/* Blue (function) */
&.function-name,
&.function {
color: $prism-blue;
}
/* Purple (keyword) */
&.keyword,
&.important,
&.builtin,
&.atrule {
color: $prism-purple;
}
/* White (variable, CSS pseudo class) */
&.variable,
&.pseudo-class {
color: #fff;
}
/* Gray (comment) */
&.comment,
&.block-comment,
&.prolog,
&.doctype,
&.cdata {
color: $prism-gray;
}
// &.important,
&.bold {
font-weight: bold;
}
&.italic {
font-style: italic;
}
&.entity {
cursor: help;
}
&.inserted {
color: green;
}
}