fix: complete UIO implementation (resolves #149) (#150)

* fix: remove text-size preference * fix: contrast theming for text selection * fix: allow line height to be adjustable * fix: allow font-family to be adjustable * fix: handle enhance input preference * fix: remove ToC preference as most pages already include one * fix: link underline missing when input enhancement off
inclusive-design · Jan 29, 2025 · 8aac85e · 8aac85e
1 parent f00155d
commit 8aac85e
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 19 deletions.
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -82,6 +82,29 @@ export default function eleventy(eleventyConfig) {
       </inclusive-disclosure>`;
     });
 
+    /*
+        Provide a custom duplicate of eleventy-plugin-fluid's uioInit shortcode in
+        order to run it without the text-size preference.
+    */
+    eleventyConfig.addShortcode("uioCustomInit", (locale, direction) => {
+        let options = {
+            preferences: ["fluid.prefs.lineSpace", "fluid.prefs.textFont", "fluid.prefs.contrast", "fluid.prefs.enhanceInputs"],
+            auxiliarySchema: {
+                terms: {
+                    templatePrefix: "/lib/infusion/src/framework/preferences/html",
+                    messagePrefix: "/lib/infusion/src/framework/preferences/messages"
+                }
+            },
+            prefsEditorLoader: {
+                lazyLoad: true
+            },
+            locale: locale,
+            direction: direction
+        };
+
+        return `<script>fluid.uiOptions.multilingual(".flc-prefsEditor-separatedPanel", ${JSON.stringify(options)});</script>`;
+    });
+
     eleventyConfig.addTransform("parse", parse);
 
     eleventyConfig.addPassthroughCopy({

diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -37,6 +37,6 @@
     {% endblock %}
   </main>
   {% include "partials/global/footer.njk" %}
-  {% uioInit lang %}
+  {% uioCustomInit lang, supportedLanguages[lang].dir %}
 </body>
 </html>
diff --git a/src/assets/styles/abstracts/_variables.css b/src/assets/styles/abstracts/_variables.css
@@ -1,7 +1,5 @@
 :root {
     /** Typography **/
-    --family-sans-serif: "Source Sans 3", sans-serif;
-    --family-display: "Raleway", sans-serif;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
@@ -41,3 +39,10 @@
     --common-inline-padding: clamp(1.875rem, 0.0536rem + 9.1071vw, 8.25rem);
     --common-block-padding: clamp(3.75rem, 3.3929rem + 1.7857vw, 5rem);
 }
+
+/* Font-family set on the body so that it will work with UIO */
+:where(body) {
+    /** Typography **/
+    --family-sans-serif: var(--fl-font-family, "Source Sans 3", sans-serif);
+    --family-display: var(--fl-font-family, "Raleway", sans-serif);
+}
diff --git a/src/assets/styles/base/_base.css b/src/assets/styles/base/_base.css
@@ -3,6 +3,7 @@ body {
     color: var(--fl-fgColor, var(--color-black));
     font-family: var(--family-sans-serif);
     font-size: var(--step-0);
+    line-height: var(--fl-lineSpace);
 }
 
 .wrapper {
@@ -79,6 +80,12 @@ main section:last-of-type:not(:first-of-type) {
     color: var(--fl-fgColor, white);
 }
 
+/* Selection */
+::selection {
+    background-color: var(--fl-selectedBgColor, highlight);
+    color: var(--fl-selectedFgColor, highlighttext);
+}
+
 /* Image Theming */
 .fl-theme-bw,
 .fl-theme-wb,
@@ -170,7 +177,9 @@ main section:last-of-type:not(:first-of-type) {
 
 a:not([class]) {
     color: var(--fl-linkFgColor, currentColor);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--fl-enhance-font-size);
+    font-weight: var(--fl-enhance-font-weight, var(--font-weight-semibold));
+    text-decoration: var(--fl-enhance-text-decoration, revert);
 
     &:hover {
         background-color: var(--fl-linkFgColor, var(--color-yellow));
@@ -232,8 +241,8 @@ button.borderless {
     border: 0;
     border-radius: 0.3125rem;
     font-family: var(--family-sans-serif);
-    font-size: var(--step--1);
-    font-weight: var(--font-weight-medium);
+    font-size: calc(var(--step--1) * var(--fl-enhance-font-size-factor, 1));
+    font-weight: var(--fl-enhance-font-weight, var(--font-weight-medium));
     padding-inline: 0.875rem;
     padding-block: 0;
 

diff --git a/src/assets/styles/base/_reset.css b/src/assets/styles/base/_reset.css
@@ -41,7 +41,7 @@ h3,
 button,
 input,
 label {
-    line-height: 1.4;
+    line-height: calc(1.4 * var(--fl-lineSpace-factor, 1));
 }
 
 h1,
@@ -64,4 +64,4 @@ picture {
 input {
     font-family: inherit;
     font-size: inherit;
-}
+}
diff --git a/src/assets/styles/base/_typography.css b/src/assets/styles/base/_typography.css
@@ -20,6 +20,10 @@ h3,
     font-size: var(--step-3);
 }
 
+.project nav inclusive-disclosure h2 {
+    font-size: calc(var(--step-3) * var(--fl-enhance-font-size-factor, 1));
+}
+
 h4,
 .card h3,
 footer h2 {

diff --git a/src/assets/styles/components/_disclosure.css b/src/assets/styles/components/_disclosure.css
@@ -14,8 +14,8 @@ inclusive-disclosure [aria-expanded] {
     color: var(--fl-linkFgColor, var(--color-indigo-700));
     display: flex;
     font-family: var(--family-display);
-    font-size: var(--step-2);
-    font-weight: var(--font-weight-semibold);
+    font-size: calc(var(--step-2) * var(--fl-enhance-font-size-factor, 1));
+    font-weight: var(--fl-enhance-font-weight, var(--font-weight-semibold));
     height: 5rem;
     padding-inline-end: 0.625;
     position: relative;

diff --git a/src/assets/styles/components/_navigation.css b/src/assets/styles/components/_navigation.css
@@ -15,8 +15,9 @@ a.skip {
     justify-content: center;
     background: var(--fl-linkBgColor, var(--color-yellow));
     color: var(--fl-linkFgColor, var(--color-black));
-    text-decoration: none;
-    font-weight: var(--font-weight-semibold);
+    text-decoration: var(--fl-enhance-text-decoration, none);
+    font-size: var(--fl-enhance-font-size);
+    font-weight: var(--fl-enhance-font-weight, var(--font-weight-semibold));
     display: flex;
     padding-block: 0.625rem;
     padding-inline: 1.875rem;
@@ -47,8 +48,9 @@ a[rel="home"] {
     text-decoration: none;
     text-transform: lowercase;
     font-family: var(--family-display);
-    font-size: clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);
-    font-weight: var(--font-weight-medium);
+    font-size: calc(var(--fl-enhance-font-size-factor, 1) * clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem));
+    font-weight: var(--fl-enhance-font-weight, var(--font-weight-medium));
+    text-decoration: var(--fl-enhance-text-decoration);
 
     strong {
         font-weight: var(--font-weight-extrabold);
@@ -60,8 +62,8 @@ a[rel="home"] {
     gap: 0.625rem;
     align-items: center;
     font-family: var(--family-sans-serif);
-    font-weight: var(--font-weight-semibold);
-    font-size: var(--step-0);
+    font-size: calc(var(--fl-enhance-font-size-factor, 1) * var(--step-0));
+    font-weight: var(--fl-enhance-font-weight, var(--font-weight-semibold));
 }
 
 .navigation [aria-expanded="false"] > .menu__expanded,
@@ -100,11 +102,11 @@ a[rel="home"] {
     block-size: 3.75rem;
     color: var(--fl-linkFgColor, var(--color-white));
     display: flex;
-    font-size: var(--step-0);
-    font-weight: var(--font-weight-semibold);
+    font-size: calc(var(--fl-enhance-font-size-factor, 1) * var(--step-0));
+    font-weight: var(--fl-enhance-font-weight, var(--font-weight-semibold));
     padding-block: 0.625rem;
     padding-inline: var(--common-inline-padding);
-    text-decoration: none;
+    text-decoration: var(--fl-enhance-text-decoration, none);
 
     &[aria-current="page"] {
         background-color: var(--fl-bgColor, var(--color-indigo-800));
@@ -152,6 +154,9 @@ a[rel="home"] {
         max-width: 31.25em;
         top: -5.625rem;
         position: absolute;
+        font-size: var(--fl-enhance-font-size);
+        font-weight: var(--fl-enhance-font-weight);
+        text-decoration: var(--fl-enhance-text-decoration);
 
         &:focus {
             top: 0;

diff --git a/src/assets/styles/components/_tag.css b/src/assets/styles/components/_tag.css
@@ -23,6 +23,8 @@ button.tag {
     background-color: var(--fl-linkBgColor, var(--color-light-grey));
     box-shadow: inset 0 0 0 0.125rem var(--fl-linkFgColor, var(--color-indigo-700));
     color: var(--fl-linkFgColor, var(--color-indigo-700));
+    font-size: var(--fl-enhance-font-size);
+    font-weight: var(--fl-enhance-font-weight, var(--font-weight-medium));
     padding-block: 0;
 
     svg.remove {