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