SF Code
The Code block restyled for dark backgrounds: a tinted panel with a glowing border and monochrome highlighting in --sf-color. Same properties as Code.
Examples
@customElement('demo-el')
export class DemoEl extends LitElement {
static styles = css`
:host { color: var(--sf-color, #f90); }
`;
render() {
return html`<p>Hello</p>`;
}
}<zakuni-sf-button style="--sf-color: #7df9ff">Engage</zakuni-sf-button>.hud { box-shadow: 0 0 8px var(--sf-color, #f90); }Properties
| Name | Type | Default | Description |
|---|---|---|---|
code | string | '' | Source to display. Highlighted during server-side rendering when set; otherwise slotted text is highlighted after hydration. |
language | 'ts' | 'html' | 'css' | auto | Language to highlight as. When omitted, text starting with < is treated as HTML and everything else as TypeScript. |
CSS variables
| Name | Type | Default | Description |
|---|---|---|---|
--sf-color | <color> | #f90 | Tint for the border, glow and all token colours. |
--code-* | <color> | derived from --sf-color | The Code block's palette variables still apply and override the derived colours when set. |
Usage
<zakuni-sf-code language="html" style="--sf-color: #7df9ff"><button>Go</button></zakuni-sf-code>This component extends zakuni-code, so both files are needed when copying it into a project. Highlighting and the code / language properties behave exactly as in Code.
Implementation
import { css, type CSSResultGroup } from 'lit';
import { customElement } from 'lit/decorators.js';
import { ZakuniCode } from './zakuni-code';
/**
* The Code block restyled for dark backgrounds. Inherits highlighting and the
* `code` / `language` properties from `zakuni-code`; only the palette differs,
* so this file depends on `zakuni-code.ts` being present alongside it.
*/
@customElement('zakuni-sf-code')
export class ZakuniSFCode extends ZakuniCode {
static styles: CSSResultGroup = [
ZakuniCode.styles,
css`
:host {
--_c: var(--sf-color, #f90);
--code-bg: color-mix(in srgb, var(--_c) 6%, #000);
--code-fg: color-mix(in srgb, var(--_c) 80%, #fff);
--code-comment: color-mix(in srgb, var(--_c) 45%, transparent);
--code-string: color-mix(in srgb, var(--_c) 55%, #fff);
--code-keyword: var(--_c);
--code-decorator: var(--_c);
--code-number: color-mix(in srgb, var(--_c) 70%, #fff);
--code-tag: var(--_c);
--code-attr: color-mix(in srgb, var(--_c) 60%, #fff);
}
div {
border: 1px solid color-mix(in srgb, var(--_c) 60%, transparent);
border-radius: 1px;
box-shadow:
0 0 8px color-mix(in srgb, var(--_c) 50%, transparent),
inset 0 0 12px color-mix(in srgb, var(--_c) 15%, transparent);
}
code {
font-weight: 300;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"zakuni-sf-code": ZakuniSFCode;
}
}