feat: Improve train category tagging system

Author: MoritzWeber0

assets/sass/_variables.scss

@@ -27,6 +27,18 @@ html {
   --color-onLight: #{$color-onLight};
   --color-table-border: #{$color-table-border};
   --color-body: rgb(33, 37, 41);
+  --tag-success-bg: #d4edda;
+  --tag-success-color: #155724;
+  --tag-success-border: #c3e6cb;
+  --tag-warning-bg: #fff3cd;
+  --tag-warning-color: #856404;
+  --tag-warning-border: #ffeaa7;
+  --tag-error-bg: #f8d7da;
+  --tag-error-color: #721c24;
+  --tag-error-border: #f5c6cb;
+  --tag-info-bg: #cce7ff;
+  --tag-info-color: #004085;
+  --tag-info-border: #b3d9ff;
   --border-radius-s: 0.4rem;
   --border-radius-m: 0.8rem;
   --border-radius-l: 1.6rem;
@@ -37,6 +49,7 @@ html {
   --highlight-color-tip: #c4f2ff;
   --highlight-color-inofficial: #f0f3f5;
   --highlight-color-important: #ffe3d9;
+  --highlight-color-confusion: #ffe6cc;
   --border: 0.1rem solid transparent;
   --pagefind-ui-font: roboto, Arial, Helvetica, sans-serif;
   --outline-focus-indicator: #257fa8;
@@ -54,16 +67,32 @@ html[data-theme="dark"] {
     --link-special: #ffffff;
     --bg-default: #151b23;
     --bg-neutral: #0d1117;
+    --bg-accent: #86761a;
+    --bg-accent2: #daba00;
+    --bg-accent3: #fff284;
     --color-onLight: #ffffff;
     --color-table-border: #555;
     --color-body: #e0e0e0;
+    --tag-success-bg: #1a4d2e;
+    --tag-success-color: #a8d5ba;
+    --tag-success-border: #2d6a4f;
+    --tag-warning-bg: #4a3a1a;
+    --tag-warning-color: #f0d98d;
+    --tag-warning-border: #6b5520;
+    --tag-error-bg: #4a1a1a;
+    --tag-error-color: #f5a9ae;
+    --tag-error-border: #6b2d2d;
+    --tag-info-bg: #1a3a5c;
+    --tag-info-color: #a8d5f5;
+    --tag-info-border: #2d5a8b;
     --pagefind-ui-border: #555;
     --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.5);
     --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.3);
     --pagefind-ui-background: var(--bg-default);
     --highlight-color-tip: #1a4a5c;
     --highlight-color-inofficial: #2a2d30;
     --highlight-color-important: #4a2a1a;
+    --highlight-color-confusion: #4a3a1a;
     --border: 0.1rem solid #3d444d;
     --outline-focus-indicator: #2e9acb;
   }

assets/sass/textHighlight.scss

@@ -54,3 +54,12 @@
     border: 0.2rem solid #ba3d12;
   }
 }
+
+.m-text-highlight--confusion {
+  background-color: var(--highlight-color-confusion);
+  border-left: #ff9100e1 solid 1rem;
+
+  @media print {
+    border: 0.2rem solid #ff9100e1;
+  }
+}

assets/sass/trainCategory.scss

@@ -41,57 +41,35 @@
   font-weight: 500;
   white-space: nowrap;
 
