@pinuts/bsr-uikit-relaunch 0.3.8 → 0.4.3

package/dist/shared/KehrenbuergerForm/KehrenbuergerForm.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactI18next = require("react-i18next");
+var _HTMLParserSanitized = require("../../items/HTMLParserSanitized/HTMLParserSanitized.jsx");
+var _SectionSpinner = _interopRequireDefault(require("../../items/SectionSpinner/SectionSpinner.jsx"));
+var _isWindowAvailable = require("../../utils/isWindowAvailable.js");
+var _FormWidget = _interopRequireDefault(require("../FormWidget/FormWidget.jsx"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const WIDGET_CONFIG_PATH = '/de.bsr.kehrenbuerger.widget/formConfig';
+const AKTION_PATH = '/de.bsr.kehrenbuerger.aktionen/aktion';
+
+// Leere Captions rausfiltern, damit die Defaults des FormWidget greifen
+const withoutEmpty = caption => Object.fromEntries(Object.entries(caption).filter(_ref => {
+  let [, text] = _ref;
+  return Boolean(text);
+}));
+
+// Das Backend liefert die Kehrenbürger-Struktur (formPage/confirmPage/...),
+// das FormWidget erwartet formPage/controlPage/successPage.
+const mapCaptions = function () {
+  let captions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    formPage: withoutEmpty({
+      header: captions.formPage?.header,
+      text: captions.formPage?.text,
+      submitBtn: captions.formPage?.nextBtn
+    }),
+    controlPage: withoutEmpty({
+      header: captions.confirmPage?.header,
+      text: captions.confirmPage?.text,
+      backBtn: captions.confirmPage?.backBtn,
+      submitBtn: captions.confirmPage?.saveBtn
+    }),
+    successPage: withoutEmpty({
+      header: captions.successPage?.header,
+      text: captions.successPage?.text
+    })
+  };
+};
+
+// Das Backend erwartet die Werte unter "data"
+const transformPayload = values => ({
+  data: values
+});
+
+// Bestätigungs-Link (Double-Opt-In): ?c=<aktionId> in der URL.
+// Prod nutzt normale URLs (?c=... vor dem #), die CMS-Vorschau Hash-URLs
+// (#/pfad?c=...) - deshalb beide Stellen prüfen.
+const getDoiAktionId = () => {
+  if (!(0, _isWindowAvailable.isWindowAvailable)()) {
+    return null;
+  }
+  const fromSearch = new URLSearchParams(window.location.search).get('c');
+  if (fromSearch) {
+    return fromSearch;
+  }
+  const hash = window.location.hash || '';
+  const queryIndex = hash.indexOf('?');
+  return queryIndex === -1 ? null : new URLSearchParams(hash.slice(queryIndex + 1)).get('c');
+};
+
+/**
+ * Kehrenbürger-Anmeldeformular als eigenständige Komponente (ohne HTML-Rahmen).
+ * Lädt FormConfig und Captions vom RestProxy und rendert das FormWidget.
+ *
+ * Enthält die URL einen `c`-Parameter, ist es ein DOI-Bestätigungslink: dann
+ * wird die Anmeldung per PUT bestätigt und nur die Bestätigungsmeldung gezeigt.
+ */
+const KehrenbuergerForm = _ref2 => {
+  let {
+    restUrl = '/p',
+    showControlPage = true,
+    className
+  } = _ref2;
+  const [t] = (0, _reactI18next.useTranslation)();
+  const configUrl = `${restUrl}${WIDGET_CONFIG_PATH}`;
+  const submitUrl = `${restUrl}${AKTION_PATH}`;
+  const doiAktionId = (0, _react.useMemo)(() => getDoiAktionId(), []);
+  const isDoiMode = Boolean(doiAktionId);
+  const [formConfig, setFormConfig] = (0, _react.useState)(null);
+  const [rawCaptions, setRawCaptions] = (0, _react.useState)(null);
+  const [loadError, setLoadError] = (0, _react.useState)(false);
+  const [doiMessage, setDoiMessage] = (0, _react.useState)('');
+
+  // FormConfig + Captions laden (Captions werden auch im DOI-Modus gebraucht)
+  (0, _react.useEffect)(() => {
+    let aborted = false;
+    fetch(configUrl).then(response => {
+      if (!response.ok) {
+        throw new Error(`${configUrl} antwortete mit Status ${response.status}`);
+      }
+      return response.json();
+    }).then(json => {
+      if (aborted) {
+        return;
+      }
+      const formConfigs = json?.data?.formConfigs;
+      if (!formConfigs?.anmeldung) {
+        throw new Error('In der Antwort fehlt data.formConfigs.anmeldung');
+      }
+      setFormConfig(formConfigs.anmeldung);
+      setRawCaptions(formConfigs.captions || {});
+    }).catch(() => {
+      if (!aborted) {
+        setLoadError(true);
+      }
+    });
+    return () => {
+      aborted = true;
+    };
+  }, [configUrl]);
+
+  // DOI: Anmeldung per PUT bestätigen, sobald die Captions da sind
+  const doiConfirmed = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    if (!isDoiMode || !rawCaptions || doiConfirmed.current) {
+      return;
+    }
+    doiConfirmed.current = true;
+    const doiCaption = rawCaptions.doiPage || {};
+    fetch(`${submitUrl}/doi/${doiAktionId}`, {
+      method: 'PUT',
+      credentials: 'include',
+      headers: {
+        'X-CSRF-Safe': 'yes'
+      }
+    }).then(response => response.json().catch(() => ({}))).then(json => {
+      setDoiMessage(json?.success ? doiCaption.success : doiCaption.failed);
+    }).catch(() => {
+      setDoiMessage(doiCaption.failed);
+    });
+  }, [isDoiMode, rawCaptions, doiAktionId, submitUrl]);
+  const captions = (0, _react.useMemo)(() => mapCaptions(rawCaptions || {}), [rawCaptions]);
+  if (loadError) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "alert alert-danger"
+    }, t('bsrItems.kehrenbuerger.loadError'));
+  }
+  if (!formConfig || !rawCaptions) {
+    return /*#__PURE__*/_react.default.createElement(_SectionSpinner.default, null);
+  }
+  if (isDoiMode) {
+    const doiCaption = rawCaptions.doiPage || {};
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, doiCaption.header && /*#__PURE__*/_react.default.createElement("h1", null, doiCaption.header), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, doiMessage || t('bsrItems.kehrenbuerger.waitDoi'))));
+  }
+  return /*#__PURE__*/_react.default.createElement(_FormWidget.default, {
+    className: className,
+    formId: "kehrenbuerger",
+    formConfig: formConfig,
+    captions: captions,
+    submitUrl: submitUrl,
+    method: "POST",
+    showControlPage: showControlPage,
+    transformPayload: transformPayload
+  });
+};
+KehrenbuergerForm.propTypes = {
+  // Basis-URL des RestProxy, z.B. '/p'
+  restUrl: _propTypes.default.string,
+  showControlPage: _propTypes.default.bool,
+  className: _propTypes.default.string
+};
+var _default = exports.default = KehrenbuergerForm;

