fix(colors): remove local defined colors, re-implement sass

there are 3 ways that background/text colors are derived:
* variant support (v-card, v-alert, etc)
* form control variants (uses a different variant system)
* paper components (v-sheet, v-toolbar, etc)

packages/vuetify/src/components/VAlert/VAlert.tsx

@@ -74,10 +74,7 @@ export const VAlert = defineComponent({
     ...makeRoundedProps(),
     ...makeTagProps(),
     ...makeThemeProps(),
-    ...makeVariantProps({
-      color: 'surface-variant',
-      variant: 'contained-flat',
-    } as const),
+    ...makeVariantProps({ variant: 'contained-flat' } as const),
   },
 
   emits: {

packages/vuetify/src/components/VBadge/VBadge.sass

@@ -23,6 +23,8 @@
   transition: $badge-transition
   white-space: nowrap
 
+  @include tools.theme($badge-theme...)
+
   .v-badge--bordered &
     &::after
       border-radius: inherit
@@ -44,8 +46,6 @@
     padding: 0
     width: $badge-dot-width
 
-    @include tools.theme($badge-theme...)
-
     &::after
       border-width: $badge-dot-border-width
 

packages/vuetify/src/components/VBadge/VBadge.tsx

@@ -24,10 +24,7 @@ export const VBadge = defineComponent({
 
   props: {
     bordered: Boolean,
-    color: {
-      type: String,
-      default: 'surface-variant',
-    },
+    color: String,
     content: String,
     dot: Boolean,
     floating: Boolean,

packages/vuetify/src/components/VBadge/__tests__/__snapshots__/VBadge.spec.tsx.snap

@@ -7,7 +7,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { content: '10', m
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -29,7 +29,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { content: '10', m
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -51,7 +51,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { content: 'foo',
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -73,7 +73,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { dot: true } prop
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -92,7 +92,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { dot: true, float
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -111,7 +111,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { floating: true }
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -133,7 +133,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { floating: true }
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -155,7 +155,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { icon: 'foo' } pr
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -177,7 +177,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { inline: true } p
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -199,7 +199,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { location: 'botto
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -221,7 +221,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { location: null }
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -243,7 +243,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { location: undefi
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -265,7 +265,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { modelValue: fals
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -288,7 +288,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { modelValue: true
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -307,7 +307,7 @@ exports[`VBadge.tsx should match snapshot without badge slot and { content: 'foo
 <div class="v-badge">
   <div class="v-badge__wrapper">
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -326,7 +326,7 @@ exports[`VBadge.tsx should match snapshot without badge slot and { content: 'foo
 <div class="v-badge">
   <div class="v-badge__wrapper">
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -346,7 +346,7 @@ exports[`VBadge.tsx should match snapshot without badge slot and { icon: 'foo' }
 <div class="v-badge">
   <div class="v-badge__wrapper">
     <transition-stub>
-      <span class="v-badge__badge bg-surface-variant v-theme--light"
+      <span class="v-badge__badge v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"

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

@@ -1,13 +1,14 @@
 @use '../../styles/settings';
 
 // Defaults
+
+$badge-background: rgb(var(--v-theme-surface-variant)) !default;
+$badge-color: rgba(var(--v-theme-on-surface-variant), var(--v-high-emphasis-opacity)) !default;
 $badge-border-color: rgb(var(--v-theme-background)) !default;
 $badge-border-radius: 10px !default;
 $badge-border-style: solid !default;
 $badge-border-transform: scale(1.20) !default;
 $badge-border-width: 2px !default;
-$badge-background: rgb(var(--v-theme-surface)) !default;
-$badge-color: rgb(var(--v-theme-on-surface)) !default;
 $badge-content-padding: 0 2px !default;
 $badge-dot-border-radius: 4.5px;
 $badge-dot-border-width: 1.5px !default;

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

@@ -62,10 +62,7 @@ export const VCard = defineComponent({
     ...makeRoundedProps(),
     ...makeRouterProps(),
     ...makeTagProps(),
-    ...makeVariantProps({
-      color: 'surface',
-      variant: 'contained',
-    } as const),
+    ...makeVariantProps({ variant: 'contained' } as const),
   },
 
   setup (props, { attrs, slots }) {

packages/vuetify/src/components/VCard/__tests__/__snapshots__/VCard.spec.ts.snap

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VCard should match a snapshot 1`] = `
-<div class="v-card v-theme--light bg-surface v-card--density-default v-card--variant-contained">
+<div class="v-card v-theme--light v-card--density-default v-card--variant-contained">
   <div class="v-card__underlay">
   </div>
 </div>
 `;
 
 exports[`VCard should render slots and match a snapshot 1`] = `
-<div class="v-card v-theme--light bg-surface v-card--density-default v-card--variant-contained">
+<div class="v-card v-theme--light v-card--density-default v-card--variant-contained">
   <div class="v-card__underlay">
   </div>
   <div class="v-card-img">

packages/vuetify/src/components/VField/VField.sass

@@ -45,6 +45,7 @@
   &--variant-contained
     background: $field-control-contained-background
     border-color: transparent
+    color: $field-control-contained-color
 
     @include tools.elevation($field-control-contained-elevation)
 

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

@@ -16,6 +16,7 @@ $field-clearable-transition: .15s opacity, .15s width settings.$standard-easing
 
 // CONTROL
 $field-control-contained-background: rgb(var(--v-theme-surface)) !default;
+$field-control-contained-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !default;
 $field-control-contained-elevation: 2 !default;
 $field-control-filled-background: rgba(var(--v-theme-on-surface), var(--v-idle-opacity)) !default;
 $field-control-padding-start: 16px !default;

packages/vuetify/src/components/VSheet/VSheet.tsx

@@ -19,10 +19,7 @@ export const VSheet = defineComponent({
   name: 'VSheet',
 
   props: {
-    color: {
-      type: String,
-      default: 'surface',
-    },
+    color: String,
 
     ...makeBorderProps(),
     ...makeDimensionProps(),

packages/vuetify/src/components/VSheet/__tests__/__snapshots__/VSheet.spec.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VSheet should match a snapshot 1`] = `
-<div class="v-sheet v-theme--light bg-surface">
+<div class="v-sheet v-theme--light">
 </div>
 `;

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

@@ -2,7 +2,7 @@
 
 // Defaults
 $sheet-background: rgb(var(--v-theme-surface)) !default;
-$sheet-color: rgb(var(--v-theme-on-surface)) !default;
+$sheet-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !default;
 $sheet-border-color: settings.$border-color-root !default;
 $sheet-border-radius: 0 !default;
 $sheet-border-style: settings.$border-style-root !default;

packages/vuetify/src/components/VToolbar/VToolbar.sass

@@ -18,6 +18,7 @@
 
   @include tools.elevation($toolbar-elevation)
   @include tools.rounded($toolbar-border-radius)
+  @include tools.theme($toolbar-theme...)
 
   @at-root
     @include tools.density('v-toolbar', $toolbar-density) using ($modifier)

packages/vuetify/src/components/VToolbar/VToolbar.tsx

@@ -31,10 +31,7 @@ const allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'
 export const makeVToolbarProps = propsFactory({
   absolute: Boolean,
   collapse: Boolean,
-  color: {
-    type: String,
-    default: 'surface',
-  },
+  color: String,
   density: {
     type: String as PropType<Density>,
     default: 'default',

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

@@ -2,6 +2,8 @@
 @use "../../styles/settings/variables";
 @use "../../styles/tools/functions";
 
+$toolbar-background: rgb(var(--v-theme-surface)) !default;
+$toolbar-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !default;
 $toolbar-border-radius: 0 !default;
 $toolbar-btn-icon-size: 48px !default;
 $toolbar-collapsed-border-radius: 24px !default;
@@ -47,3 +49,8 @@ $toolbar-prominent-title-typography: (
   $toolbar-prominent-title-line-height,
   $toolbar-prominent-title-text-transform
 );
+
+$toolbar-theme: (
+  $toolbar-background,
+  $toolbar-color
+) !default;

packages/vuetify/src/styles/generic/_colors.scss

@@ -14,7 +14,7 @@
 @mixin background-text-color($color_name, $color_type) {
   $map_value: map-deep-get(colors.$text-on-colors, $color_name, $color_type);
 
-  color: $map_value;
+  color: $map_value !important;
 }
 
 @if (settings.$color-pack) {

packages/vuetify/src/styles/tools/_variant.sass

@@ -23,6 +23,7 @@
   &--variant-contained,
   &--variant-contained-flat
     background: $contained-background
+    color: $contained-color
 
   @if ($contained-elevation > 0)
     &--variant-contained