@casoon/dragonfly/ui/patterns/code.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Code-Komponente
 * 
 * Formatierung für Code-Blöcke und Inline-Code-Elemente.
 * Code-Komponenten stellen Quellcode und Code-Schnipsel übersichtlich dar.
 * 
 * @layer components.code
 * 
 * Grundlegende Verwendung:
 * <pre class="code">
 *   <code>function example() {
 *     return "Hello World";
 *   }</code>
 * </pre>
 * 
 * Inline-Code:
 * <p>Verwenden Sie <code class="code-inline">console.log()</code> zum Debuggen.</p>
 * 
 * Mit Syntax-Hervorhebung (erfordert zusätzliches JS):
 * <pre class="code highlighted">
 *   <code class="language-javascript">
 *     function example() {
 *       return "Hello World";
 *     }
 *   </code>
 * </pre>
 * 
 * Mit Zeilennummern:
 * <pre class="code numbered">
 *   <div class="line-numbers">1</div>
 *   <code>function example() {</code>
 *   <div class="line-numbers">2</div>
 *   <code>  return "Hello World";</code>
 *   <div class="line-numbers">3</div>
 *   <code>}</code>
 * </pre>
 * 
 * Varianten:
 * <pre class="code dark">Dunkles Theme</pre>
 * <pre class="code light">Helles Theme</pre>
 * 
 * Mit Kopierknopf:
 * <div class="code-container">
 *   <pre class="code">...</pre>
 *   <button class="copy-button">Kopieren</button>
 * </div>
 * 
 * Terminal-Output:
 * <pre class="code terminal">
 *   <code>$ npm install @casoon/ui-lib</code>
 * </pre>
 */

@layer components {
  /* Inline-Code */
  .code-inline {
    background: var(--color-neutral-100, #f3f4f6);
    border-radius: var(--radius-sm, 0.125rem);
    color: var(--color-primary-700, #1d4ed8);
    font-family: var(--font-mono);
    font-size: var(--text-sm, 0.875rem);
    padding: var(--space-1) var(--space-2);
  }
  
  /* Code-Block */
  .code {
    background: var(--color-neutral-100, #f3f4f6);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-md, 0.375rem);
    color: var(--color-neutral-800, #1f2937);
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1%.4;
    margin: var(--space-4) 0;
    overflow-x: auto;
    padding: var(--space-4);
    
    pre {
      margin: 0;
    }
    
    code {
      display: block;
      font-family: inherit;
    }
    
    /* Zeilennummern */
    &.numbered {
      display: grid;
      gap: var(--space-4);
      grid-template-columns: auto 1fr;
      
      .line-numbers {
        border-right: 1px solid var(--color-neutral-300, #d1d5db);
        color: var(--color-neutral-500, #6b7280);
        padding-right: var(--space-2);
        text-align: right;
        user-select: none;
      }
    }
    
    /* Varianten */
    &.dark {
      background-color: var(--color-neutral-900, #111827);
      border-color: var(--color-neutral-800, #1f2937);
      color: var(--color-neutral-100, #f3f4f6);
    }
    
    &.light {
      background-color: var(--color-white, #fff);
      border-color: var(--color-neutral-200, #e5e7eb);
      color: var(--color-neutral-900, #111827);
    }
    
    &.terminal {
      background-color: var(--color-neutral-900, #111827);
      border-color: var(--color-neutral-800, #1f2937);
      color: var(--color-neutral-100, #f3f4f6);
      
      &::before {
        color: var(--color-neutral-500, #6b7280);
        content: '>';
        margin-right: var(--space-2);
      }
    }
    
    &.highlighted {
      /* Beispielfarben für Syntax-Hervorhebung - diese würden normalerweise
         durch eine JavaScript-Bibliothek wie Prism.js oder Highlight.js gesetzt */
      .keyword { color: var(--color-primary-600, #2563eb); }

      .string { color: var(--color-success-600); }

      .comment { color: var(--color-neutral-500, #6b7280); font-style: italic; }

      .function { color: var(--color-secondary-600); }

      .number { color: var(--color-warning-600); }
    }
  }
  
  /* Container mit Kopierknopf */
  .code-container {
    position: relative;
    
    .copy-button {
      background-color: var(--color-neutral-200, #e5e7eb);
      border: none;
      border-radius: var(--radius-sm, 0.125rem);
      color: var(--color-neutral-700, #374151);
      cursor: pointer;
      font-size: var(--text-xs, 0.75rem);
      opacity: 0%;
      padding: var(--space-1) var(--space-2);
      position: absolute;
      right: var(--space-2);
      top: var(--space-2);
      transition: opacity 150ms ease;
      
      &:hover {
        background-color: var(--color-neutral-300, #d1d5db);
        color: var(--color-neutral-900, #111827);
      }
    }
    
    &:hover .copy-button {
      opacity: 1;
    }
  }
}