package/dist/styles/_errorMessagesInfoBox.scss

@@ -0,0 +1,42 @@
+// Fehlerbox über dem Formular. Klassen und Styles entsprechen den BSR-Formularen
+// (vgl. sepa-basis-lastschriftmandat-cf2), damit die Box in Consumer-Projekten
+// mit BSR-Styles identisch aussieht - und ohne sie ebenfalls korrekt.
+.pi-form-control__has-error {
+  display: block;
+
+  .pi-message-text {
+    display: flex;
+    flex-direction: column;
+    margin: 0 0 ($base-gap * 4);
+    padding: ($base-gap * 3) ($base-gap * 5); // 12px 20px
+    border: $bsr-border-width-l solid $error;
+    border-radius: $border-radius;
+    background-color: $white;
+    color: $error;
+    box-shadow: $bsr-shadow-default;
+
+    // leere Elemente (z.B. Caption ohne Text) nicht als Lücke rendern
+    > *:empty {
+      display: none;
+    }
+
+    p {
+      margin: 0 0 ($base-gap * 4);
+      font-weight: $fontweight-bold;
+    }
+
+    ul {
+      margin: 0;
+      padding-inline-start: $base-gap * 2;
+    }
+
+    li {
+      color: $error;
+
+      a {
+        color: $bsr-black-90;
+        text-decoration: underline;
+      }
+    }
+  }
+}

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

@@ -228,6 +228,15 @@ textarea {
     line-height: $input-label-line-height;
   }
 
