feat(VCardText/Subtitle): add opacity support

packages/api-generator/src/locale/en/generic.json

@@ -37,6 +37,7 @@
     "modelValue": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
     "name": "Sets the component's name attribute.",
     "noDataText": "Text shown when no items are provided to the component.",
+    "opacity": "Sets the component's opacity value",
     "origin": "Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).",
     "persistent": "Clicking outside or pressing **esc** key will not dismiss the dialog.",
     "persistentCounter": "Forces counter to always be visible.",

packages/vuetify/src/components/VCard/VCard.sass

@@ -155,6 +155,7 @@
   font-size: $card-text-font-size
   font-weight: $card-text-font-weight
   letter-spacing: $card-text-letter-spacing
+  opacity: $card-text-opacity
   padding: $card-text-padding
   text-transform: $card-text-text-transform
 

packages/vuetify/src/components/VCard/VCardSubtitle.tsx

@@ -0,0 +1,39 @@
+// Composables
+import { makeComponentProps } from '@/composables/component'
+import { makeTagProps } from '@/composables/tag'
+
+// Utilities
+import { genericComponent, propsFactory, useRender } from '@/util'
+
+export const makeVCardSubtitleProps = propsFactory({
+  opacity: [Number, String],
+
+  ...makeComponentProps(),
+  ...makeTagProps(),
+}, 'VCardSubtitle')
+
+export const VCardSubtitle = genericComponent()({
+  name: 'VCardSubtitle',
+
+  props: makeVCardSubtitleProps(),
+
+  setup (props, { slots }) {
+    useRender(() => (
+      <props.tag
+        class={[
+          'v-card-subtitle',
+          props.class,
+        ]}
+        style={[
+          { '--v-card-subtitle-opacity': props.opacity },
+          props.style,
+        ]}
+        v-slots={ slots }
+      />
+    ))
+
+    return {}
+  },
+})
+
+export type VCardSubtitle = InstanceType<typeof VCardSubtitle>

packages/vuetify/src/components/VCard/VCardText.tsx

@@ -0,0 +1,39 @@
+// Composables
+import { makeComponentProps } from '@/composables/component'
+import { makeTagProps } from '@/composables/tag'
+
+// Utilities
+import { genericComponent, propsFactory, useRender } from '@/util'
+
+export const makeVCardTextProps = propsFactory({
+  opacity: [Number, String],
+
+  ...makeComponentProps(),
+  ...makeTagProps(),
+}, 'VCardText')
+
+export const VCardText = genericComponent()({
+  name: 'VCardText',
+
+  props: makeVCardTextProps(),
+
+  setup (props, { slots }) {
+    useRender(() => (
+      <props.tag
+        class={[
+          'v-card-text',
+          props.class,
+        ]}
+        style={[
+          { '--v-card-text-opacity': props.opacity },
+          props.style,
+        ]}
+        v-slots={ slots }
+      />
+    ))
+
+    return {}
+  },
+})
+
+export type VCardText = InstanceType<typeof VCardText>

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

@@ -63,7 +63,7 @@ $card-subtitle-font-weight: tools.map-deep-get(settings.$typography, 'body-2', '
 $card-subtitle-header-padding: 0 0 .25rem !default;
 $card-subtitle-letter-spacing: tools.map-deep-get(settings.$typography, 'body-2', 'letter-spacing') !default;
 $card-subtitle-line-height: tools.map-deep-get(settings.$typography, 'body-2', 'line-height') !default;
-$card-subtitle-opacity: var(--v-medium-emphasis-opacity) !default;
+$card-subtitle-opacity: var(--v-card-subtitle-opacity, var(--v-medium-emphasis-opacity)) !default;
 $card-subtitle-overflow: hidden !default;
 $card-subtitle-padding: 0 1rem !default;
 $card-subtitle-text-overflow: ellipsis !default;
@@ -76,6 +76,7 @@ $card-text-compact-line-height: 1.15rem !default;
 $card-text-flex: 1 1 auto !default;
 $card-text-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default;
 $card-text-font-weight: tools.map-deep-get(settings.$typography, 'body-2', 'weight') !default;
+$card-text-opacity: var(--v-card-text-opacity, 1) !default;
 $card-text-letter-spacing: tools.map-deep-get(settings.$typography, 'body-2', 'letter-spacing') !default;
 $card-text-line-height: tools.map-deep-get(settings.$typography, 'body-2', 'line-height') !default;
 $card-text-padding: 1rem !default;