Update Eric Bailey's a11y syntax highlighting stylesheet
This commit is contained in:
Helen Chong
parent
d6c37eaa53
commit
3037127e5c
|
|
@ -1,27 +1,64 @@
|
|||
/**
|
||||
* a11y-dark theme for JavaScript, CSS, and HTML
|
||||
/*
|
||||
* a11y theme for JavaScript, CSS, and HTML
|
||||
* Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
|
||||
* @author ericwbailey
|
||||
*/
|
||||
|
||||
/*
|
||||
Theme
|
||||
* MARK: Setup
|
||||
*/
|
||||
@layer vendor-prism {
|
||||
@media (forced-colors: none), (forced-colors: active) {
|
||||
:root {
|
||||
--prism-a11y-border-radius: 0.3em;
|
||||
--prism-a11y-font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
--prism-a11y-line-height: 1.5;
|
||||
--prism-a11y-code-block-margin: 0.5em 0;
|
||||
--prism-a11y-code-block-padding: 1em;
|
||||
--prism-a11y-code-inline-padding: 0.1em;
|
||||
--prism-a11y-width-border: 1px;
|
||||
--prism-a11y-width-tab: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: none), (forced-colors: active) {
|
||||
:root {
|
||||
--prism-a11y-color-background: hsla(0, 0%, 17%, 1);
|
||||
--prism-a11y-color-text-no-token: hsla(60, 30%, 96%, 1);
|
||||
--prism-a11y-color-text-comment: hsla(54, 32%, 75%, 1);
|
||||
--prism-a11y-color-text-blue: hsla(180, 100%, 44%, 1);
|
||||
--prism-a11y-color-text-green: hsla(80, 75%, 55%, 1);
|
||||
--prism-a11y-color-text-gray: hsla(60, 30%, 96%, 1);
|
||||
--prism-a11y-color-text-purple: hsla(291, 30%, 83%, 1);
|
||||
--prism-a11y-color-text-red: hsla(17, 100%, 74%, 1);
|
||||
--prism-a11y-color-text-yellow: hsla(51, 100%, 50%, 1);
|
||||
--prism-a11y-plugin-color-border: hsla(51, 100%, 50%, 0.55);
|
||||
--prism-a11y-plugin-color-background: hsla(51, 100%, 50%, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (forced-colors: none), (forced-colors: active) {
|
||||
/*
|
||||
* MARK: Theme
|
||||
*/
|
||||
:where(
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
pre[class*="language-"]
|
||||
) {
|
||||
color: var(--prism-a11y-color-text-no-token);
|
||||
background: var(--prism-a11y-color-background);
|
||||
font-family: var(--prism-a11y-font-family);
|
||||
text-align: start;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
line-height: var(--prism-a11y-line-height);
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: var(--prism-a11y-width-tab);
|
||||
-o-tab-size: var(--prism-a11y-width-tab);
|
||||
tab-size: var(--prism-a11y-width-tab);
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
|
|
@ -31,85 +68,97 @@ pre[class*="language-"] {
|
|||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
padding: var(--prism-a11y-code-block-padding);
|
||||
margin: var(--prism-a11y-code-block-margin);
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
border-radius: var(--prism-a11y-border-radius);
|
||||
}
|
||||
|
||||
:where(
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #2b2b2b;
|
||||
pre[class*="language-"]
|
||||
) {
|
||||
background: var(--prism-a11y-color-background);
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
padding: var(--prism-a11y-code-inline-padding);
|
||||
border-radius: var(--prism-a11y-border-radius);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
:where(
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #d4d0ab;
|
||||
.token.cdata
|
||||
) {
|
||||
color: var(--prism-a11y-color-text-comment);
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #fefefe;
|
||||
color: var(--prism-a11y-color-text-gray);
|
||||
}
|
||||
|
||||
:where(
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #ffa07a;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #00e0e0;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #abe338;
|
||||
.token.deleted
|
||||
) {
|
||||
color: var(--prism-a11y-color-text-red);
|
||||
}
|
||||
|
||||
:where(
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #00e0e0;
|
||||
.token.variable,
|
||||
.token.keyword
|
||||
) {
|
||||
color: var(--prism-a11y-color-text-blue);
|
||||
}
|
||||
|
||||
:where(
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted
|
||||
) {
|
||||
color: var(--prism-a11y-color-text-green);
|
||||
}
|
||||
|
||||
:where(
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #00e0e0;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #ffd700;
|
||||
.token.important
|
||||
) {
|
||||
color: var(--prism-a11y-color-text-yellow);
|
||||
}
|
||||
|
||||
:where(
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.keyword
|
||||
) {
|
||||
color: var(--prism-a11y-color-text-purple);
|
||||
}
|
||||
|
||||
:where(
|
||||
.token.important,
|
||||
.token.bold {
|
||||
.token.bold
|
||||
) {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -120,69 +169,50 @@ pre[class*="language-"] {
|
|||
|
||||
|
||||
/*
|
||||
Plugin support
|
||||
* MARK: Plugin support
|
||||
*/
|
||||
|
||||
/* Line highlight */
|
||||
.line-highlight {
|
||||
background: rgba(255, 217, 0, 0.10);
|
||||
border-top: 1px solid rgba(255, 217, 0, 0.55);
|
||||
border-bottom: 1px solid rgba(255, 217, 0, 0.55);
|
||||
background: var(--prism-a11y-plugin-color-background);
|
||||
border-top: var(--prism-a11y-width-border) solid var(--prism-a11y-plugin-color-border);
|
||||
border-bottom: var(--prism-a11y-width-border) solid var(--prism-a11y-plugin-color-border);
|
||||
}
|
||||
|
||||
/* Line numbers */
|
||||
.line-numbers .line-numbers-rows {
|
||||
border-right: 1px solid #F8F8F2;
|
||||
border-right: var(--prism-a11y-width-border) solid var(--prism-a11y-color-text-no-token);
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
color: #D4D0AB;
|
||||
color: var(--prism-a11y-color-text-comment);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
High contrast mode support
|
||||
* MARK: Forced color mode support
|
||||
*/
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: windowText;
|
||||
background: window;
|
||||
@media (forced-colors: active) {
|
||||
:root {
|
||||
--prism-a11y-color-background: Canvas;
|
||||
--prism-a11y-color-text-no-token: CanvasText;
|
||||
--prism-a11y-color-text-comment: GrayText;
|
||||
--prism-a11y-color-text-blue: LinkText;
|
||||
--prism-a11y-color-text-gray: LinkText;
|
||||
--prism-a11y-color-text-green: CanvasText;
|
||||
--prism-a11y-color-text-purple: CanvasText;
|
||||
--prism-a11y-color-text-red: CanvasText;
|
||||
--prism-a11y-color-text-yellow: GrayText;
|
||||
--prism-a11y-plugin-color-border: LinkText;
|
||||
--prism-a11y-plugin-color-background: Canvas;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: window;
|
||||
}
|
||||
|
||||
.token.important {
|
||||
background: highlight;
|
||||
color: window;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.keyword,
|
||||
.token.operator,
|
||||
.token.selector {
|
||||
:where(
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.keyword
|
||||
) {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.attr-value,
|
||||
.token.comment,
|
||||
.token.doctype,
|
||||
.token.function,
|
||||
.token.keyword,
|
||||
.token.operator,
|
||||
.token.property,
|
||||
.token.string {
|
||||
color: highlight;
|
||||
}
|
||||
|
||||
.token.attr-value,
|
||||
.token.url {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
|
@ -96,9 +96,10 @@ code {
|
|||
word-break: break-word;
|
||||
}
|
||||
|
||||
:not(pre) > code { padding: 0.125em 0.25em; }
|
||||
:not(pre) > code,
|
||||
pre { background-color: var(--clr-code-bg); }
|
||||
:not(pre) > code {
|
||||
padding: 0.125em 0.25em;
|
||||
background-color: var(--clr-code-bg);
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 0.1em solid var(--clr-code-border);
|
||||
|
|
|
|||
Loading…
Reference in New Issue