caldwell/assets/sass/code.scss

pre {
  color: var(--text);
  background-color: var(--background-50);
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
}

/* PreWrapper */
.chroma {
  .line.prompt::before {
    content: "$ ";
  }

  /* Error */
  .err {
    color: var(--accent-600);
  }

  /* LineLink */
  .lnlinks {
    outline: none;
    text-decoration: none;
    color: inherit;
  }

  /* LineTableTD */
  .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0;
  }

  /* LineTable */
  .lntable {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  /* LineHighlight */
  .hl {
    background-color: var(--background-100);
  }

  /* LineNumbersTable */
  .lnt {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
  }

  /* LineNumbers */
  .ln {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
  }

  /* Line */
  .line {
    display: flex;
  }

  /* Keyword */
  .k {
    color: var(--secondary-700);
  }

  /* KeywordConstant */
  .kc {
    color: var(--primary-600);
  }

  /* KeywordDeclaration */
  .kd {
    color: var(--secondary-700);
  }

  /* KeywordNamespace */
  .kn {
    color: var(--secondary-700);
  }

  /* KeywordPseudo */
  .kp {
    color: var(--primary-600);
  }

  /* KeywordReserved */
  .kr {
    color: var(--secondary-700);
  }

  /* KeywordType */
  .kt {
    color: var(--secondary-700);
  }

  /* Name */
  .nc {
    color: var(--accent-700);
    font-weight: bold;
  }

  /* NameConstant */
  .no {
    color: var(--primary-600);
    font-weight: bold;
  }

  /* NameDecorator */
  .nd {
    color: var(--secondary-800);
    font-weight: bold;
  }

  /* NameEntity */
  .ni {
    color: var(--accent-700);
  }

  /* NameException */
  .ne {
    color: var(--accent-700);
    font-weight: bold;
  }

  /* NameLabel */
  .nl {
    color: var(--primary-600);
    font-weight: bold;
  }

  /* NameNamespace */
  .nn {
    color: var(--secondary-700);
  }

  /* NameProperty */
  .py {
    color: var(--primary-600);
  }

  /* NameTag */
  .nt {
    color: var(--primary-700);
  }

  /* NameVariable */
  .nv {
    color: var(--primary-600);
  }

  /* NameVariableClass */
  .vc {
    color: var(--primary-600);
  }

  /* NameVariableGlobal */
  .vg {
    color: var(--primary-600);
  }

  /* NameVariableInstance */
  .vi {
    color: var(--primary-600);
  }

  /* NameVariableMagic */
  .vm {
    color: var(--primary-600);
  }

  /* NameFunction */
  .nf {
    color: var(--secondary-800);
    font-weight: bold;
  }

  /* NameFunctionMagic */
  .fm {
    color: var(--secondary-800);
    font-weight: bold;
  }

  /* Literal */
  .l {
    color: var(--primary-700);
  }

  /* LiteralDate */
  .ld {
    color: var(--primary-600);
  }

  /* LiteralString */
  .s {
    color: var(--primary-700);
  }

  /* LiteralStringAffix */
  .sa {
    color: var(--primary-600);
  }

  /* LiteralStringBacktick */
  .sb {
    color: var(--primary-700);
  }

  /* LiteralStringChar */
  .sc {
    color: var(--primary-700);
  }

  /* LiteralStringDelimiter */
  .dl {
    color: var(--primary-600);
  }

  /* LiteralStringDoc */
  .sd {
    color: var(--primary-700);
  }

  /* LiteralStringDouble */
  .s2 {
    color: var(--primary-700);
  }

  /* LiteralStringEscape */
  .se {
    color: var(--primary-600);
  }

  /* LiteralStringHeredoc */
  .sh {
    color: var(--primary-600);
  }

  /* LiteralStringInterpol */
  .si {
    color: var(--primary-700);
  }

  /* LiteralStringOther */
  .sx {
    color: var(--primary-700);
  }

  /* LiteralStringRegex */
  .sr {
    color: var(--primary-600);
  }

  /* LiteralStringSingle */
  .s1 {
    color: var(--primary-700);
  }

  /* LiteralStringSymbol */
  .ss {
    color: var(--primary-700);
  }

  /* LiteralNumber */
  .m {
    color: var(--primary-700);
  }

  /* LiteralNumberBin */
  .mb {
    color: var(--primary-700);
  }

  /* LiteralNumberFloat */
  .mf {
    color: var(--primary-700);
  }

  /* LiteralNumberHex */
  .mh {
    color: var(--primary-700);
  }

  /* LiteralNumberInteger */
  .mi {
    color: var(--primary-700);
  }

  /* LiteralNumberIntegerLong */
  .il {
    color: var(--primary-700);
  }

  /* LiteralNumberOct */
  .mo {
    color: var(--primary-700);
  }

  /* Operator */
  .o {
    color: var(--secondary-700);
    font-weight: bold;
  }

  /* OperatorWord */
  .ow {
    color: var(--secondary-700);
    font-weight: bold;
  }

  /* Comment */
  .c {
    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
    font-style: italic;
  }

  /* CommentHashbang */
  .ch {
    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
    font-style: italic;
  }

  /* CommentMultiline */
  .cm {
    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
    font-style: italic;
  }

  /* CommentSingle */
  .c1 {
    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
    font-style: italic;
  }

  /* CommentSpecial */
  .cs {
    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
    font-weight: bold;
    font-style: italic;
  }

  /* CommentPreproc */
  .cp {
    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
    font-weight: bold;
    font-style: italic;
  }

  /* CommentPreprocFile */
  .cpf {
    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
    font-weight: bold;
    font-style: italic;
  }

  /* GenericDeleted */
  .gd {
    color: var(--accent-900);
    background-color: var(--accent-300);
  }

  /* GenericEmph */
  .ge {
    font-style: italic;
  }

  /* GenericError */
  .gr {
    color: var(--accent-600);
  }

  /* GenericHeading */
  .gh {
    color: var(--primary-600);
    font-weight: bold;
  }

  /* GenericInserted */
  .gi {
    color: var(--primary-800);
    background-color: var(--primary-200);
  }

  /* GenericOutput */
  .go {
    color: color-mix(in srgb, var(--text) 70%, var(--background-50));
  }

  /* GenericPrompt */
  .gp {
    color: color-mix(in srgb, var(--text) 70%, var(--background-50));
  }

  /* GenericStrong */
  .gs {
    font-weight: bold;
  }

  /* GenericSubheading */
  .gu {
    color: var(--primary-600);
  }

  /* GenericTraceback */
  .gt {
    color: var(--secondary-700);
  }

  /* GenericUnderline */
  .gl {
    text-decoration: underline;
  }
}