fix(VRipple): use $ripple-animation-visible-opacity variable

[KareemDa]

Description

fixes #11505

• removed variables from packages/vuetify/src/directives/ripple/_variables.scss as they are already defined in packages\vuetify\src\styles\settings\_variables.scss
• removed opactiy functionality from Vripple index.ts as it overrides the opactiy in sass file
• added opacity variable, functionality into sass file

Motivation and Context

How Has This Been Tested?

Markup:

<template>
  <v-app id="inspire">
    <div v-ripple class="text-center elevation-2 pa-12 text-h5">
      HTML element with v-ripple
    </div>
  </v-app>
</template>

<script>
export default {};
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[KaelWD]

Prefer this file over the global one if the variables aren't used anywhere else.

[KareemDa]

I've thought about that. but the problem is that it won't be documented! if it's written only in ripple variable.scss.
directives are not mentioned in Sass variables page

If I keep it in global variable it'll be added to $vuetify object

[KaelWD]

Ok remove this file entirely then if it does nothing.

[KareemDa]

Done 👍