cirrus-ui/src/components/code.scss

A lightweight UI framework written in SCSS

@use '../src/internal' as *;

@if should-generate-classes($CODE) {
    /* CODE */
    code {
        --cirrus-code-label-fg: #{fill('gray', '600')};
        --cirrus-code-fg: #{fill('red', '900')};
        padding: 0.3rem;
        margin: 0.5em 0;
        overflow: auto;
        background-color: var(--cirrus-code-bg);
        color: var(--cirrus-code-fg);
        border-radius: 3px;

        /* Dark theme for code */
        &.dark {
            --cirrus-code-bg: #{fill('gray', '800')};
            --cirrus-code-fg: #{fill('gray', '000')};
            --cirrus-border-left-bg: #{fill('gray', '900')};
            --cirrus-code-label-fg: #{fill('gray', '400')};
        }
    }

    pre > code {
        --cirrus-code-bg: #{fill('gray', '000')};
        --cirrus-code-fg: #{fill('gray', '800')};
        --cirrus-border-left-bg: #{fill('gray', '200')};
        background-color: var(--cirrus-code-bg);
        font-size: 14px;
        display: block;
        padding: 1rem;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
        text-align: left;
        line-height: 1.5;
        tab-size: 4;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
        border-left: 0.3rem solid var(--cirrus-border-left-bg);
        margin: 0;
        position: relative;
        color: var(--cirrus-code-fg);

        &[data-lang]:not([data-lang='']) {
            padding: 2rem 1.5rem 1rem;
        }

        &::before {
            color: var(--cirrus-code-label-fg);
            content: attr(data-lang);
            font-size: 0.9rem;
            position: absolute;
            right: 1rem;
            top: 0.7rem;
        }
    }
}