Merge pull request #1104 from jobara/FLUID-6763

FLUID-6763: Add Atkinson Hyperlegible font to UIO

.github/workflows/ci-build.yml

@@ -15,7 +15,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macOS-latest]
-        node-version: [12.x, 14.x]
+        node-version: [18.x, 20.x, 22.x]
 
     steps:
     - name: Prepare git

.github/workflows/ci-lint.yml

@@ -14,10 +14,10 @@ jobs:
 
     - uses: actions/checkout@v2
 
-    - name: Use Node.js 14
+    - name: Use Node.js 20
       uses: actions/setup-node@v1
       with:
-        node-version: 14.x
+        node-version: 20.x
 
     - name: Get npm cache directory
       id: npm-cache

.github/workflows/ci-test.yml

@@ -37,7 +37,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macOS-latest]
-        node-version: [12.x, 14.x]
+        node-version: [18.x, 20.x, 22.x]
 
     env:
       HEADLESS: true

.gitignore

@@ -4,11 +4,12 @@
 /src/framework/preferences/css/*.css
 /src/framework/preferences/css/*.css.map
 /.bundle/
+/src/lib/atkinson-hyperlegible/
 /src/lib/hypher/
 /src/lib/jquery/
-/src/lib/open-dyslexic/
+/src/lib/opendyslexic/
 /src/lib/opensans/
-/src/lib/roboto/
+/src/lib/roboto-slab/
 /tests/lib/jquery-simulate/
 /tests/lib/sinon/
 /tests/lib/xhr-mock/

README.md

@@ -229,15 +229,16 @@ The zip files will obliterate the contents of the `products` directory and must
 
 #### External Libraries
 
+* atkinson-hyperlegible
 * fast-xml-pull
 * hypher
 * jquery
 * jquery-ui
 * jquery-scrollto
 * jquery-ui-touch-punch
-* open-dyslexic
-* opensans-webkit
-* roboto-fontface
+* opendyslexic
+* opensans
+* roboto-slab
 
 ## How Do I Run Tests?
 

ReleaseNotes.md

@@ -104,8 +104,8 @@ categorized by license:
 
 * [`fluid.load.scripts` is based on Jake Archibald's script loading example](
   https://www.html5rocks.com/en/tutorials/speed/script-loading/#toc-dom-rescue)
-* [Open Sans font](https://www.google.com/fonts/specimen/Open+Sans)
-* [Roboto font](https://fonts.google.com/specimen/Roboto)
+* [Roboto Slab](https://github.com/googlefonts/robotoslab)
+  * via [Fontsource](https://fontsource.org/fonts/roboto-slab)
 
 ### BSD-3
 
@@ -140,10 +140,14 @@ categorized by license:
 
 ### Open Font License
 
+* [Atkinson Hyperlegible](https://brailleinstitute.org/freefont)
+  * via [Fontsource](https://fontsource.org/fonts/atkinson-hyperlegible)
 * [Lato font v2.015](http://www.latofonts.com)
 * [Love Ya Like A Sister font](https://fonts.google.com/specimen/Love+Ya+Like+A+Sister)
-* [OpenDyslexic 3](https://opendyslexic.org/)
-  * via [NPM Package](https://github.com/ssbc/open-dyslexic) distributed under Bitstream license.
+* [OpenDyslexic](https://opendyslexic.org/)
+  * via [Fontsource](https://fontsource.org/fonts/opendyslexic)
+* [Open Sans font](https://github.com/googlefonts/opensans)
+  * via [Fontsource](https://fontsource.org/fonts/open-sans)
 
 ### zlib/libpng License
 

package.json

@@ -40,7 +40,7 @@
         "clean:build": "rimraf build products",
         "clean:deps": "run-p clean:deps:*",
         "clean:deps:code": "rimraf \"src/lib/@(hypher|jquery)\"",
-        "clean:deps:fonts": "rimraf \"src/lib/@(open-dyslexic|opensans|roboto)\"",
+        "clean:deps:fonts": "rimraf \"src/lib/@(atkinson-hyperlegible|opendyslexic|opensans|roboto-slab)\"",
         "clean:deps:tests": "rimraf \"tests/lib/@(simulate|sinon)\"",
         "clean:dist": "rimraf dist",
         "clean:sass": "rimraf \"src/framework/preferences/css/*.@(css|map)\"",
@@ -59,9 +59,10 @@
         "deps:code:jquery:touchPunch": "cpy node_modules/jquery-ui-touch-punch/jquery.ui.touch-punch.js src/lib/jquery/plugins/touchPunch/js/",
         "predeps:fonts": "npm run clean:deps:fonts",
         "deps:fonts": "run-p deps:fonts:**",
-        "deps:fonts:openSans": "cpy node_modules/opensans-webkit/fonts/OpenSans-*.woff src/lib/opensans/fonts/",
-        "deps:fonts:openDyslexic": "cpy node_modules/open-dyslexic/woff/OpenDyslexic-*.woff src/lib/open-dyslexic/fonts/",
-        "deps:fonts:roboto": "cpy node_modules/roboto-fontface/fonts/roboto-slab/Roboto-Slab-*.woff src/lib/roboto/fonts/",
+        "deps:fonts:atkinson-hyperlegible": "cpy node_modules/@fontsource/atkinson-hyperlegible/files/atkinson-hyperlegible-latin-*.woff2 src/lib/atkinson-hyperlegible/fonts/",
+        "deps:fonts:openSans": "cpy node_modules/@fontsource-variable/open-sans/files/open-sans-latin-*.woff2 src/lib/opensans/fonts/",
+        "deps:fonts:openDyslexic": "cpy node_modules/@fontsource/opendyslexic/files/opendyslexic-latin-*.woff2 src/lib/opendyslexic/fonts/",
+        "deps:fonts:roboto": "cpy node_modules/@fontsource-variable/roboto-slab/files/roboto-slab-latin-*.woff2 src/lib/roboto-slab/fonts/",
         "predeps:tests": "npm run clean:deps:tests",
         "deps:tests": "run-p deps:tests:*",
         "deps:tests:simulate": "cpy node_modules/jquery-simulate/jquery.simulate.js tests/lib/jquery-simulate/js/",
@@ -94,6 +95,10 @@
     },
     "devDependencies": {
         "@fluid-project/hyphenation-patterns": "0.2.2-dev.20181115T221631Z.b2d0651",
+        "@fontsource-variable/open-sans": "5.0.29",
+        "@fontsource-variable/roboto-slab": "5.0.20",
+        "@fontsource/atkinson-hyperlegible": "5.0.20",
+        "@fontsource/opendyslexic": "5.0.11",
         "bestzip": "2.2.1",
         "browserslist-config-fluid": "0.1.0",
         "cpy-cli": "3.1.1",
@@ -113,10 +118,7 @@
         "mkdirp": "1.0.4",
         "npm-run-all": "4.1.5",
         "nyc": "15.1.0",
-        "open-dyslexic": "1.0.3",
-        "opensans-webkit": "1.1.0",
         "rimraf": "3.0.2",
-        "roboto-fontface": "0.10.0",
         "sass": "1.43.4",
         "serve": "13.0.2",
         "sinon": "12.0.1",

src/components/overviewPanel/css/OverviewPanel.css

@@ -4,26 +4,20 @@
     src: url('../fonts/OverviewPanel-Icons.woff');
 }
 
+/* open-sans-latin-wght-normal */
 @font-face {
-    font-family: 'OpenSans';
-    src: url('../../../lib/opensans/fonts/OpenSans-Regular.woff');
+    font-family: 'Open Sans Variable';
+    font-style: normal;
+    font-weight: 300 800;
+    src: url('../../../lib/opensans/fonts/open-sans-latin-wght-normal.woff2') format('woff2-variations');
 }
 