-  &--accepted {
-    background: #d4edda;
-    color: #155724;
-    border: 0.1rem solid #c3e6cb;
+  &--success {
+    background: var(--tag-success-bg);
+    color: var(--tag-success-color);
+    border: 0.1rem solid var(--tag-success-border);
   }
 
-  &--rejected {
-    background: #f8d7da;
-    color: #721c24;
-    border: 0.1rem solid #f5c6cb;
+  &--warning {
+    background: var(--tag-warning-bg);
+    color: var(--tag-warning-color);
+    border: 0.1rem solid var(--tag-warning-border);
   }
 
-  &--required {
-    background: #fff3cd;
-    color: #856404;
-    border: 0.1rem solid #ffeaa7;
-  }
-
-  &--possible {
-    background: #cce7ff;
-    color: #004085;
-    border: 0.1rem solid #b3d9ff;
-  }
-
-  &--none {
-    background: #e2e3e5;
-    color: #383d41;
-    border: 0.1rem solid #d6d8db;
+  &--error {
+    background: var(--tag-error-bg);
+    color: var(--tag-error-color);
+    border: 0.1rem solid var(--tag-error-border);
   }
 
   &--info {
-    background: #e7f3ff;
-    color: #0c5460;
-    border: 0.1rem solid #bee5eb;
+    background: var(--tag-info-bg);
+    color: var(--tag-info-color);
+    border: 0.1rem solid var(--tag-info-border);
   }
 }
 
 .o-train-category__content {
   margin-top: 1rem;
 }
 
-.o-train-category__info {
-  padding: 0.8rem;
-  margin-bottom: 1rem;
-  background: #e7f3ff;
-  border: 0.1rem solid #bee5eb;
-  border-radius: var(--border-radius-s);
-  color: #0c5460;
-  font-style: italic;
-}
-
 .o-expander__summary--train-category {
   &:hover,
   &:focus {
@@ -100,51 +78,3 @@
     }
   }
 }
-
-html[data-theme="dark"] {
-  .o-train-category {
-    &__info {
-      background: #0c3544;
-      border-color: #17a2b8;
-      color: #bee5eb;
-    }
-
-    &__tag {
-      &--accepted {
-        background: #2d5a3d;
-        color: #a3d5ab;
-        border-color: #4a7c59;
-      }
-
-      &--rejected {
-        background: #5a2d32;
-        color: #f5a3ab;
-        border-color: #7c4a52;
-      }
-
-      &--required {
-        background: #5a4d2d;
-        color: #f5e6a3;
-        border-color: #7c6a4a;
-      }
-
-      &--possible {
-        background: #2d4a5a;
-        color: #a3d5f5;
-        border-color: #4a6a7c;
-      }
-
-      &--none {
-        background: #3d3d3d;
-        color: #d0d0d0;
-        border-color: #5a5a5a;
-      }
-
-      &--info {
-        background: #0c3544;
-        color: #bee5eb;
-        border-color: #17a2b8;
-      }
-    }
-  }
-}

content/operator/sncf/index.en.md

@@ -41,20 +41,29 @@ Reservations are mandatory on all `TGV`, almost all `IC` trains, and some region
   title="Train à grande vitesse inOui (TGV inOui)"
   fip_accepted=true
   reservation_required=true
-  info_available=true
+  risk_of_confusion=true
+  important_info=true
+  type="highspeed"
 %}}
 The `TGV` inOui is SNCF's high-speed train, connecting many cities in France and international destinations (e.g. Munich, Frankfurt am Main, Barcelona, Luxembourg, Brussels, Zurich, Milan). [Route overview](https://www.sncf-connect.com/assets/media/2021-05/2014_axes-tgv_0.pdf). Each seat number exists twice in the carriage; the reserved seat is the one with the illuminated number.
 
-{{% highlight inofficial %}}
+{{% highlight confusion %}}
 SNCF also operates low-cost `TGV` trains under the name OuiGo, which are not valid with FIP.
 {{% /highlight %}}
 
 {{% highlight important %}}
 Special conditions apply for international connections, see International TGV inOui / ICE trains section below.
 {{% /highlight %}}
 
