mirror of
https://github.com/material-components/material-web.git
synced 2026-03-09 00:09:23 +08:00
fbed917087
Oops I forgot to copy this over form my local env to internal code review. In this CL I expose --catalog-code-block-border-radius so that it's available to the copy button component. Additionally, run syntax-highlight.css through prettier because my old formatter was the built-in vscode one. Also removed nowrap from the navigation pane since I just went with a fixed width. PiperOrigin-RevId: 538700609
159 lines
4.4 KiB
CSS
159 lines
4.4 KiB
CSS
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
/**
|
|
* @fileoverview This file handles syntax highlighting for markdown-it /
|
|
* highlight.js formatted codeblocks as well as playground-elements and anything
|
|
* else related to code styles.
|
|
*/
|
|
|
|
:root {
|
|
--__code-block-font-size: var(--catalog-body-m-font-size);
|
|
--playground-highlight-color: var(--md-sys-color-primary);
|
|
--playground-code-font-size: var(--__code-block-font-size);
|
|
--playground-code-background: var(--md-sys-color-surface-variant);
|
|
--playground-code-default-color: var(--md-sys-color-on-surface-variant);
|
|
--playground-code-font-family: 'Google Sans Mono', Menlo, Monaco,
|
|
'Courier New', monospace;
|
|
--playground-code-callee-color: var(--md-sys-color-primary);
|
|
--playground-code-comment-color: var(--md-sys-color-on-surface-dim);
|
|
--playground-code-operator-color: var(--md-sys-color-on-surface);
|
|
--playground-code-tag-color: var(--md-sys-color-primary);
|
|
--playground-code-number-color: var(--md-sys-color-primary);
|
|
--playground-code-atom-color: var(--md-sys-color-primary);
|
|
--playground-code-string-color: var(--md-sys-color-secondary);
|
|
--playground-code-attribute-color: var(--md-sys-color-tertiary);
|
|
--playground-code-string-2-color: var(--md-sys-color-on-surface-variant);
|
|
--playground-code-keyword-color: var(--md-sys-color-tertiary);
|
|
--playground-code-variable-2-color: var(--md-sys-color-secondary);
|
|
--playground-code-def-color: var(--md-sys-color-on-surface-variant);
|
|
--playground-code-property-color: var(--md-sys-color-on-surface-variant);
|
|
--playground-code-variable-color: var(--md-sys-color-on-surface-variant);
|
|
--playground-code-type-color: var(--md-sys-color-error);
|
|
--playground-code-linenumber-color: var(--md-sys-color-outline);
|
|
--playground-code-qualifier-color: var(--md-sys-color-tertiary);
|
|
--playground-code-cursor-color: var(--md-sys-color-on-surface-variant);
|
|
--playground-preview-toolbar-background: var(
|
|
--md-sys-color-surface-container-high
|
|
);
|
|
--playground-preview-toolbar-foreground-color: var(--md-sys-color-on-surface);
|
|
|
|
/* perfect circle of one line is (padding-block * 2 + (line-height: 1.5x font size)) / 2 */
|
|
--catalog-code-block-border-radius: calc(
|
|
(2 * var(--__code-block-font-size) + 1.5 * var(--__code-block-font-size)) /
|
|
2
|
|
);
|
|
}
|
|
|
|
/* Formats the code boxes themselves */
|
|
.example playground-file-editor,
|
|
pre[class*='language-'] {
|
|
padding: var(--__code-block-font-size);
|
|
/* Remove the extra hard coded 3px from line number padding. */
|
|
padding-inline-start: calc(var(--__code-block-font-size) - 3px);
|
|
border-radius: var(--catalog-code-block-border-radius);
|
|
}
|
|
|
|
playground-file-editor {
|
|
margin-block: 1em;
|
|
background-color: var(--md-sys-color-surface-variant);
|
|
text-shadow: 0 1px 1px var(--md-sys-color-surface-variant);
|
|
}
|
|
|
|
code,
|
|
code[class*='language-'],
|
|
pre[class*='language-'] {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
text-shadow: 0 1px 1px var(--md-sys-color-surface);
|
|
font-family: 'Google Sans Mono', Menlo, Monaco, 'Courier New', monospace;
|
|
direction: ltr;
|
|
text-align: left;
|
|
word-spacing: normal;
|
|
white-space: pre;
|
|
word-wrap: normal;
|
|
line-height: 1.5;
|
|
font-size: var(--__code-block-font-size);
|
|
background: none;
|
|
border: 0;
|
|
tab-size: 2;
|
|
hyphens: none;
|
|
}
|
|
|
|
pre[class*='language-'],
|
|
:not(pre) > code[class*='language-'] {
|
|
background: var(--md-sys-color-surface-container);
|
|
border: 1px solid var(--md-sys-color-outline);
|
|
}
|
|
|
|
/* Code blocks */
|
|
pre[class*='language-'] {
|
|
overflow: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Inline code */
|
|
:not(pre) > code[class*='language-'] {
|
|
padding: 5px 10px;
|
|
line-height: 1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.token.comment,
|
|
.token.prolog,
|
|
.token.doctype,
|
|
.token.cdata {
|
|
color: var(--md-sys-color-on-surface-dim);
|
|
}
|
|
|
|
.token.selector,
|
|
.token.operator,
|
|
.token.punctuation {
|
|
color: var(--md-sys-color-on-surface-bright);
|
|
}
|
|
|
|
.token.namespace {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.token.tag,
|
|
.token.boolean,
|
|
.token.number {
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
|
|
.token.atrule,
|
|
.token.attr-value,
|
|
.token.hex,
|
|
.token.string {
|
|
color: var(--md-sys-color-secondary);
|
|
}
|
|
|
|
.token.property,
|
|
.token.entity,
|
|
.token.url,
|
|
.token.attr-name,
|
|
.token.keyword {
|
|
color: var(--md-sys-color-tertiary);
|
|
}
|
|
|
|
.token.regex {
|
|
color: var(--md-sys-color-on-tertiary-container);
|
|
}
|
|
|
|
.token.entity {
|
|
cursor: help;
|
|
}
|
|
|
|
.token.function,
|
|
.token.constant {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
|
|
.token.important,
|
|
.token.deliminator {
|
|
color: var(--md-sys-color-error);
|
|
}
|