Merge pull request #430 from web-illinois/develop

Merge to main - for 2.15.1
web-illinois · Mar 20, 2023 · 0374aea · 0374aea
2 parents 378303a + 112c6c8
commit 0374aea
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "il-toolkit",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "description": "Web toolkit",
   "repository": "https://github.com/web-illinois/toolkit",
   "author": "Web Implementation Guidelines Group",

diff --git a/src/css/components/_vertical-tab.scss b/src/css/components/_vertical-tab.scss
@@ -7,8 +7,11 @@
     --il-panel-link-focused-color: var(--il-orange);
     --il-selected-panel-background-color: var(--il-orange);
     --il-selected-panel-foreground-color: white;
-    --il-focused-panel-background-color: var(--il-blue-darker-1);
-    --il-focused-panel-foreground-color: white;
+    --il-focused-panel-background-color: white;
+    --il-focused-panel-foreground-color: var(--il-blue);
+    --il-focused-panel-button-background-color: white;
+    --il-focused-panel-button-foreground-color: var(--il-blue);
+    --il-focused-panel-button-border-color: white;
   }
 
   il-vertical-tab, .il-formatted il-vertical-tab {
@@ -26,6 +29,21 @@
     p, ul, a, a:visited {
         color: var(--il-panel-text-color);
     }
+
+    a.il-button, button.il-button, a.il-button:visited, button.il-button:visited {
+      background: var(--il-panel-button-background-color);
+      color: var(--il-panel-button-foreground-color);
+      border-color: var(--il-panel-button-border-color);
+
+      &:hover,
+      &:focus {
+        outline: 0;
+        background-color: var(--il-focused-panel-button-background-color);
+        color: var(--il-focused-panel-button-foreground-color);
+        border-color: var(--il-focused-panel-button-border-color);
+      }
+    }
+
     a:focus, a:hover {
         color: var(--il-panel-link-focused-color);
     }

diff --git a/src/css/themes/_blue.scss b/src/css/themes/_blue.scss
@@ -11,4 +11,11 @@
   --il-focused-button-background-color: white;
   --il-focused-button-foreground-color: var(--il-blue);
   --il-focused-button-border-color: white;
+
+  --il-panel-button-background-color: var(--il-button-background-color);
+  --il-panel-button-foreground-color: var(--il-button-foreground-color);
+  --il-panel-button-border-color: var(--il-button-border-color);
+  --il-focused-panel-button-background-color: var(--il-focused-button-background-color);
+  --il-focused-panel-button-foreground-color: var(--il-focused-button-foreground-color);
+  --il-focused-panel-button-border-color: var(--il-focused-button-border-color);
 }
diff --git a/src/css/themes/_gray.scss b/src/css/themes/_gray.scss
@@ -16,9 +16,16 @@
   --il-panel-foreground-color: var(--il-blue);
   --il-panel-text-color: var(--il-blue);
   --il-panel-title-color: var(--il-blue);
-  --il-panel-border: 2px solid var(--il-industrial-blue);
+  --il-panel-border: 2px solid var(--il-blue);
+  --il-panel-link-focused-color: var(--il-altgeld);
   --il-selected-panel-background-color: var(--il-orange);
   --il-selected-panel-foreground-color: var(--il-gray-1);
   --il-focused-panel-background-color: var(--il-blue);
   --il-focused-panel-foreground-color: white;
+  --il-panel-button-background-color: var(--il-button-background-color);
+  --il-panel-button-foreground-color: var(--il-button-foreground-color);
+  --il-panel-button-border-color: var(--il-button-border-color);
+  --il-focused-panel-button-background-color: var(--il-focused-button-background-color);
+  --il-focused-panel-button-foreground-color: var(--il-focused-button-foreground-color);
+  --il-focused-panel-button-border-color: var(--il-focused-button-border-color);
 }
diff --git a/src/css/themes/_white.scss b/src/css/themes/_white.scss
@@ -16,11 +16,17 @@
   --il-panel-foreground-color: var(--il-blue);
   --il-panel-text-color: var(--il-blue);
   --il-panel-title-color: var(--il-blue);
-  --il-panel-border: 2px solid var(--il-industrial-blue);
+  --il-panel-border: 2px solid var(--il-blue);
   --il-selected-panel-background-color: var(--il-orange);
   --il-selected-panel-foreground-color: white;
   --il-focused-panel-background-color: var(--il-blue);
   --il-focused-panel-foreground-color: white;
+  --il-panel-button-background-color: var(--il-button-background-color);
+  --il-panel-button-foreground-color: var(--il-button-foreground-color);
+  --il-panel-button-border-color: var(--il-button-border-color);
+  --il-focused-panel-button-background-color: var(--il-focused-button-background-color);
+  --il-focused-panel-button-foreground-color: var(--il-focused-button-foreground-color);
+  --il-focused-panel-button-border-color: var(--il-focused-button-border-color);
 
   --il-details-color: var(--il-blue);
   --il-details-background: white;