@pinuts/bsr-uikit-relaunch 0.4.2 → 0.4.3

package/dist/styles/_forcedColors.scss

@@ -0,0 +1,159 @@
+@use "sass:math";
+
+// =========================================================================
+// FORCED COLORS / HIGH CONTRAST
+// (Windows-Kontrastdesigns, Firefox "Website contrast: Custom")
+//
+// Der Browser erzwingt dann eigene Farben. Zwei Fehlerbilder:
+//   1. Indikator als url()-SVG      -> wird NICHT umgefaerbt, bleibt orange
+//   2. Indikator als background-color -> wird auf Canvas geflacht, verschwindet
+// Reine box-shadow-Fokusringe verschwinden ebenfalls.
+//
+// Loesung: Box mit forced-color-adjust: none aus der Automatik nehmen und mit
+// System-Keywords neu zeichnen (CanvasText = "Text", Canvas = "Hintergrund",
+// GrayText = deaktiviert, Highlight = Auswahl/Fokus).
+//
+// ZWEI FALLEN:
+// - forced-color-adjust VERERBT. Nur auf die Indikator-Box setzen, nie auf
+//   label oder Wrapper - sonst faellt der Labeltext aus der Nutzerpalette.
+// - Wer es setzt, besitzt ALLE Farben des Elements inkl. outline-color.
+//   Bestehende Fokusregeln muessen mit fc-focus-ring gespiegelt werden.
+//
+// KEIN nativer Fallback (appearance: auto): Firefox malt native Controls im
+// HCM in seiner eigenen Schwarz/Weiss-Palette und ignoriert die Nutzerfarben.
+// Die Mixins funktionieren auf echten <input> wie auf Pseudo-Elementen.
+// =========================================================================
+
+/// Einziger Ansatzpunkt fuer die Media Query.
+@mixin forced-colors {
+    @media (forced-colors: active) {
+        @content;
+    }
+}
+
+@mixin fc-control-box($border: CanvasText, $surface: Canvas) {
+    forced-color-adjust: none;
+    border-color: $border;
+    background-color: $surface;
+    background-image: none;
+    box-shadow: none;
+}
+
+@mixin fc-control-box-disabled($border: GrayText, $surface: Canvas) {
+    @include fc-control-box($border, $surface);
+}
+
+/// Radio-Punkt als Gradient auf der Box selbst - kein zusaetzliches Element,
+/// kein Positionierungskontext. Setzt fc-control-box voraus, sonst wuerde der
+/// Gradient auf none gezwungen. background-origin macht die Geometrie
+/// unabhaengig von der Border-Breite (1,4px normal / 2px bei Hover, Fehler).
+/// $size in px fuer bekannte Boxgroessen, oder ein Prozentwert, wenn die Box
+/// unbekannt ist (dann skaliert der Punkt mit - der Gradient liegt ueber der
+/// ganzen Box, `circle at center` mit Prozent-Stops).
+@mixin fc-indicator-radio($color: CanvasText, $size: 16px) {
+    @if unit($size) == "%" {
+        $radius: $size * 0.5;
+
+        background-image: radial-gradient(
+            circle at center,
+            #{$color} 0,
+            #{$color} #{$radius},
+            transparent #{$radius + 1%}
+        );
+    } @else {
+        $radius: $size * 0.5;
+
+        background-image: radial-gradient(
+            circle at center,
+            #{$color} 0,
+            #{$color} #{$radius - 0.5px},
+            transparent #{$radius}
+        );
+    }
+    background-repeat: no-repeat;
+    background-position: center;
+    background-origin: border-box;
+}
+
+/// Haken aus zwei beschnittenen Gradient-Baendern.
+///
+/// Groesse und Position sind in Prozent der Box ausgedrueckt, der Haken passt
+/// sich also JEDER Boxgroesse an - noetig, weil die vom UM gelieferten
+/// Formulare unterschiedlich grosse Controls verwenden.
+///
+/// Herleitung gegen die urspruengliche 24x24-Geometrie (kurzer Strich 8x8 bei
+/// 3/10, langer 12x12 bei 9/6). background-position in Prozent bedeutet
+/// Offset = p * (Box - Bild), daraus:
+///   kurz: 8/24 = 33.333%, p_x = 3/(24-8) = 18.75%, p_y = 10/16 = 62.5%
+///   lang: 12/24 = 50%,    p_x = 9/(24-12) = 75%,   p_y = 6/12 = 50%
+/// Bei 24px ergibt das exakt die alten Pixelwerte.
+///
+/// Die Strichstaerke bleibt bewusst in px, damit der Haken auch in grossen
+/// Boxen nicht fett wird.
+@mixin fc-indicator-check($color: CanvasText, $stroke: 3.2px) {
+    $half: $stroke * 0.5; // deckende Haelfte
+    $soft: $half + 0.4px; // weiche Kante gegen Treppchen auf den Diagonalen
+
+    background-image:
+        // kurzer Strich, oben links -> Scheitelpunkt ("\")
+        linear-gradient(
+            45deg,
+            transparent calc(50% - #{$soft}),
+            #{$color} calc(50% - #{$half}),
+            #{$color} calc(50% + #{$half}),
+            transparent calc(50% + #{$soft})
+        ),
+        // langer Strich, Scheitelpunkt -> oben rechts ("/")
+        linear-gradient(
+            135deg,
+            transparent calc(50% - #{$soft}),
+            #{$color} calc(50% - #{$half}),
+            #{$color} calc(50% + #{$half}),
+            transparent calc(50% + #{$soft})
+        );
+    background-size: 33.333% 33.333%, 50% 50%;
+    background-position: 18.75% 62.5%, 75% 50%;
+    background-repeat: no-repeat;
+    background-origin: border-box;
+}
+
+/// Pflicht auf jedem Element mit forced-color-adjust: none.
+@mixin fc-focus-ring($color: Highlight) {
+    outline-color: $color;
+    box-shadow: none;
+}
+
+/// Wie fc-focus-ring, aber fuer Elemente ohne eigene outline-Deklaration
+/// (Basiszustand setzt outline: none oder nutzt nur box-shadow).
+@mixin fc-focus-ring-full($color: Highlight, $width: 2px, $offset: 2px) {
+    outline: $width solid $color;
+    outline-offset: $offset;
+    box-shadow: none;
+}
+
+// -------------------------------------------------------------------------
+// KACHEL- / PILL-SELEKTOREN
+// "Ausgewaehlt" allein ueber background-color wird auf Canvas geflacht und
+// damit ununterscheidbar (WCAG 1.4.1). Systempaar dafuer: Highlight /
+// HighlightText.
+//
+// Anders als bei fc-control-box vererbt forced-color-adjust hier BEWUSST an
+// den Labeltext - der steht auf der Highlight-Flaeche. Icons folgen nur mit
+// fill/stroke="currentColor".
+// -------------------------------------------------------------------------
+
+@mixin fc-selected($surface: Highlight, $ink: HighlightText) {
+    forced-color-adjust: none;
+    background-color: $surface;
+    border-color: $surface;
+    color: $ink;
+}
+
+/// Gegenstueck zu fc-selected - noetig, weil der Container in beiden
+/// Zustaenden aus der Automatik faellt.
+@mixin fc-unselected($surface: Canvas, $ink: CanvasText) {
+    forced-color-adjust: none;
+    background-color: $surface;
+    border-color: $ink;
+    color: $ink;
+}

package/dist/styles/_form.scss

@@ -351,6 +351,61 @@ input[type="radio"] {
     outline: 2px solid white;
     outline-offset: $bsr-border-width-m * -1 - 3px;
   }
+
+  // FORCED COLORS: Der Punkt entsteht oben aus background-color plus einem
+  // weissen outline mit negativem Offset als Innenring. background-color wird
+  // im Kontrastmodus auf Canvas geflacht und outline-color ohnehin ersetzt -
+  // der Punkt verschwindet also. Innenring-Trick deshalb abschalten und den
+  // Punkt als Gradient in Nutzerfarben zeichnen.
+  @include forced-colors {
+    @include fc-control-box;
+
+    outline: none;
+
+    &:hover,
+    &:active {
+      @include fc-control-box;
+
+      outline: none;
+    }
+
+    &:checked {
+      @include fc-control-box;
+      @include fc-indicator-radio;
+
+      outline: none;
+    }
+
+    &:disabled {
+      @include fc-control-box-disabled;
+
+      outline: none;
+    }
+
+    &:disabled:checked {
+      @include fc-control-box-disabled;
+      @include fc-indicator-radio($color: GrayText);
+
+      outline: none;
+    }
+
+    &:focus,
+    &:focus-visible {
+      @include fc-focus-ring-full;
+    }
+  }
+}
+
+// Kein Rot in der Palette: Fehler bleibt ueber die dickere Kontur
+// (border-width wird nicht ueberschrieben) + Fehlermeldung erkennbar.
+// Bewusst NICHT in den Block oben verschachtelt: `.formInput.error &` wuerde
+// unter dem .bsr-uikit-Wrapper `.formInput.error .bsr-uikit input` ergeben,
+// und .formInput liegt innerhalb des Wrappers.
+@include forced-colors {
+  .formInput.error input[type="radio"] {
+    border-color: CanvasText;
+    outline: none;
+  }
 }
 button {
   text-underline-offset: 3px;
@@ -488,6 +543,46 @@ form input[type="checkbox"]:focus + label:before {
     box-shadow: 0 0 0 0.2rem rgba(255, 124.95, 38.25, 0.5);
 }
 
+// FORCED COLORS: Der Haken oben ist ein url()-SVG und wird nicht umgefaerbt,
+// Hover und Fokus sind reine box-shadow und verschwinden. Der Input selbst ist
+// visuell versteckt, Box und Indikator liegen auf label:before - deshalb muss
+// auch der Fokusring dorthin.
+@include forced-colors {
+  form input[type="checkbox"] + label:before {
+    @include fc-control-box;
+  }
+
+  // Keine graue Hover-Vorschau: Hover zeigt oben nur eine dickere Kontur
+  // (border-width, keine Farbe - bleibt im Kontrastmodus erhalten). Ein Haken
+  // bei Hover wuerde einen nicht gesetzten Zustand vortaeuschen.
+
+  form input[type="checkbox"]:checked + label:before,
+  form input[type="checkbox"]:checked + label:hover:before {
+    @include fc-control-box;
+    @include fc-indicator-check;
+  }
+
+  // NICHT :read-only mitnehmen - das matcht JEDE Checkbox, weil :read-write
+  // nur fuer textuell editierbare Elemente gilt.
+  form input[type="checkbox"]:disabled + label:before {
+    @include fc-control-box-disabled;
+  }
+
+  form input[type="checkbox"]:disabled:checked + label:before {
+    @include fc-control-box-disabled;
+    @include fc-indicator-check($color: GrayText);
+  }
+
+  form input[type="checkbox"]:focus + label:before,
+  form input[type="checkbox"]:focus-visible + label:before {
+    @include fc-focus-ring-full;
+  }
+
+  .formInput.error input[type="checkbox"] + label:before {
+    border-color: CanvasText;
+  }
+}
+
 /* TAG */
 .tag {
   position: relative;

package/dist/styles/main.scss

@@ -1,5 +1,6 @@
 @use "sass:math";
 @import "./variables/_variables.scss";
+@import "./forcedColors";
 
 // All CSS-emitting styles are scoped under `.bsr-uikit` so the UI-KIT's
 // global styles (element selectors like h1/body/p and class rules) do not

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinuts/bsr-uikit-relaunch",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "private": false,
   "description": "BSR UI-KIT Relaunch",
   "main": "dist/index.js",