+  // Adresse des gewählten Abholorts, unterhalb der Selectbox
+  .abholort-adresse {
+    display: block;
+    margin-block-start: $base-gap * 2;
+    color: $bsr-black-90;
+    font-size: $input-label-font-size;
+    line-height: $input-label-line-height;
+  }
+
   [aria-disabled="true"] {
     input,
     label {
@@ -342,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;
@@ -479,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/_review.scss

@@ -0,0 +1,29 @@
+// Kontrollseite (reviewMode). Bewusst minimal: die visuelle Feinabstimmung
+// (Kontraste, Abstände) folgt in einem eigenen Schritt.
+.pi-review {
+  .pi-review-item {
+    margin: 0;
+  }
+
+  .pi-review-pair {
+    margin-bottom: $base-gap * 3;
+  }
+
+  dt {
+    font-weight: $fontweight-bold;
+  }
+
+  dd {
+    margin: 0;
+  }
+
+  // Zeilenumbrüche aus Textarea-Eingaben sichtbar halten
+  .pi-review-multiline {
+    white-space: pre-line;
+  }
+
+  .pi-review-values {
+    margin: 0;
+    padding-inline-start: $base-gap * 4;
+  }
+}

package/dist/styles/main.scss

@@ -1,92 +1,106 @@
 @use "sass:math";
 @import "./variables/_variables.scss";
-@import "./ariakit_combobox";
-@import "./form";
+@import "./forcedColors";
 
-.sr-only {
-  display: none;
-}
+// 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
+// leak into consumer projects. Consumers opt in by adding the class
+// `bsr-uikit` to a wrapping element (e.g. the app root or a container
+// around UI-KIT components).
+//
+// Note: _variables.scss above only defines SCSS variables/functions and
+// emits no CSS, so it stays outside the wrapper.
+.bsr-uikit {
+  @import "./ariakit_combobox";
+  @import "./form";
+  @import "./errorMessagesInfoBox";
+  @import "./review";
+  @import "./variables/_buttons.scss";
+  @import "./variables/_images.scss";
 
-[aria-disabled="true"] {
-  input,
-  label {
-    color: $bsr-black-40;
-    border-color: $bsr-black-40;
-    pointer-events: none;
-  }
-  input {
-    background: $bsr-black-10;
+  // Base font previously applied to `body`; scoped to the wrapper element
+  // itself so it does not leak to the consumer's <body>.
+  font-family: $fontfamily-base;
+  font-size: $defaultBrowserFontSize;
+
+  .sr-only {
+    display: none;
   }
-}
 
-body {
-    font-family: $fontfamily-base;
-    font-size: $defaultBrowserFontSize;
-}
+  [aria-disabled="true"] {
+    input,
+    label {
+      color: $bsr-black-40;
+      border-color: $bsr-black-40;
+      pointer-events: none;
+    }
+    input {
+      background: $bsr-black-10;
+    }
+  }
 
-p, span {
+  p, span {
     font-family: $fontfamily-base;
-}
+  }
 
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
     font-family: $fontfamily-heading;
     color: $bsr-black-90;
     font-weight: $fontweight-bold;
     scroll-margin-top: $base-gap * 18;
-}
+  }
 
-h1, .h1 {
+  h1, .h1 {
     font-size: $h1-fontsize;
     line-height: $h1-lineheight;
     letter-spacing: $letter-spacing-lg;
-    margin-bottom: $base-gap * 10;
 
     @media screen and (max-width: $screen-sm-max) {
-        font-size: $h1-fontsize-sm;
-        line-height: $h1-lineheight-sm;
-        letter-spacing: $letter-spacing-sm;
-        margin-bottom: $base-gap * 3;
+      font-size: $h1-fontsize-sm;
+      line-height: $h1-lineheight-sm;
+      letter-spacing: $letter-spacing-sm;
     }
-}
+  }
 
-h2, .h2 {
+  h2, .h2 {
     font-size: $h2-fontsize;
     line-height: $h2-lineheight;
     letter-spacing: $letter-spacing-md;
     margin-bottom: $base-gap * 5;
 
     @media screen and (max-width: $screen-sm-max) {
-        font-size: $h2-fontsize-sm;
-        line-height: $h2-lineheight-sm;
-        margin-bottom: $base-gap * 3;
+      font-size: $h2-fontsize-sm;
+      line-height: $h2-lineheight-sm;
+      margin-bottom: $base-gap * 3;
     }
-}
+  }
 
-h3, .h3, h4, .h4,  h5, .h5, h6, .h6 {
+  h3, .h3, h4, .h4,  h5, .h5, h6, .h6 {
     margin-bottom: $base-gap * 5;
     margin-top: $base-gap * 10;
     color: $bsr-black-90;
 
     @media screen and (max-width: $screen-sm-max) {
-        font-size: $h3-fontsize-sm;
-        line-height: $h3-lineheight-sm;
-        margin-bottom: $base-gap * 3;
-        margin-top: $base-gap * 8;
+      font-size: $h3-fontsize-sm;
+      line-height: $h3-lineheight-sm;
+      margin-bottom: $base-gap * 3;
+      margin-top: $base-gap * 8;
     }
-}
+  }
 
-q {
+  q {
     font-family: $fontfamily-heading;
-}
+  }
 
-footer {
+  footer {
     font-family: $fontfamily-heading;
-}
+  }
 
-.rbc-wrapper .rbc-calendar {
+  .rbc-wrapper .rbc-calendar {
     font-family: $fontfamily-base;
-}
+  }
 
-.rbc-date-cell.rbc-now span {
+  .rbc-date-cell.rbc-now span {
     color: $bsr-brick-100;
-}
+  }
+}