Merge branch 'develop'

CHANGELOG.txt

@@ -1,3 +1,11 @@
+VERSION 2.13.0 - Released October 12, 2022
+
+* Use new official fonts (serif & condensed)
+
+Full information about this release can be found at https://github.com/web-illinois/toolkit/milestone/12?closed=1
+
+----
+
 VERSION 2.12.0 - Released September 14, 2022
 
 Information about this release can be found at https://github.com/web-illinois/toolkit/milestone/11?closed=1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "il-toolkit",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "description": "Web toolkit",
   "repository": "https://github.com/web-illinois/toolkit",
   "author": "Web Implementation Guidelines Group",

src/css/components/_card.scss

@@ -27,6 +27,10 @@ il-card, .il-card, .il-formatted il-card, .il-formatted .il-card {
       color: var(--il-card-link-focus-color, var(--il-card-link-color));
       outline: var(--il-card-link-focus-outline);
     }
+
+    &.il-button:focus, &.il-button:hover {
+      color: var(--il-focused-button-foreground-color);
+    }
   }
 
   h2, h3, h4, h5, h6 {

src/css/components/_image-feature.scss

@@ -71,7 +71,8 @@
 
 .il-align-right il-image-feature, il-image-feature.il-align-right, 
 .il-float-left il-image-feature, il-image-feature.il-float-left, 
-.il-align-right il-video-feature, il-video-feature.il-align-right {
+.il-align-right il-video-feature, il-video-feature.il-align-right,
+.il-float-left il-video-feature, il-video-feature.il-float-left {
   --il-image-feature-flex-direction: row-reverse;
 }
 

src/css/fonts.scss

@@ -1,5 +1,6 @@
 @import "fonts/fjalla-one";
 @import "fonts/montserrat";
+@import "fonts/open-sans";
 @import "fonts/source-sans";
 @import "fonts/source-serif";
 
@@ -11,12 +12,14 @@
   --il-fjalla-one: "Fjalla One", sans-serif;
   --il-montserrat: "Montserrat", sans-serif;
   --il-montserrat-alt: "Montserrat Alternate", sans-serif;
+  --il-open-sans-variable: 'Open Sans Variable', sans-serif;
+  --il-open-sans-condensed: 'Open Sans Condensed', sans-serif;
   --il-source-sans: 'Source Sans Variable', 'Source Sans', sans-serif;
   --il-source-sans-fixed: 'Source Sans', sans-serif;
-  --il-source-serif: 'Source Serif Variable', 'Source Serif', serif;
-  --il-source-serif-fixed: 'Source Serif', serif;
+  --il-source-serif: Georgia, 'Source Serif Variable', 'Source Serif', serif;
+  --il-source-serif-fixed: Georgia, 'Source Serif', serif;
 
-  --il-font-condensed: "Fjalla One", "Open Sans", "PT Sans Narrow", "Cabin Condensed", "Ubuntu Condensed", "Yanone Kaffeesatz", sans-serif;
+  --il-font-condensed: "Open Sans Condensed", "Fjalla One", "PT Sans Narrow", "Cabin Condensed", "Ubuntu Condensed", "Yanone Kaffeesatz", sans-serif;
   --il-font-sans: "Source Sans Variable", "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
-  --il-font-serif: "Source Serif Variable", Georgia, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", serif;
+  --il-font-serif: Georgia, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", serif;
 }

src/css/fonts/_open-sans.scss

@@ -0,0 +1,174 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 300;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-300.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 300;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-300-italic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-400.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 400;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-400-italic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 600;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-600.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 600;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-600-italic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 700;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-700.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 700;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-700-italic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 800;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-800.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 800;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-800-italic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans Condensed';
+  font-weight: 300;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-condensed-300.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans Condensed';
+  font-weight: 300;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-condensed-300-italic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans Condensed';
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-condensed-400.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans Condensed';
+  font-weight: 400;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-condensed-400-italic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans Condensed';
+  font-weight: 600;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-condensed-600.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans Condensed';
+  font-weight: 600;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-condensed-600-italic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans Condensed';
+  font-weight: 700;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-condensed-700.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans Condensed';
+  font-weight: 700;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-condensed-700-italic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans Condensed';
+  font-weight: 800;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-condensed-800.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans Condensed';
+  font-weight: 800;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-condensed-800-italic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans Variable';
+  font-style: normal;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-var.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans Variable';
+  font-style: italic;
+  font-stretch: normal;
+  src: url('https://cdn.brand.illinois.edu/fonts/open-sans/open-sans-var-italic.ttf') format('truetype');
+}
+

src/js/components/header/header.css.js

