@conciso/design-system 2.1.1 → 2.2.0

package/css/components.css

@@ -43,6 +43,12 @@
 .btn-ki   {--c500:var(--ki-800);--c50:var(--ki-50)}
 .btn-es   {--c500:var(--es-700);--c50:var(--es-50)}
 .btn-wo   {--c500:var(--wo-700);--c50:var(--wo-50)}
+/* Ton-Modifier: destruktive Aktion, die sich nicht rückgängig machen lässt (Löschen, Verwerfen).
+   Setzt dieselben zwei Tokens wie die Bereichsklassen und steht deshalb hinter ihnen: Trägt ein
+   Button beide Klassen, gewinnt der Ton. Kombinierbar mit jeder Stil-Variante, gedacht für Filled,
+   Outlined und Text. Light: Weiß auf --c-error 8,01:1, --c-error auf bg-page 8,01:1, Tonal-Text auf
+   --c-error-bg 4,99:1. Dark-Werte in dark-mode.css. */
+.btn-err  {--c500:var(--c-error);--c50:var(--c-error-bg)}
 /* Modifier: invertiert auf dunklem Bereichs-Band (z. B. .ep-cta-band) — kombiniert mit .btn-co/.btn-ki/.btn-es/.btn-wo. Background wird weiß, Text trägt die Bereichsfarbe. */
 .btn-on-band{--c500:#fff;--c50:rgba(255,255,255,.1)}
 .btn-co.btn-on-band{color:var(--co-700)}

package/css/dark-mode.css

@@ -280,6 +280,12 @@
 [data-theme="dark"] .btn-ki.btn-filled:not(.btn-on-band) { background: var(--ki-300) }
 [data-theme="dark"] .btn-es.btn-filled:not(.btn-on-band) { background: var(--es-300) }
 [data-theme="dark"] .btn-wo.btn-filled:not(.btn-on-band) { background: var(--wo-300) }
+/* Dark-only: Allein trägt .btn-err.btn-filled schon die Inversion (Fläche --c500 = --c-error #FFA5A5,
+   Text n-900 aus der Regel oben ✓ 10,3:1, Fläche auf bg-page 9,3:1). Sitzt zusätzlich eine
+   Bereichsklasse am Button, setzt deren Regel die Fläche auf -300 und der Button verliert den Ton
+   ❌ → hier zurück auf --c-error ✓. Steht hinter den Bereichsregeln, damit bei gleicher Spezifität
+   der Ton gewinnt. (Light: dunkle Fläche #9B2020 + Weiß 8,01:1, dort regelt das components.css.) */
+[data-theme="dark"] .btn-err.btn-filled:not(.btn-on-band) { background: var(--c-error) }
 /* --c-ink = Bereichs-Light-Tint für Text/Rahmen der nicht-gefüllten Buttons im Dark. Dieselben Töne
    wie t-Utilities, Badges, Icons, Eyebrows (auf der offiziellen Skala) statt eines off-scale color-mix → alle
    Bereichstöne der Seite ziehen aus EINER Skala. */
@@ -287,6 +293,10 @@
 [data-theme="dark"] .btn-ki { --c-ink: var(--ki-200) }
 [data-theme="dark"] .btn-es { --c-ink: var(--es-100) }
 [data-theme="dark"] .btn-wo { --c-ink: var(--wo-200) }
+/* Dark-only: Ohne eigenen --c-ink erbte .btn-err den Bereichston der Umgebung oder gar keinen
+   (Outlined/Text ohne Bereichsklasse ❌ kein Wert) → --c-error ✓ 6,93:1 auf bg-surface, 9,32:1 auf
+   bg-page, 6,4:1 auf der Tonal-Fläche. (Light: --c500 = #9B2020 direkt, 8,01:1.) */
+[data-theme="dark"] .btn-err { --c-ink: var(--c-error) }
 /* Tonal im Dark: dezent brand-getönte Fläche (c500 18% in bg-page) + neutraler Rahmen über
    --bd-strong-c (vorher als #9DA8B6 hartkodiert, dem alten --bd-strong-Wert; die Gleichung stimmte
    nach der Flächen-Umstellung nicht mehr). Auf den vier Tonal-Füllungen 3,64:1 (ki) bis 4,87:1 (es),

package/dist/conciso-ds.css

@@ -526,6 +526,12 @@
 [data-theme="dark"] .btn-ki.btn-filled:not(.btn-on-band) { background: var(--ki-300) }
 [data-theme="dark"] .btn-es.btn-filled:not(.btn-on-band) { background: var(--es-300) }
 [data-theme="dark"] .btn-wo.btn-filled:not(.btn-on-band) { background: var(--wo-300) }
+/* Dark-only: Allein trägt .btn-err.btn-filled schon die Inversion (Fläche --c500 = --c-error #FFA5A5,
+   Text n-900 aus der Regel oben ✓ 10,3:1, Fläche auf bg-page 9,3:1). Sitzt zusätzlich eine
+   Bereichsklasse am Button, setzt deren Regel die Fläche auf -300 und der Button verliert den Ton
+   ❌ → hier zurück auf --c-error ✓. Steht hinter den Bereichsregeln, damit bei gleicher Spezifität
+   der Ton gewinnt. (Light: dunkle Fläche #9B2020 + Weiß 8,01:1, dort regelt das components.css.) */
+[data-theme="dark"] .btn-err.btn-filled:not(.btn-on-band) { background: var(--c-error) }
 /* --c-ink = Bereichs-Light-Tint für Text/Rahmen der nicht-gefüllten Buttons im Dark. Dieselben Töne
    wie t-Utilities, Badges, Icons, Eyebrows (auf der offiziellen Skala) statt eines off-scale color-mix → alle
    Bereichstöne der Seite ziehen aus EINER Skala. */
@@ -533,6 +539,10 @@
 [data-theme="dark"] .btn-ki { --c-ink: var(--ki-200) }
 [data-theme="dark"] .btn-es { --c-ink: var(--es-100) }
 [data-theme="dark"] .btn-wo { --c-ink: var(--wo-200) }
+/* Dark-only: Ohne eigenen --c-ink erbte .btn-err den Bereichston der Umgebung oder gar keinen
+   (Outlined/Text ohne Bereichsklasse ❌ kein Wert) → --c-error ✓ 6,93:1 auf bg-surface, 9,32:1 auf
+   bg-page, 6,4:1 auf der Tonal-Fläche. (Light: --c500 = #9B2020 direkt, 8,01:1.) */
+[data-theme="dark"] .btn-err { --c-ink: var(--c-error) }
 /* Tonal im Dark: dezent brand-getönte Fläche (c500 18% in bg-page) + neutraler Rahmen über
    --bd-strong-c (vorher als #9DA8B6 hartkodiert, dem alten --bd-strong-Wert; die Gleichung stimmte
    nach der Flächen-Umstellung nicht mehr). Auf den vier Tonal-Füllungen 3,64:1 (ki) bis 4,87:1 (es),
@@ -1323,6 +1333,12 @@ body{font-family:var(--font);font-size:1rem;line-height:1.7;color:var(--tx-prima
 .btn-ki   {--c500:var(--ki-800);--c50:var(--ki-50)}
 .btn-es   {--c500:var(--es-700);--c50:var(--es-50)}
 .btn-wo   {--c500:var(--wo-700);--c50:var(--wo-50)}
+/* Ton-Modifier: destruktive Aktion, die sich nicht rückgängig machen lässt (Löschen, Verwerfen).
+   Setzt dieselben zwei Tokens wie die Bereichsklassen und steht deshalb hinter ihnen: Trägt ein
+   Button beide Klassen, gewinnt der Ton. Kombinierbar mit jeder Stil-Variante, gedacht für Filled,
+   Outlined und Text. Light: Weiß auf --c-error 8,01:1, --c-error auf bg-page 8,01:1, Tonal-Text auf
+   --c-error-bg 4,99:1. Dark-Werte in dark-mode.css. */
+.btn-err  {--c500:var(--c-error);--c50:var(--c-error-bg)}
 /* Modifier: invertiert auf dunklem Bereichs-Band (z. B. .ep-cta-band) — kombiniert mit .btn-co/.btn-ki/.btn-es/.btn-wo. Background wird weiß, Text trägt die Bereichsfarbe. */
 .btn-on-band{--c500:#fff;--c50:rgba(255,255,255,.1)}
 .btn-co.btn-on-band{color:var(--co-700)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conciso/design-system",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Conciso Design System — Design Tokens, CSS-Komponenten und Light/Dark-Mode, framework-agnostisch und WCAG-AA-konform.",
   "license": "MIT",
   "repository": {