fix(tabs): border-color--hover not working when creating a custom theme (#15812)

* fix(tabs): fix border-color--hover not working when creating a custom theme

* deps(theming): bump to latest version

---------

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>

Author: desig9stein

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.1",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^17.2.0",
+    "igniteui-theming": "^18.0.1",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",

package.json

@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^17.2.0",
+        "igniteui-theming": "^18.0.1",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -187,6 +187,7 @@
         button-ripple-color: $button-ripple-color,
         border-color: $border-color,
         border-radius: $border-radius,
+        border-color--hover: $border-color--hover,
         theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme'),
@@ -409,7 +410,7 @@
             &:focus {
                 border-top: rem(1px) solid transparent;
                 border-inline: none;
-                border-bottom: rem(1px) solid var-get($theme, 'border-color');
+                border-bottom: rem(1px) solid var-get($theme, 'border-color--hover');
             }
 
             igx-icon {