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

Use CSS variables for Prism.

Browse Source
This commit is contained in:
Leo
2024-09-11 15:46:38 -05:00
parent 8461e4e7b4
commit a61f3240f9
1 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
scss/vendors/_prismjs.scss vendored
View File

@@ -3,21 +3,35 @@
* *
* Author: Leo Nguyen * Author: Leo Nguyen
*/ */
$prism-bg: hsl(220, 15%, 20%); :root {
$prism-gray: hsl(210, 30%, 65%); --prism-bg: hsl(220, 15%, 20%);
$prism-red: hsl(0, 100%, 80%); --prism-gray: hsl(210, 30%, 65%);
$prism-orange: hsl(25, 100%, 70%); --prism-red: hsl(0, 100%, 80%);
$prism-yellow: hsl(50, 100%, 70%); --prism-orange: hsl(25, 100%, 70%);
$prism-green: hsl(100, 80%, 80%); --prism-yellow: hsl(50, 100%, 70%);
$prism-cyan: hsl(190, 100%, 80%); --prism-green: hsl(100, 80%, 80%);
$prism-blue: hsl(230, 100%, 80%); --prism-cyan: hsl(190, 100%, 80%);
$prism-purple: hsl(275, 100%, 80%); --prism-blue: hsl(230, 100%, 80%);
--prism-purple: hsl(275, 100%, 80%);
}
.prism-theme-material {
--prism-bg: #263238;
--prism-gray: #546e7a;
--prism-red: #f07178;
--prism-orange: #f78c6c;
--prism-yellow: #ffcb6b;
--prism-green: #c3e88d;
--prism-cyan: #89ddff;
--prism-blue: #82aaff;
--prism-purple: #c792ea;
}
pre { pre {
margin: 0.5rem 0 1rem; margin: 0.5rem 0 1rem;
padding: 1.5rem; padding: 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: $prism-bg; background: var(--prism-bg);
line-height: 1.5; line-height: 1.5;
overflow: auto; overflow: auto;
white-space: pre; white-space: pre;
@@ -28,7 +42,7 @@ pre {
code { code {
padding: 0; padding: 0;
color: #fff; color: #fff;
background: $prism-bg; background: var(--prism-bg);
} }
} }
@@ -48,13 +62,13 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
&.selector, &.selector,
&.namespace, &.namespace,
&.deleted { &.deleted {
color: $prism-red; color: var(--prism-red);
} }
/* Orange/Red (number, boolean, constant) */ /* Orange/Red (number, boolean, constant) */
&.number, &.number,
&.boolean { &.boolean {
color: $prism-orange; color: var(--prism-orange);
} }
/* Yellow (entity, class) */ /* Yellow (entity, class) */
@@ -65,7 +79,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
&.package, &.package,
&.scope, &.scope,
&.attr-name { &.attr-name {
color: $prism-yellow; color: var(--prism-yellow);
} }
/* Green (string, attribute) */ /* Green (string, attribute) */
@@ -74,7 +88,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
&.property, &.property,
&.attr-value, &.attr-value,
&.regex { &.regex {
color: $prism-green; color: var(--prism-green);
} }
/* Cyan (symbol) */ /* Cyan (symbol) */
@@ -85,13 +99,13 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
&.unit, &.unit,
&.hexcode, &.hexcode,
&.doctype-tag { &.doctype-tag {
color: $prism-cyan; color: var(--prism-cyan);
} }
/* Blue (function) */ /* Blue (function) */
&.function-name, &.function-name,
&.function { &.function {
color: $prism-blue; color: var(--prism-blue);
} }
/* Purple (keyword) */ /* Purple (keyword) */
@@ -99,7 +113,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
&.important, &.important,
&.builtin, &.builtin,
&.atrule { &.atrule {
color: $prism-purple; color: var(--prism-purple);
} }
/* White (variable, CSS pseudo class) */ /* White (variable, CSS pseudo class) */
@@ -114,7 +128,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
&.prolog, &.prolog,
&.doctype, &.doctype,
&.cdata { &.cdata {
color: $prism-gray; color: var(--prism-gray);
} }
// &.important, // &.important,