feat(opacity): add new utility classes

packages/docs/src/data/nav.json

@@ -68,6 +68,7 @@
       "elevation",
       "flex",
       "float",
+      "opacity",
       "overflow",
       "position",
       "sizing",

packages/docs/src/examples/opacity/misc-hover.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-container>
+    <v-hover>
+      <template v-slot:default="{ props: hoverProps, isHovering }">
+        <v-card
+          v-bind="hoverProps"
+          :class="[
+            'mx-auto',
+            isHovering ? 'opacity-100' : 'opacity-50'
+          ]"
+          color="secondary"
+          height="128"
+          width="256"
+          flat
+        ></v-card>
+      </template>
+    </v-hover>
+  </v-container>
+</template>

packages/docs/src/examples/opacity/misc-opacity.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-primary opacity-100" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">opacity-100</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-primary opacity-80" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">opacity-80</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-primary opacity-60" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">opacity-60</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-primary opacity-40" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">opacity-40</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-primary opacity-20" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">opacity-20</div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

packages/docs/src/pages/en/styles/opacity.md

@@ -0,0 +1,95 @@
+---
+emphasized: true
+meta:
+  title: Opacity
+  description: Use opacity utilities to quickly style the opacity of any element.
+  keywords: opacity classes, opacity utilities, vuetify opacity helper classes
+related:
+  - /styles/opacity-radius/
+  - /styles/display/
+  - /styles/content/
+features:
+  report: true
+---
+
+# Opacity
+
+Utilities for controlling the opacity of elements in your application.
+
+<PageFeatures />
+
+::: success
+
+This feature was introduced in [v3.6.0 (Nebula)](/getting-started/release-notes/?version=v3.6.0)
+
+:::
+
+| Class | Properties |
+| - | - |
+| **opacity-0** | opacity: 0; |
+| **opacity-10** | opacity: .1; |
+| **opacity-20** | opacity: .2; |
+| **opacity-30** | opacity: .3; |
+| **opacity-40** | opacity: .4; |
+| **opacity-50** | opacity: .5; |
+| **opacity-60** | opacity: .6; |
+| **opacity-70** | opacity: .7; |
+| **opacity-80** | opacity: .8; |
+| **opacity-90** | opacity: .9; |
+| **opacity-100** | opacity: 1; |
+| **opacity-hover** | opacity: var(--v-hover-opacity); |
+| **opacity-focus** | opacity: var(--v-focus-opacity); |
+| **opacity-selected** | opacity: var(--v-selected-opacity); |
+| **opacity-activated** | opacity: var(--v-activated-opacity); |
+| **opacity-pressed** | opacity: var(--v-pressed-opacity); |
+| **opacity-dragged** | opacity: var(--v-dragged-opacity); { style="max-height: 420px;" fixed-header } |
+
+<PromotedEntry />
+
+## Usage
+
+The `opacity` utilities allow you to quickly change the opacity of any element.
+
+<ExamplesExample file="opacity/misc-opacity" />
+
+### Hover
+
+Using the [v-hover](/components/hover/) component, conditionally apply an opacity class when the element is hovered over.
+
+<ExamplesExample file="opacity/misc-hover" />
+
+## SASS variables
+
+You can also use the following SASS variables to customize the opacity color and width:
+
+```sass { resource="src/styles/settings.scss" }
+@use 'vuetify/settings' with (
+  $opacities: (
+    hover: var(--v-hover-opacity),
+    focus: var(--v-focus-opacity),
+    selected: var(--v-selected-opacity),
+    activated: var(--v-activated-opacity),
+    pressed: var(--v-pressed-opacity),
+    dragged: var(--v-dragged-opacity),
+    0: 0,
+    10: .1,
+    20: .2,
+    30: .3,
+    40: .4,
+    50: .5,
+    60: .6,
+    70: .7,
+    80: .8,
+    90: .9,
+    100: 1
+  )
+);
+```
+
+Disable opacity class generation by setting the $opacities variable to **false**.
+
+```sass { resource="src/styles/settings.scss" }
+@use 'vuetify/settings' with (
+  $opacities: false
+);
+```

packages/vuetify/src/styles/settings/_utilities.scss

@@ -472,6 +472,11 @@ $utilities: () !default;
         class: text,
         values: (break: break-word)
       ),
+      "opacity": (
+        property: opacity,
+        class: opacity,
+        values: variables.$opacities
+      ),
       "text-opacity": (
         property: color,
         class: text,

packages/vuetify/src/styles/settings/_variables.scss

@@ -47,6 +47,30 @@ $border-opacities: map-deep-merge(
   $border-opacities
 );
 
+$opacities: () !default;
+$opacities: map-deep-merge(
+  (
+    hover: var(--v-hover-opacity),
+    focus: var(--v-focus-opacity),
+    selected: var(--v-selected-opacity),
+    activated: var(--v-activated-opacity),
+    pressed: var(--v-pressed-opacity),
+    dragged: var(--v-dragged-opacity),
+    0: 0,
+    10: .1,
+    20: .2,
+    30: .3,
+    40: .4,
+    50: .5,
+    60: .6,
+    70: .7,
+    80: .8,
+    90: .9,
+    100: 1
+  ),
+  $opacities
+);
+
 $states: () !default;
 $states: map-deep-merge(
     (