Thématique - Initial commit - Empathy, aim to evoke a sense of (#2353)

* Thematic - Lost of a Loved One (LLO)
* Empathy Thematic

_data/méli-mélo.json

@@ -28,7 +28,8 @@
 			"libs": [
 				"th-canadaday",
 				"th-winterlude",
-				"th-zev"
+				"th-zev",
+				"th-empathy"
 			]
 		}
 	],
@@ -71,6 +72,10 @@
 			"nom": "th-zev",
 			"mainpage": "zev.html"
 		},
+		{
+			"nom": "th-empathy",
+			"mainpage": "empathy.html"
+		},
 		{
 			"nom": "2022-09-svgimagemap",
 			"mainpage": "bcmap.html"

méli-mélo/th-empathy/empathy.html

@@ -0,0 +1,94 @@
+---
+title: Empathy theme
+dateModified: 2024-04-30
+description: Empathy CSS styles
+lang: en
+pageclass: cnt-wdth-lmtd
+css:
+- style.css
+- https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-04-nahanni.css
+script:
+- https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-04-nahanni.js
+layout: without-h1
+---
+<h1 property="name" id="wb-cont" class="empathy">{{ page.title }}</h1>
+<p>The colors offered by this theme aim to evoke a sense of empathy for the user during certain life events, such as grieving the loss of a loved one.</p>
+{% assign metadata = site.pages | where: "output", "false" | where: "componentName", "th-empathy" | first %}
+<p>Sponsor: {{ metadata.sponsor }}</p>
+<p>Accessibility statement: {{ metadata.a11yStatement }}</p>
+<p>Progressive enhancement note:</p>
+<ul>
+    {% for peNote in metadata.peNote %}
+    <li>{{ peNote }}</li>
+    {% endfor %}
+</ul>
+
+<h2>CSS classes</h2>
+<dl>
+    <dt><code>.empathy</code></dt>
+    <dd>When applied to the <code>&lt;h1&gt;</code> element it set a purple underline to the title element of the page.</dd>
+    <dd>When applied to the Steps Quiz along with the <code>wb-steps</code> and <code>quiz</code> it set the thematic colors to the navigation buttons, the progress bar and to the <code>&lt;legend&gt;</code> text.</dd>
+    <dt><code>.btn-empathy</code></dt>
+    <dd>Along with <code>.btn-primary</code> or <code>.btn-default</code>, set a purple colour thematic to buttons.</dd>
+</dl>
+
+<h2>Examples</h2>
+<h3>Purple Underline to the <code>&lt;h1&gt;</code> </h3>
+<p>The example has been applied to the <code>&lt;h1&gt;</code> element of this page.</p>
+<h4>Code</h4>
+<pre><code>&lt;h1 property="name" id="wb-cont" class="empathy"&gt;&lt;-- Page title --&gt;&lt;/h1&gt;</code></pre>
+
+<h3>Purple Button</h3>
+<button class="btn btn-primary btn-empathy" type="button">Button</button>
+<h4>Code</h4>
+<pre><code>&lt;button class="btn btn-primary btn-empathy" type="button"&gt;Button&lt;/button&gt;</code></pre>
+
+<h3>Light Purple Button</h3>
+<button class="btn btn-default btn-empathy" type="button">Button</button>
+<h4>Code</h4>
+<pre><code>&lt;button class="btn btn-default btn-empathy" type="button"&gt;Button&lt;/button&gt;</code></pre>
+
+<h3>Steps Progress</h3>
+<div class="panel panel-default stepsquiz">
+    <div class="wb-frmvld provisional wb-steps quiz empathy panel-body">
+        <form action="#" id="progress-example">
+            <fieldset>
+                <legend>Which is your favorite fruit?</legend>
+                <div>
+                    <p>My favorite fruit is:</p>
+                    <ul class="list-unstyled lst-spcd-2 gc-chckbxrdio">
+                        <li class="radio">
+                            <input type="radio" name="fruit" id="apple-1" value="apple">
+                            <label for="apple-1">Apple</label>
+                        </li>
+                        <li class="radio">
+                            <input type="radio" name="fruit" id="orange-1" value="orange">
+                            <label for="orange-1">Orange</label>
+                        </li>
+                    </ul>
+                </div>
+            </fieldset>
+            <fieldset>
+                <legend>Condiments</legend>
+                <div>
+                    <p>Choose your condiments:</p>
+                    <ul class="list-unstyled lst-spcd-2 gc-chckbxrdio">
+                        <li class="checkbox">
+                            <input type="checkbox" id="ketchup-1" value="ketchup" name="condiments">
+                            <label for="ketchup-1">Ketchup</label>
+                        </li>
+                        <li class="checkbox">
+                            <input type="checkbox" id="relish-1"  value="relish" name="condiments">
+                            <label for="relish-1">Relish</label>
+                        </li>
+                    </ul>
+                </div>
+            </fieldset>
+            <input type="submit" class="btn btn-primary" />
+        </form>
+    </div>
+</div>
+<h4>Code</h4>
+<pre><code>&lt;div class="wb-frmvld provisional wb-steps quiz empathy panel-body"&gt;
+    &lt;!-- Steps Quiz Form --&gt;
+&lt;/div&gt;</code></pre>

méli-mélo/th-empathy/meta.md

@@ -0,0 +1,24 @@
+---
+feature: thématique
+lang: en
+title: Empathy theme
+description: Background colours used for empathy.
+componentName: th-empathy
+expiry: November 30, 2024
+mainPage: empathy.html
+cssClass:
+- empathy
+- btn-empathy
+a11yStatement: >
+  These colours meet the colour contrast requirements as outlined in WCAG 2.1 AA Success Criterion 1.4.3: Contrast (Minimum). After validation using webaim online contrast checker, I can certified that the color matches used in this thematic are meeting a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and also a contrast ratio of at least 3:1 for graphics and user interface components. I did my due diligence and to knowledge and from my understanding, all elements of this thematic are meeting WCAG 2.1 AA standrds.
+  Tested by Eric Guitard, [email protected]. 2024-04-30.
+peNote:
+- The <code>btn-empathy</code> class must be accompagnied with a fall back button class such as <code>btn-default</code> or <code>btn-primary</code>.
+pages:
+  examples:
+    - title: Empathy theme
+      language: en
+      path: empathy.html
+sponsor: ESDC - Principal Publisher
+output: false
+---

méli-mélo/th-empathy/style.css

@@ -0,0 +1,83 @@
+/* Thematic purple */
+.btn-empathy.btn-primary,
+.empathy.wb-steps.quiz .btn-primary {
+    background-color: #5C2790;
+}
+
+/* Purple button hover and focus state */
+.btn-empathy.btn-primary:hover,
+.btn-empathy.btn-primary:focus,
+.btn-empathy.btn-primary:active,
+.empathy.wb-steps.quiz .btn-primary:hover,
+.empathy.wb-steps.quiz .btn-primary:focus,
+.empathy.wb-steps.quiz .btn-primary:active {
+    background-color: #D6B9EC;
+    color: #5c2790;
+}
+
+/* Light Purple button default state */
+.btn-empathy.btn-default,
+.empathy.wb-steps.quiz .btn-default {
+    background-color: #FFF;
+    border-color: #5C2790;
+    color: #5C2790;
+}
+/* Light Purple button hover and focus state */
+.btn-empathy.btn-default:hover,
+.btn-empathy.btn-default:focus,
+.btn-empathy.btn-default:active,
+.empathy.wb-steps.quiz .btn-default:hover,
+.empathy.wb-steps.quiz .btn-default:focus,
+.empathy.wb-steps.quiz .btn-default:active  {
+    background-color: #D6B9EC;
+    border-color: #471F70;
+    color: #471F70;
+}
+
+/* Thematic Heading 1 */
+h1#wb-cont.empathy {
+    border-bottom: 0.18em solid #5C2790;
+    border-image: linear-gradient(to right, #5C2790 71px, transparent 71px);
+    border-image-slice: 1;
+}
+
+/*  Thematic Steps Quiz */
+
+/* Thematic progress bar customization */
+.empathy.wb-steps.quiz progress {
+    /* Reset the default browser styles */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: #5c2790 solid 1px;
+
+    background-color: #777;
+    color: #DED0F1;
+}
+
+/* Webkit Browsers - Chome, Opera and Safari */
+.empathy.wb-steps.quiz progress::-webkit-progress-bar {
+    background-color: #777;
+}
+.empathy.wb-steps.quiz progress::-webkit-progress-value {
+    background-color: #DED0F1;
+}
+
+/* Mozilla Firefox */
+.empathy.wb-steps.quiz progress::-moz-progress-bar {
+    background-color: #DED0F1;
+}
+
+/* Thematic radio buttons, check boxes and legend */
+.empathy.wb-steps.quiz .gc-chckbxrdio input[type="radio"]:checked + label::before {
+    background: #5c2790;
+}
+
+.empathy.wb-steps.quiz .gc-chckbxrdio input[type="checkbox"]:checked + label::after {
+    border-color: #5c2790;
+}
+
+.empathy.provisional.wb-steps.quiz .wb-tggle-fildst > legend.wb-steps-active {
+    color: #5c2790;;
+
+}