-**Reservation cost:** \
-Prices differ between peak and off-peak trains. Off-peak: €1.70 (1st/2nd class); peak: €15 (1st class), €10 (2nd class). The classification is not publicly available.
+### Reservation
+
+Prices differ between peak and off-peak trains. The classification is not publicly available.
+
+|          | 1st class | 2nd class |
+| -------- | --------- | --------- |
+| Off-peak | €1.70     | €1.70     |
+| Peak     | €15       | €10       |
+
 {{% /train-category %}}
 
 {{% train-category

i18n/de.yaml

@@ -35,6 +35,7 @@ highlight:
   important: Wichtige Information
   inofficial: Inoffizielle Information
   tip: Persönlicher Tipp
+  confusion: Verwechslungsgefahr
 home-page-text: FIP Guide Startseite
 information-disclaimer-short: >-
   Diese Informationen sind inoffiziell und ohne Gewähr. Es besteht keine

i18n/en.yaml

@@ -34,6 +34,7 @@ highlight:
   important: Important Information
   inofficial: Unofficial Information
   tip: Personal Tip
+  confusion: Risk of Confusion
 home-page-text: FIP Guide Home Page
 information-disclaimer-short: >-
   The information provided is unofficial and without guarantee. There is no

i18n/fr.yaml

@@ -31,6 +31,7 @@ footer-love:
   aria-label: Fait avec amour en Europe
   text: Fait avec ♥️ en Europe
 highlight:
+  confusion: Risque de confusion
   important: Informations importantes
   inofficial: Informations non officielles
   tip: Conseil personnel

layouts/partials/train-category.html

@@ -9,38 +9,55 @@
       </div>
       <div class="o-train-category__tags">
         {{- if eq .fip_accepted true -}}
-          <span class="o-train-category__tag o-train-category__tag--accepted">
+          <span class="o-train-category__tag o-train-category__tag--success">
             {{ partial "icon" "check_circle" }}
             FIP Accepted
           </span>
+        {{- else if eq .fip_accepted "partially" -}}
+          <span class="o-train-category__tag o-train-category__tag--warning">
+            {{ partial "icon" "info" }}
+            FIP Partially Accepted
+          </span>
         {{- else -}}
-          <span class="o-train-category__tag o-train-category__tag--rejected">
+          <span class="o-train-category__tag o-train-category__tag--error">
             {{ partial "icon" "dangerous" }}
             FIP Not Accepted
           </span>
         {{- end -}}
 
         {{- if eq .reservation_required true -}}
-          <span class="o-train-category__tag o-train-category__tag--required">
-            {{ partial "icon" "calendar_month" }}
+          <span class="o-train-category__tag o-train-category__tag--error">
+            {{ partial "icon" "calendar_add_on" }}
             Reservation Required
           </span>
+        {{- else if eq .reservation_required true -}}
+          <span class="o-train-category__tag o-train-category__tag--warning">
+            {{ partial "icon" "calendar_add_on" }}
+            Reservation Partially Required
+          </span>
         {{- else if eq .reservation_possible true -}}
-          <span class="o-train-category__tag o-train-category__tag--possible">
-            {{ partial "icon" "free_cancellation" }}
+          <span class="o-train-category__tag o-train-category__tag--info">
+            {{ partial "icon" "calendar_check" }}
             Reservation Possible
           </span>
         {{- else -}}
-          <span class="o-train-category__tag o-train-category__tag--none">
-            {{ partial "icon" "close" }}
+          <span class="o-train-category__tag o-train-category__tag--info">
+            {{ partial "icon" "calendar_lock" }}
             No Reservation Possible
           </span>
         {{- end -}}
 
-        {{- if .info_available -}}
-          <span class="o-train-category__tag o-train-category__tag--info">
-            {{ partial "icon" "info" }}
-            Information Available
+        {{- if .risk_of_confusion -}}
+          <span class="o-train-category__tag o-train-category__tag--warning">
+            {{ partial "icon" "question_exchange" }}
+            Risk of confusion
+          </span>
+        {{- end -}}
+
+        {{- if .important_info -}}
+          <span class="o-train-category__tag o-train-category__tag--warning">
+            {{ partial "icon" "campaign" }}
+            Important information
           </span>
         {{- end -}}
       </div>

layouts/shortcodes/highlight.html

@@ -1,5 +1,5 @@
 {{- $param := .Get 0 -}}
-{{ $iconMapping := dict "important" "error" "inofficial" "warning" "tip" "lightbulb_2" }}
+{{ $iconMapping := dict "important" "error" "inofficial" "warning" "tip" "lightbulb_2" "confusion" "question_exchange" }}
 
 
 <div class="m-text-highlight m-text-highlight--{{ $param }}">

layouts/shortcodes/train-category.html

@@ -3,7 +3,8 @@
   "fip_accepted" (default true (.Get "fip_accepted"))
   "reservation_required" (default false (.Get "reservation_required"))
   "reservation_possible" (default false (.Get "reservation_possible"))
-  "info_available" (default false (.Get "info_available"))
+  "risk_of_confusion" (default false (.Get "risk_of_confusion"))
+  "important_info" (default false (.Get "important_info"))
   "content" (.Inner | .Page.RenderString)
 -}}