@@ -18,6 +18,7 @@ export default css`
 
 .campus svg {
   fill: var(--il-blue);
+  transition: fill .3s;
 }
 
 .campus a:focus svg, .campus a:hover svg {

tests/components/video-feature/float.njk

@@ -0,0 +1,40 @@
+---
+title: Video Feature (float option)
+group: "Components: Video Feature"
+layout: layouts/page.njk
+---
+<div class="il-formatted">
+<h2>No option</h2>
+<p><em>Pulled out video for visual testing -- can use https://mediaspace.illinois.edu/media/t/1_0o2ypqvp</em></p>
+<il-video-feature src="">
+<h3>Student Life</h3>
+<p>Animal sciences students extend their learning and career networks beyond
+the classroom through internships, judging teams, student organizations, undergraduate research
+projects with our faculty, as well as short- and long-term study abroad opportunities all over the world. </p>
+<a href="#" class="il-button">Subscribe</a>
+<a href="#" class="il-button">Find a departmental advisor</a>
+</il-video-feature>
+
+<h2>Float Left</h2>
+<p><em>Pulled out video for visual testing -- can use https://mediaspace.illinois.edu/media/t/1_0o2ypqvp</em></p>
+<il-video-feature class="il-float-left" src="">
+<h3>Student Life</h3>
+<p>Animal sciences students extend their learning and career networks beyond
+the classroom through internships, judging teams, student organizations, undergraduate research
+projects with our faculty, as well as short- and long-term study abroad opportunities all over the world. </p>
+<a href="#" class="il-button">Subscribe</a>
+<a href="#" class="il-button">Find a departmental advisor</a>
+</il-video-feature>
+
+<h2>Float Right</h2>
+<p><em>Pulled out video for visual testing -- can use https://mediaspace.illinois.edu/media/t/1_0o2ypqvp</em></p>
+<il-video-feature class="il-float-right" src="">
+<h3>Student Life</h3>
+<p>Animal sciences students extend their learning and career networks beyond
+the classroom through internships, judging teams, student organizations, undergraduate research
+projects with our faculty, as well as short- and long-term study abroad opportunities all over the world. </p>
+<a href="#" class="il-button">Subscribe</a>
+<a href="#" class="il-button">Find a departmental advisor</a>
+</il-video-feature>
+
+</div>

tests/components/video-feature/float.vis.js

@@ -0,0 +1,12 @@
+const util = require('../../tests.util');
+
+const url = util.testUrl(__filename);
+
+module.exports = (viewports) => {
+  return [
+    {
+      url, label: "videofeature-float",
+      viewports: [viewports.desktop, viewports.iphone, viewports.hdtv]
+    }
+  ]
+}

tests/stylesheets/fonts/condensed.html

@@ -0,0 +1,8 @@
+---
+title: Condensed
+group: Fonts
+layout: layouts/font.njk
+var: il-font-condensed
+weights: [300, 400, 600, 700, 800]
+styles: ["normal", "italic"]
+---

tests/stylesheets/fonts/fjalla-one.vis.js → tests/stylesheets/fonts/condensed.vis.js

@@ -3,8 +3,8 @@ const util = require('../../tests.util');
 module.exports = (viewports) => {
   return [
     {
-      'label': 'fonts-fjalla-one',
-      'url': util.url('/stylesheets/fonts/fjalla-one/'),
+      'label': 'fonts-condensed',
+      'url': util.url('/stylesheets/fonts/condensed/'),
       'viewports': [viewports.desktop]
     }
   ];

tests/stylesheets/fonts/open-sans-condensed.html

@@ -3,6 +3,6 @@
 group: Fonts
 layout: layouts/font.njk
 var: il-open-sans-condensed
-weights: [400, 700]
+weights: [300, 400, 600, 700, 800]
 styles: ["normal", "italic"]
 ---

tests/stylesheets/fonts/open-sans-condensed.vis.js

@@ -0,0 +1,11 @@
+const util = require('../../tests.util');
+
+module.exports = (viewports) => {
+  return [
+    {
+      'label': 'fonts-open-sans-condensed',
+      'url': util.testUrl(__filename),
+      'viewports': [viewports.desktop]
+    }
+  ];
+}

tests/stylesheets/fonts/source-serif.html → tests/stylesheets/fonts/sans.html

@@ -1,8 +1,8 @@
 ---
-title: "Source Serif Pro (variable)"
+title: "Sans"
 group: Fonts
 layout: layouts/font.njk
-var: il-source-serif
+var: il-font-sans
 weights: [100, 200, 300, 400, 500, 600, 700, 800, 900]
 styles: ["normal", "italic"]
 ---

tests/stylesheets/fonts/source-serif.vis.js → tests/stylesheets/fonts/sans.vis.js

@@ -3,7 +3,7 @@ const util = require('../../tests.util');
 module.exports = (viewports) => {
   return [
     {
-      'label': 'fonts-source-serif',
+      'label': 'fonts-sans',
       'url': util.testUrl(__filename),
       'viewports': [viewports.desktop]
     }

tests/stylesheets/fonts/serif.html

@@ -0,0 +1,8 @@
+---
+title: "Serif"
+group: Fonts
+layout: layouts/font.njk
+var: il-font-serif
+weights: [400, 700]
+styles: ["normal", "italic"]
+---

tests/stylesheets/fonts/source-serif-fixed.vis.js → tests/stylesheets/fonts/serif.vis.js

@@ -3,7 +3,7 @@ const util = require('../../tests.util');
 module.exports = (viewports) => {
   return [
     {
-      'label': 'fonts-source-serif-fixed',
+      'label': 'fonts-serif',
       'url': util.testUrl(__filename),
       'viewports': [viewports.desktop]
     }