fix(VCounter): inherit color (aligns with VMessages) (#22424)

Author: J-Sek

packages/docs/src/pages/en/getting-started/upgrade-guide.md

@@ -156,6 +156,17 @@ The **$field-clearable-margin** SASS variable has been removed and replaced with
 +   $field-gap: 8px,
 ```
 
+### VCounter (hint under VTextField, VTextarea and VFieldInput)
+
+The **$counter-color** and `color` was replaced in favor of opacity. If you modified this value, move it to target CSS class directly:
+
+```diff { resource="styles/styles.scss"}
+.v-counter {
+  opacity: 1;
+  color: /* your $counter-color */;
+}
+```
+
 ### VSelect/VCombobox/VAutocomplete
 
 #### `item` in slots has been renamed to `internalItem`

packages/vuetify/src/components/VCounter/VCounter.sass

@@ -4,7 +4,7 @@
 
 @include tools.layer('components')
   .v-counter
-    color: $counter-color
+    opacity: var(--v-medium-emphasis-opacity)
     flex: $counter-flex
     font-size: $counter-font-size
     transition-duration: $counter-transition-duration

packages/vuetify/src/components/VCounter/_variables.scss

@@ -1,5 +1,4 @@
 // VCounter
-$counter-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $counter-flex: 0 1 auto !default;
 $counter-font-size: 12px !default;
 $counter-line-height: $counter-font-size !default;