/* * Tempest Highlight theme for documentation code blocks. * * Based on Tempest's bundled themes: * - vendor/tempest/highlight/src/Themes/Css/github-light.css * - vendor/tempest/highlight/src/Themes/Css/github-dark.css * * Tempest outputs token classes such as .hl-keyword, .hl-value, etc. We scope * them under .hl-block to avoid affecting inline code elsewhere in Drupal. * The portal stores dark mode on , so the same * server-rendered markup switches palette instantly when the user toggles the * theme. */ .hl-block { color: #24292e; background-color: #ffffff; border: 1px solid var(--semantic-outline-variant); border-radius: .5rem; padding: 1rem 1.15rem; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.5; } .hl-block code { color: inherit; background-color: transparent; } .hl-block .hl-keyword { color: #d73a49; } .hl-block .hl-property { color: #34a853; } .hl-block .hl-attribute { font-style: italic; } .hl-block .hl-type { color: #ea4334; } .hl-block .hl-generic { color: #9d3af6; } .hl-block .hl-value, .hl-block .hl-literal, .hl-block .hl-number { color: #032f62; } .hl-block .hl-variable { color: #e36209; } .hl-block .hl-comment { color: #6a737d; } .hl-block .hl-blur { filter: blur(2px); } .hl-block .hl-strong { font-weight: bold; } .hl-block .hl-em { font-style: italic; } .hl-block .hl-addition { display: inline-block; min-width: 100%; background-color: #00ff0022; } .hl-block .hl-deletion { display: inline-block; min-width: 100%; background-color: #ff000011; } .hl-block .hl-gutter { display: inline-block; font-size: .9em; color: #555555; padding: 0 1ch; margin-right: 1ch; user-select: none; } .hl-block .hl-gutter-addition { background-color: #34a853; color: #ffffff; } .hl-block .hl-gutter-deletion { background-color: #ea4334; color: #ffffff; } html.theme-dark .hl-block, .hl-block.dark { color: #e1e4e8; background-color: #24292e; } html.theme-dark .hl-block .hl-keyword, .hl-block.dark .hl-keyword { color: #f97583; } html.theme-dark .hl-block .hl-property, .hl-block.dark .hl-property { color: #34a853; } html.theme-dark .hl-block .hl-type, .hl-block.dark .hl-type { color: #ea4334; } html.theme-dark .hl-block .hl-generic, .hl-block.dark .hl-generic { color: #9d3af6; } html.theme-dark .hl-block .hl-value, html.theme-dark .hl-block .hl-literal, html.theme-dark .hl-block .hl-number, .hl-block.dark .hl-value, .hl-block.dark .hl-literal, .hl-block.dark .hl-number { color: #9ecbff; } html.theme-dark .hl-block .hl-variable, .hl-block.dark .hl-variable { color: #ffab70; } html.theme-dark .hl-block .hl-comment, .hl-block.dark .hl-comment { color: #6a737d; }