+/* roboto-slab-latin-wght-normal */
 @font-face {
-    font-family: 'OpenSans';
-    font-weight: bold;
-    src: url('../../../lib/opensans/fonts/OpenSans-Bold.woff');
-}
-
-@font-face {
-    font-family: 'RobotoSlab';
-    src: url('../../../lib/roboto/fonts/Roboto-Slab-Regular.woff');
-}
-
-@font-face {
-    font-family: 'RobotoSlab';
-    font-weight: bold;
-    src: url('../../../lib/roboto/fonts/Roboto-Slab-Bold.woff');
+    font-family: 'Roboto Slab Variable';
+    font-style: normal;
+    font-weight: 100 900;
+    src: url('../../../lib/roboto-slab/fonts/roboto-slab-latin-wght-normal.woff2') format('woff2-variations');
 }
 
 .fl-overviewPanel-container {
@@ -36,7 +30,7 @@
      * direction.
      */
 
-    font-family: "OpenSans", "Helvetica Neue", "Helvetica", Arial, sans-serif;
+    font-family: "Open Sans Variable", "Helvetica Neue", "Helvetica", Arial, sans-serif;
     font-size: 1em;
     height: 100%;
     left: 0;
@@ -57,7 +51,7 @@
 .fl-overviewPanel .fl-overviewPanel-title {
     background-color: #333;
     color: #ccc;
-    font-family: 'RobotoSlab', serif;
+    font-family: 'Roboto Slab Variable', serif;
     height: 5.5em;
     left: 0;
     line-height: 2em;

src/components/overviewPanel/package.json

@@ -13,8 +13,8 @@
     },
     "dependencies": {
         "jquery": "3.6.0",
-        "opensans-webkit": "1.1.0",
-        "roboto-fontface": "0.10.0",
+        "opensans": "5.0.29",
+        "roboto-slab": "5.0.20",
         "fluid-framework": "^4.0.0",
         "fluid-renderer": "4.0.0"
     }

src/framework/preferences/css/sass/Font_base.scss

@@ -1,7 +1,7 @@
 @use "utils/fonts";
 
 .fl-blocking-font {
-    --fl-font-family: "OpenSans";
+    --fl-font-family: "Open Sans Variable";
 }
 
 // Font face definitions

src/framework/preferences/css/sass/SeparatedPanelPrefsEditor.scss

@@ -1,24 +1,11 @@
 $icon-font: 'PrefsFramework-Icons';
 
+/* open-sans-latin-wght-normal */
 @font-face {
-    font-family: 'OpenSans';
+    font-family: 'Open Sans Variable';
     font-style: normal;
-    font-weight: 300;
-    src: url('../../../lib/opensans/fonts/OpenSans-Light.woff');
-}
-
-@font-face {
-    font-family: 'OpenSans';
-    font-style: normal;
-    font-weight: normal;
-    src: url('../../../lib/opensans/fonts/OpenSans-Regular.woff');
-}
-
-@font-face {
-    font-family: 'OpenSans';
-    font-style: normal;
-    font-weight: 600;
-    src: url('../../../lib/opensans/fonts/OpenSans-SemiBold.woff');
+    font-weight: 300 800;
+    src: url('../../../lib/open-sans/files/open-sans-latin-wght-normal.woff2') format('woff2-variations');
 }
 
 body {
@@ -62,7 +49,7 @@ body {
         background-color: var(--fl-buttonBgColor, #fff);
         border: none;
         color: var(--fl-buttonFgColor, #2f2b2a);
-        font-family: var(--fl-font-family, OpenSans, "Myriad Pro", Helvetica, Arial, sans-serif);
+        font-family: var(--fl-font-family, "Open Sans Variable", "Myriad Pro", Helvetica, Arial, sans-serif);
         font-size: calc(var(--fl-enhance-font-size-factor, 1) * var(--fl-textSize, 1rem) * 1.3);
         letter-spacing: var(--fl-letterSpace);
         overflow: hidden;
@@ -104,7 +91,7 @@ body {
 
     .fl-prefsEditor {
         color: var(--fl-prefsEditorFgColor, #5d5652);
-        font-family: var(--fl-font-family, "OpenSans", "Myriad Pro", Helvetica, Arial, sans-serif);
+        font-family: var(--fl-font-family, "Open Sans Variable", "Myriad Pro", Helvetica, Arial, sans-serif);
         min-width: 100%;
         overflow-x: scroll;
     }

src/framework/preferences/css/sass/utils/_fonts.scss

@@ -5,33 +5,60 @@ $fonts: (
     ".fl-font-verdana": "Verdana",
     ".fl-font-times": "Georgia, Times, Times New Roman, serif",
     ".fl-font-comic-sans": "Comic Sans MS, sans-serif",
-    ".fl-font-open-dyslexic": "OpenDyslexic, sans-serif"
+    ".fl-font-open-dyslexic": "OpenDyslexic, sans-serif",
+    ".fl-font-atkinson-hyperlegible": "Atkinson Hyperlegible, sans-serif",
 );
 
 // Defines any @font-face definitions needed by the enactors
 $fontFaces: (
     open-dyslexic: (
-        font-directory: "../../../lib/open-dyslexic/fonts/",
+        font-directory: "../../../lib/opendyslexic/fonts/",
         font-family: "OpenDyslexic",
         definitions: (
             normal: (
-                filename:"OpenDyslexic-Regular.woff",
+                filename:"opendyslexic-latin-400-normal.woff2",
                 font-weight: normal,
                 font-style: normal
             ),
             bold: (
-                filename:"OpenDyslexic-Bold.woff",
-                font-weight: 600,
+                filename:"opendyslexic-latin-700-normal.woff2",
+                font-weight: 700,
                 font-style: normal
             ),
             italic: (
-                filename:"OpenDyslexic-Italic.woff",
+                filename:"opendyslexic-latin-400-italic.woff2",
                 font-weight: normal,
                 font-style: italic
             ),
             bold-italic: (
-                filename:"OpenDyslexic-BoldItalic.woff",
-                font-weight: 600,
+                filename:"opendyslexic-latin-700-italic.woff2",
+                font-weight: 700,
+                font-style: italic
+            )
+        )
+    ),
+    atkinson-hyperlegible: (
+        font-directory: "../../../lib/atkinson-hyperlegible/fonts/",
+        font-family: "Atkinson Hyperlegible",
+        definitions: (
+            normal: (
+                filename:"atkinson-hyperlegible-latin-400-normal.woff2",
+                font-weight: normal,
+                font-style: normal
+            ),
+            bold: (
+                filename:"atkinson-hyperlegible-latin-700-normal.woff2",
+                font-weight: 700,
+                font-style: normal
+            ),
+            italic: (
+                filename:"atkinson-hyperlegible-latin-400-italic.woff2",
+                font-weight: normal,
+                font-style: italic
+            ),
+            bold-italic: (
+                filename:"atkinson-hyperlegible-latin-700-italic.woff2",
+                font-weight: 700,
                 font-style: italic
             )
         )

src/framework/preferences/js/StarterGrades.js

@@ -54,7 +54,8 @@ fluid.defaults("fluid.uiEnhancer.cssClassEnhancerBase", {
             "comic": "fl-font-comic-sans",
             "arial": "fl-font-arial",
             "verdana": "fl-font-verdana",
-            "open-dyslexic": "fl-font-open-dyslexic"
+            "open-dyslexic": "fl-font-open-dyslexic",
+            "atkinson-hyperlegible": "fl-font-atkinson-hyperlegible"
         },
         "theme": {
             "default": "fl-theme-prefsEditor-default",
@@ -249,11 +250,12 @@ fluid.defaults("fluid.prefs.starterPanels", {
                         "textFont-comic",
                         "textFont-arial",
                         "textFont-verdana",
-                        "textFont-open-dyslexic"
+                        "textFont-open-dyslexic",
+                        "textFont-atkinson-hyperlegible"
                     ]
                 },
                 controlValues: {
-                    textFont: ["default", "times", "comic", "arial", "verdana", "open-dyslexic"]
+                    textFont: ["default", "times", "comic", "arial", "verdana", "open-dyslexic", "atkinson-hyperlegible"]
                 }
             }
         },

src/framework/preferences/js/StarterSchemas.js

@@ -78,7 +78,8 @@ fluid.defaults("fluid.prefs.auxSchema.textFont", {
                     "comic": "fl-font-comic-sans",
                     "arial": "fl-font-arial",
                     "verdana": "fl-font-verdana",
-                    "open-dyslexic": "fl-font-open-dyslexic"
+                    "open-dyslexic": "fl-font-open-dyslexic",
+                    "atkinson-hyperlegible": "fl-font-atkinson-hyperlegible"
                 }
             },
             panel: {
@@ -91,7 +92,8 @@ fluid.defaults("fluid.prefs.auxSchema.textFont", {
                         "comic": "fl-font-comic-sans",
                         "arial": "fl-font-arial",
                         "verdana": "fl-font-verdana",
-                        "open-dyslexic": "fl-font-open-dyslexic"
+                        "open-dyslexic": "fl-font-open-dyslexic",
+                        "atkinson-hyperlegible": "fl-font-atkinson-hyperlegible"
                     }
                 },
                 template: "%templatePrefix/PrefsEditorTemplate-textFont.html",
@@ -223,14 +225,15 @@ fluid.defaults("fluid.prefs.schemas.textFont", {
         "fluid.prefs.textFont": {
             "type": "string",
             "default": "default",
-            "enum": ["default", "times", "comic", "arial", "verdana", "open-dyslexic"],
+            "enum": ["default", "times", "comic", "arial", "verdana", "open-dyslexic", "atkinson-hyperlegible"],
             "enumLabels": [
                 "textFont-default",
                 "textFont-times",
                 "textFont-comic",
                 "textFont-arial",
                 "textFont-verdana",
-                "textFont-open-dyslexic"
+                "textFont-open-dyslexic",
+                "textFont-atkinson-hyperlegible"
             ]
         }
     }