diff --git "a/_data/m\303\251li-m\303\251lo.json" "b/_data/m\303\251li-m\303\251lo.json" index 7051ad7a0..bd6639429 100644 --- "a/_data/m\303\251li-m\303\251lo.json" +++ "b/_data/m\303\251li-m\303\251lo.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" diff --git "a/m\303\251li-m\303\251lo/th-empathy/empathy.html" "b/m\303\251li-m\303\251lo/th-empathy/empathy.html" new file mode 100644 index 000000000..f0c52216d --- /dev/null +++ "b/m\303\251li-m\303\251lo/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 +--- +

{{ page.title }}

+

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.

+{% assign metadata = site.pages | where: "output", "false" | where: "componentName", "th-empathy" | first %} +

Sponsor: {{ metadata.sponsor }}

+

Accessibility statement: {{ metadata.a11yStatement }}

+

Progressive enhancement note:

+ + +

CSS classes

+
+
.empathy
+
When applied to the <h1> element it set a purple underline to the title element of the page.
+
When applied to the Steps Quiz along with the wb-steps and quiz it set the thematic colors to the navigation buttons, the progress bar and to the <legend> text.
+
.btn-empathy
+
Along with .btn-primary or .btn-default, set a purple colour thematic to buttons.
+
+ +

Examples

+

Purple Underline to the <h1>

+

The example has been applied to the <h1> element of this page.

+

Code

+
<h1 property="name" id="wb-cont" class="empathy"><-- Page title --></h1>
+ +

Purple Button

+ +

Code

+
<button class="btn btn-primary btn-empathy" type="button">Button</button>
+ +

Light Purple Button

+ +

Code

+
<button class="btn btn-default btn-empathy" type="button">Button</button>
+ +

Steps Progress

+
+
+
+
+ Which is your favorite fruit? +
+

My favorite fruit is:

+
    +
  • + + +
    • +
  • + + +
    • +
+
+
+
+ Condiments +
+

Choose your condiments:

+
    +
  • + + +
    • +
  • + + +
    • +
+
+
+ +
+
+
+

Code

+
<div class="wb-frmvld provisional wb-steps quiz empathy panel-body">
+    <!-- Steps Quiz Form -->
+</div>
diff --git "a/m\303\251li-m\303\251lo/th-empathy/meta.md" "b/m\303\251li-m\303\251lo/th-empathy/meta.md" new file mode 100644 index 000000000..1d9d3115d --- /dev/null +++ "b/m\303\251li-m\303\251lo/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, eric.guitard@servicecanada.gc.ca. 2024-04-30. +peNote: +- The btn-empathy class must be accompagnied with a fall back button class such as btn-default or btn-primary. +pages: + examples: + - title: Empathy theme + language: en + path: empathy.html +sponsor: ESDC - Principal Publisher +output: false +--- diff --git "a/m\303\251li-m\303\251lo/th-empathy/style.css" "b/m\303\251li-m\303\251lo/th-empathy/style.css" new file mode 100644 index 000000000..74bc35e21 --- /dev/null +++ "b/m\303\251li-m\303\251lo/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;; + +}