KERN — Vorher / Nachher

Ohne KERN

Alles selbst gebaut

Farbe, Abstände & Ecken haben wir geraten.
Kein sichtbarer Fokus für Tastatur-Nutzer.

function AbsendenButton() {
  return (
    <button className="my-button" type="button">
      Absenden
    </button>
  )
}

.my-button {
  background-color: #004b76;   /* geratenes Blau */
  color: #ffffff;
  padding: 8px 18px;
  border: none;
  border-radius: 3px;
  font-size: 15px;
  cursor: pointer;
}

.my-button:hover {
  background-color: #003a5c;   /* wieder geraten */
}

/* Fokus-Zustand vergessen → nicht barrierefrei */

Mit KERN

Fertiger Baustein

Amtliche Farbe, Abstände & Ecken.
Sichtbarer Fokus-Ring — mit Tab ansteuerbar.

function AbsendenButton() {
  return (
    <button className="kern-btn kern-btn--primary" type="button">
      <span className="kern-label">Absenden</span>
    </button>
  )
}

.kern-btn--primary {
  background-color: var(--kern-color-primary);
}

Live · zum Ausprobieren

Eine Variable — zwei Wege

Bitte prüfen Sie Ihre Eingabe

Hausfarbe umstellen:

Ein Klick setzt --kern-color-primary neu. Überschrift und Button wechseln gemeinsam — sie lesen denselben Topf. Achte auf den „Ohne KERN"-Button ganz oben: der bleibt stur blau, weil seine Farbe fest eingetippt ist.

function Hinweis() {
  return (
    <div className="mein-bereich">        {/* ← hier hängt die Klasse */}
      <h2>Bitte prüfen Sie Ihre Eingabe</h2>
      <button className="kern-btn kern-btn--primary">
        <span className="kern-label">Absenden</span>
      </button>
    </div>
  )
}

/* DEINE Regel — färbt den Text im div */
.mein-bereich {
  color: var(--kern-color-primary);
}

/* KERNs eingebaute Regel — liest denselben Topf */
.kern-btn--primary {
  background-color: var(--kern-color-primary);
}

Farben

Ohne: geraten. Mit KERN: amtlich vorgegeben — überall dasselbe Blau.

Barrierefreiheit

Ohne: selbst sicherstellen. Mit KERN: schon eingebaut & geprüft.

Aufwand

Ohne: viel eigenes CSS. Mit KERN: fast keins.

Wartung

Ohne: jede App einzeln ändern. Mit KERN: zentral aktualisiert.