fix(VBottomNav): correct inactive colors (#5822)

* fix(VBottomNav): change inactive btn styles

resolves #2685

* docs: update example

packages/vuetify/src/components/VBottomNav/VBottomNav.ts

@@ -5,6 +5,7 @@ import '../../stylus/components/_bottom-navs.styl'
 import Applicationable from '../../mixins/applicationable'
 import ButtonGroup from '../../mixins/button-group'
 import Colorable from '../../mixins/colorable'
+import Themeable from '../../mixins/themeable'
 
 // Util
 import mixins from '../../util/mixins'
@@ -18,7 +19,8 @@ export default mixins(
     'height',
     'value'
   ]),
-  Colorable
+  Colorable,
+  Themeable
   /* @vue/component */
 ).extend({
   name: 'v-bottom-nav',

packages/vuetify/src/stylus/components/_bottom-navs.styl

@@ -4,6 +4,9 @@
 v-bottom-nav($material)
   background-color: $material.cards
 
+  .v-btn:not(.v-btn--active)
+    color: $material.text.secondary !important
+
 theme(v-bottom-nav, "v-bottom-nav")
 
 .v-item-group.v-bottom-nav
@@ -37,7 +40,6 @@ theme(v-bottom-nav, "v-bottom-nav")
     min-width: 80px
     padding: 8px 12px 10px
     text-transform: none
-    opacity: .5
     width: 100%
     // https://github.com/vuetifyjs/vuetify/issues/4643
     flex-shrink: 1
@@ -57,7 +59,6 @@ theme(v-bottom-nav, "v-bottom-nav")
         line-height: 1
 
     &--active
-      opacity: 1
       padding-top: 6px
 
       &:before
@@ -69,9 +70,6 @@ theme(v-bottom-nav, "v-bottom-nav")
         .v-icon
           transform: none
 
-    &:not(.v-btn--active)
-      filter: grayscale(100%)
-
   &--shift
     .v-btn__content
       font-size: 14px
@@ -90,5 +88,5 @@ theme(v-bottom-nav, "v-bottom-nav")
     .v-icon
       transform: scale(1, 1) translate(0, 8px)
 
-    span
+    > span:not(.v-badge)
       color: transparent

packages/vuetifyjs.com/src/examples/bottom-navigation/colorAndShift.vue

@@ -5,6 +5,7 @@
       :color="color"
       :value="true"
       absolute
+      dark
       shift
     >
       <v-btn dark>