Merge pull request #413 from web-illinois/develop

Merging to main for 2.14.1 updates

.eleventy.js

@@ -2,6 +2,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.setTemplateFormats(['html', 'md', 'njk', '11ty.js', 'css', 'jpg', 'json']);
   eleventyConfig.addPassthroughCopy({
     "dist": ".",
+    "node_modules/axe-core": "axe",
     "tests/_reference": "reference-images"
   });
 

jest.func.config.js

@@ -1,12 +1,13 @@
 module.exports = {
-    "preset": "jest-puppeteer",
-    "rootDir": "tests",
-    "testMatch": ["**/*.func.js"],
-    "reporters": [
+    preset: "jest-puppeteer",
+    rootDir: "tests",
+    testMatch: ["**/*.func.js"],
+    reporters: [
         "default",
         ["jest-html-reporter", {
-            "outputPath": "./var/jest/results.html",
-            "pageTitle": "Web toolkit"
+            outputPath: "./var/jest/results.html",
+            pageTitle: "Web toolkit"
         }]
-    ]
+    ],
+    setupFilesAfterEnv: ['<rootDir>/_scripts/setupFunctionalTests.js']
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "il-toolkit",
-  "version": "2.13.0",
+  "version": "2.14.1",
   "description": "Web toolkit",
   "repository": "https://github.com/web-illinois/toolkit",
   "author": "Web Implementation Guidelines Group",
@@ -24,11 +24,12 @@
     "@symfony/webpack-encore": "^0.30.2",
     "lit": "^2.0.0-rc.3",
     "remove-files-webpack-plugin": "^1.4.4",
-    "sass-loader": "^8.0.2",
-    "sass": "^1.44.0"
+    "sass": "^1.44.0",
+    "sass-loader": "^8.0.2"
   },
   "devDependencies": {
     "@11ty/eleventy": "^0.12.1",
+    "axe-core": "^4.5.2",
     "backstopjs": "^4.5.1",
     "fast-glob": "^3.2.7",
     "jest": "^25.5.4",

src/css/colors.scss

@@ -3,8 +3,13 @@
     --#{$name}: #{$hex};
   }
 
-  --il-blue-gradient: linear-gradient(180deg, var(--il-industrial-blue) 0%, var(--il-blue) 100%);
-  --il-orange-gradient: linear-gradient(180deg, var(--il-orange) 0%, var(--il-altgeld) 100%);
+  --il-blue-gradient-start: var(--il-industrial-blue);
+  --il-blue-gradient-end: var(--il-blue);
+  --il-blue-gradient: linear-gradient(180deg, var(--il-blue-gradient-start) 0%, var(--il-blue-gradient-end) 100%);
+
+  --il-orange-gradient-start: var(--il-orange);
+  --il-orange-gradient-end: var(--il-altgeld);
+  --il-orange-gradient: linear-gradient(180deg, var(--il-orange-gradient-start) 0%, var(--il-orange-gradient-end) 100%);
 
   --il-gradient-blue: var(--il-blue-gradient); // Deprecated
   --il-gradient-orange: var(--il-orange-gradient); // Deprecated

src/css/components/_card.scss

