Layering

Das Konzept

Das Contextual Layering System ermöglicht es Komponenten, ihre visuelle Erscheinung (Hintergrundfarben, Rahmen, Icons) automatisch an ihre hierarchische Ebene im Interface anzupassen. Anstatt für jede Verschachtelungstiefe manuell neue Farbklassen zu definieren, nutzen wir Contextual Awareness (Kontextsensitivität). Komponenten "wissen", auf welcher Ebene sie liegen, und ziehen sich die entsprechenden Design-Tokens über CSS-Variablen.

Die Level-Struktur

Wir unterscheiden zwischen drei primären Verschachtelungstiefen, um optische Trennung und Fokus zu erzeugen:

• Level 0: Die Basisebene der Seite. Sie bildet den Hintergrund und enthält die grundlegenden Inhalte (meist auf dem Body definiert).
• Level 1: Erhöhte Container oder Bereiche, die sich optisch von der Basisebene abheben und wichtige Inhalte hervorheben (z. B. eine Card auf dem Body).
• Level 2: Elemente innerhalb eines erhöhten Containers, die sich zusätzlich abgrenzen und besonders im Fokus der Nutzer:innen stehen sollen (z. B. Inset-Elemente oder Modale).

Funktionsweise (Technisch)

Das System basiert auf CSS-Custom-Properties, die innerhalb der Klassen .kern-level-0, .kern-level-1 und .kern-level-2 neu definiert werden. Jede Komponente im Inneren greift auf diese "kontextuellen" Variablen zu (z. B. --kern-color-decorative-border-contextual).

Verschachtelung am Beispiel von Accordions

Accordions passen sich automatisch an den Layer an, in dem sie sich befinden – allerdings nur, wenn der umgebende Container die passende Level-Klasse (.kern-level-0, .kern-level-1 oder .kern-level-2) trägt. Ohne diese Klassen kennen die kontextuellen Variablen ihren aktuellen Layer nicht und die visuelle Tiefe bei Verschachtelungen geht verloren. Setze daher bei jeder neuen Verschachtelungsebene zwingend die entsprechende .kern-level-*-Klasse auf den umschließenden .kern-layer-Container.

Code anzeigen

<div class="kern-layer kern-level-0 kern-p-xl">
<h4 class="kern-heading-medium">Layer Level-0 (Default)</h4>
<div class="kern-accordion-group">
  <details class="kern-accordion">
    <summary class="kern-accordion__header">
      <span class="kern-title">Accordion</span>
    </summary>
    <section class="kern-accordion__body">
      <p class="kern-body">Inhalt auf Level 0</p>
    </section>
  </details>
</div>

<div class="kern-layer kern-level-1 kern-p-xl">
  <h4 class="kern-heading-medium">Layer Level-1</h4>
  <div class="kern-accordion-group">
    <details class="kern-accordion">
      <summary class="kern-accordion__header">
        <span class="kern-title">Accordion</span>
      </summary>
      <section class="kern-accordion__body">
        <p class="kern-body">Inhalt auf Level 1</p>
      </section>
    </details>
  </div>

  <div class="kern-layer kern-level-2 kern-p-xl">
    <h4 class="kern-heading-medium">Layer Level-2</h4>
    <div class="kern-accordion-group">
      <details class="kern-accordion">
        <summary class="kern-accordion__header">
          <span class="kern-title">Accordion</span>
        </summary>
        <section class="kern-accordion__body">
          <p class="kern-body">Inhalt auf Level 2</p>
        </section>
      </details>
    </div>
  </div>
</div>
</div>