@@ -81,7 +81,8 @@ il-card, .il-card, .il-formatted il-card, .il-formatted .il-card {
   }
 
   .il-button {
-    font-weight: 600;
+    font-weight: 700;
+    font-size: 20px;
   }
 
   .il-icon {
@@ -151,11 +152,11 @@ il-card[link], .il-formatted il-card[link] {
   --il-card-background: var(--il-gray-1);
   --il-card-color: var(--il-base-25);
   --il-card-link-focus-color: var(--il-altgeld);
-  --il-card-heading-color: var(--il-orange);
+  --il-card-heading-color: var(--il-altgeld);
   --il-card-heading-link-focus-color: var(--il-blue);
   --il-card-hover-background: var(--il-blue);
   --il-card-hover-color: white;
-  --il-card-hover-heading-color: var(--il-orange);
+  --il-card-hover-heading-color: var(--il-altgeld);
 }
 
 .il-theme-blue, .il-theme-blue-gradient {
@@ -180,6 +181,7 @@ il-card[link], .il-formatted il-card[link] {
 .il-theme-orange, .il-theme-orange-gradient {
   --il-card-background: var(--il-orange);
   --il-card-border-color: var(--il-orange);
+  --il-card-button-color: var(--il-blue);
   --il-card-color: var(--il-blue);
   --il-card-link-color: var(--il-blue);
   --il-card-link-focus-color: var(--il-blue);

src/css/components/_directory.scss

@@ -166,7 +166,7 @@ il-profile-card {
     text-decoration: underline;
 
     &:hover, &:focus {
-      color: var(--il-orange);
+      color: var(--il-altgeld);
     }
   }
 

src/css/components/_hero.scss

@@ -84,7 +84,7 @@ il-hero {
     @include reset-heading;
     font: 700 36px var(--il-font-sans);
     line-height: 1;
-    text-shadow: 2px 2px 7px rgba(0, 0, 0, 0.45);
+    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
     text-align: inherit !important;
 
     @media (min-width: 576px) {

src/css/components/_image-feature-with-overlay.scss

@@ -1,6 +1,6 @@
 :root {
   --il-image-feature-with-overlay-width: 40%;
-  --il-image-feature-with-overlay-background: rgba(19, 41, 75, .85);
+  --il-image-feature-with-overlay-background: rgba(19, 41, 75, .9);
   --il-image-feature-with-overlay-background-solid: var(--il-blue);
   --il-image-feature-with-overlay-padding: 3.125rem 1.875rem;
   --il-image-feature-with-overlay-align: left;
@@ -38,7 +38,7 @@ il-image-feature.il-overlay img, .il-overlay il-image-feature img {
 .il-theme-orange il-image-feature.il-overlay, il-image-feature.il-theme-orange.il-overlay {
   --il-focused-button-foreground-color: var(--il-orange);
   --il-image-feature-with-overlay-background-solid: var(--il-orange);
-  --il-image-feature-with-overlay-background: rgba(255, 85, 46, .85);
+  --il-image-feature-with-overlay-background: rgba(255, 95, 5, .9);
   --il-image-feature-with-overlay-border: 1px solid var(--il-orange);
 }
 
@@ -48,10 +48,21 @@ il-image-feature.il-overlay img, .il-overlay il-image-feature img {
   --il-focused-button-foreground-color: white;
   --il-focused-button-background-color: var(--il-blue);
   --il-image-feature-with-overlay-background-solid: white;
-  --il-image-feature-with-overlay-background: rgba(255, 255, 255, .85);
+  --il-image-feature-with-overlay-background: rgba(255, 255, 255, .9);
   --il-image-feature-with-overlay-border: 1px solid #707070;
 }
 
+.il-theme-gray il-image-feature, il-image-feature.il-theme-gray {
+  --il-button-foreground-color: var(--il-blue);
+  --il-button-border-color: var(--il-blue);
+  --il-focused-button-foreground-color: var(--il-gray-1);
+  --il-focused-button-background-color: var(--il-blue);
+  --il-image-feature-with-overlay-background-solid: var(--il-gray-1);
+  --il-image-feature-with-overlay-background: rgba(244, 244, 244, .9);
+  --il-image-feature-with-overlay-border: 1px solid #707070;
+  --il-button-background-color: white;
+}
+
 .il-theme-orange il-image-feature.il-overlay p, il-image-feature.il-theme-orange.il-overlay p {
   color: var(--il-base-25);
 }

src/css/components/_image-feature.scss

@@ -1,7 +1,85 @@
+
+// Theme classes
+
+%image-feature-theme-blue {
+  --il-image-feature-background: var(--il-blue);
+  --il-image-feature-button-color: white;
+  --il-image-feature-button-border-color: white;
+  --il-image-feature-button-hover-background: white;
+  --il-image-feature-button-hover-color: var(--il-blue);
+  --il-image-feature-button-hover-border-color: white;
+  --il-image-feature-color: white;
+  --il-image-feature-heading-color: white;
+  --il-image-feature-link-color: white;
+  --il-image-feature-link-hover-color: var(--il-orange);
+}
+
+%image-feature-theme-blue-gradient {
+  @extend %image-feature-theme-blue;
+  --il-image-feature-background: var(--il-blue-gradient);
+}
+
+%image-feature-theme-orange {
+  --il-image-feature-background: var(--il-orange);
+  --il-image-feature-button-color: white;
+  --il-image-feature-button-border-color: white;
+  --il-image-feature-button-hover-background: white;
+  --il-image-feature-button-hover-color: var(--il-orange);
+  --il-image-feature-button-hover-border-color: white;
+  --il-image-feature-color: black;
+  --il-image-feature-heading-color: white;
+  --il-image-feature-link-color: black;
+  --il-image-feature-link-hover-color: var(--il-blue);
+  --il-button-border-color: var(--il-blue);
+  --il-button-foreground-color: var(--il-blue);
+  --il-focused-button-background-color: var(--il-blue);
+  --il-focused-button-foreground-color: white;
+}
+
+%image-feature-theme-orange-gradient {
+  @extend %image-feature-theme-orange;
+}
+
+%image-feature-theme-white {
+  --il-image-feature-background: white;
+  --il-image-feature-button-color: var(--il-blue);
+  --il-image-feature-button-border-color: var(--il-blue);
+  --il-image-feature-button-hover-background: var(--il-blue);
+  --il-image-feature-button-hover-color: white;
+  --il-image-feature-button-hover-border-color: var(--il-blue);
+  --il-image-feature-color: var(--il-blue);
+  --il-image-feature-heading-color: var(--il-blue);
+  --il-image-feature-link-color: var(--il-industrial-blue);
+  --il-image-feature-link-hover-color: var(--il-altgeld);
+  --il-button-border-color: var(--il-blue);
+  --il-button-foreground-color: var(--il-blue);
+  --il-focused-button-background-color: var(--il-blue);
+  --il-focused-button-foreground-color: white;
+}
+
+%image-feature-theme-gray {
+  --il-image-feature-background: var(--il-gray-1);
+  --il-image-feature-button-color: var(--il-blue);
+  --il-image-feature-button-border-color: var(--il-blue);
+  --il-image-feature-button-hover-background: var(--il-blue);
+  --il-image-feature-button-hover-color: white;
+  --il-image-feature-button-hover-border-color: var(--il-blue);
+  --il-image-feature-color: var(--il-blue);
+  --il-image-feature-heading-color: var(--il-blue);
+  --il-image-feature-link-color: var(--il-industrial-blue);
+  --il-image-feature-link-hover-color: var(--il-altgeld);
+  --il-button-background-color: white;
+  --il-button-border-color: var(--il-blue);
+  --il-button-foreground-color: var(--il-blue);
+  --il-focused-button-background-color: var(--il-blue);
+  --il-focused-button-foreground-color: var(--il-gray-1);
+}
+
+// Implementation styles
+
 :root {
+  @extend %image-feature-theme-blue-gradient;
   --il-image-feature-display: block;
-  --il-image-feature-color: white;
-  --il-image-feature-background: var(--il-gradient-blue);
   --il-image-feature-flex-grow-image: 1;
   --il-image-feature-flex-grow-content: 1;
   --il-image-feature-flex-direction: row;
@@ -11,28 +89,22 @@
 .il-formatted il-image-feature, il-image-feature, .il-formatted il-video-feature, il-video-feature {
   display: var(--il-image-feature-display);
   margin-bottom: 20px;
-  --il-link-color: var(--il-image-feature-color);
-  --il-heading-color: var(--il-image-feature-color);
-  --il-text-color: var(--il-image-feature-color);
-
-  h2,
-  h3,
-  h4,
-  h5,
-  p
-  {
+
+  h2, h3, h4, h5, p {
     max-width: 900px;
   }
 
-  > p:first {
-    margin-top: 30px;
+  p {
+    margin-top: 16px;
   }
 
+  > p:first-child {
+    margin-top: 30px;
+  }
 
-  a.il-button,
-  button {
+  a.il-button, button {
     margin-right: 30px;
-    margin-bottom: 20px;
+    margin-top: 20px;
     width: max-content;
     width: -moz-max-content;
     text-align: left;
@@ -43,33 +115,60 @@
   }
 }
 
-.il-theme-orange il-image-feature, il-image-feature.il-theme-orange, 
-.il-theme-orange il-video-feature, il-video-feature.il-theme-orange {
-  --il-image-feature-background: var(--il-gradient-orange);
-}
+il-image-feature, il-video-feature {
+
+  h1, h2, h3, h4, h5, h6 {
+    color: var(--il-image-feature-heading-color) !important;
+  }
+
+  a, a:visited {
+    color: var(--il-image-feature-link-color) !important;
+
+    &:hover, &:focus {
+      color: var(--il-image-feature-link-hover-color) !important;
+    }
+  }
 
-.il-theme-orange il-video-feature, il-video-feature.il-theme-orange {
   a.il-button {
-    --il-button-border-color: var(--il-blue);
-    --il-button-foreground-color: var(--il-blue);
-    --il-button-background-color: white;
-    --il-focused-button-background-color: var(--il-blue);
-    --il-focused-button-foreground-color: white;
+    &, &:visited {
+      border-color: var(--il-image-feature-button-border-color) !important;
+      color: var(--il-image-feature-button-color) !important;
+    }
+    &:focus, &:hover {
+      background: var(--il-image-feature-button-hover-background) !important;
+      border-color: var(--il-image-feature-button-hover-border-color) !important;
+      color: var(--il-image-feature-button-hover-color) !important;
+    }
   }
-}
 
-.il-theme-white il-image-feature, il-image-feature.il-theme-white, 
-.il-theme-white il-video-feature, il-video-feature.il-theme-white {
-  --il-image-feature-background: white;
-  --il-image-feature-color: var(--il-blue);
-}
+  // Themes
 
-.il-theme-blue il-image-feature, il-image-feature.il-theme-blue, 
-.il-theme-blue il-video-feature, il-video-feature.il-theme-blue {
-  --il-image-feature-background: var(--il-blue);
+  &.il-theme-orange, .il-theme-orange &, &[background="orange"] {
+    @extend %image-feature-theme-orange;
+  }
+
+  &.il-theme-orange-gradient, .il-theme-orange-gradient {
+    @extend %image-feature-theme-orange-gradient;
+  }
+
+  &.il-theme-blue, .il-theme-blue &, &[background="blue"] {
+    @extend %image-feature-theme-blue;
+  }
+
+  &.il-theme-blue-gradient, .il-theme-blue-gradient & {
+    @extend %image-feature-theme-blue-gradient;
+  }
+
+  &.il-theme-white, .il-theme-white &, &[background="white"] {
+    @extend %image-feature-theme-white;
+  }
+
+  &.il-theme-gray, .il-theme-gray &, &[background="gray"] {
+    @extend %image-feature-theme-gray;
+  }
 }
 
-.il-align-right il-image-feature, il-image-feature.il-align-right, 
+.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-float-left il-video-feature, il-video-feature.il-float-left {
@@ -92,22 +191,6 @@
   --il-image-feature-min-height: 10vw;
 }
 
-il-image-feature[background="white"],
-il-video-feature[background="white"] {
-  --il-image-feature-background: white; 
-
-  p, a {
-    color: var(--il-blue);
-    --il-button-border-color: var(--il-blue);
-    --il-button-foreground-color: var(--il-blue);
-    --il-focused-button-background-color: var(--il-blue);
-    --il-focused-button-foreground-color: white;
-    }
-  h2, h3, h4, h5 {
-    color: var(--il-orange);
-  }
-}
-
 il-image-feature {
   img {
     object-fit: cover;

src/css/components/_unit-wordmark.scss

@@ -18,9 +18,6 @@ il-unit-wordmark {
     line-height: 1em;
     color: var(--il-blue);
   }
-  * > {
-    display: inline !important;
-  }
   a {
     @extend .il-link;
     color: var(--il-blue) !important;