feat(VField): add solo-inverted variant (#16794)

packages/docs/src/examples/v-autocomplete/usage.vue

@@ -29,7 +29,7 @@
   const clear = ref(false)
   const chips = ref(false)
   const multiple = ref(false)
-  const options = ['solo', 'underlined']
+  const options = ['outlined', 'underlined', 'solo', 'solo-filled', 'solo-inverted']
   const props = computed(() => {
     return {
       clearable: clear.value || undefined,

packages/docs/src/examples/v-combobox/usage.vue

@@ -29,7 +29,7 @@
   const clear = ref(false)
   const chips = ref(false)
   const multiple = ref(false)
-  const options = ['solo', 'underlined']
+  const options = ['outlined', 'underlined', 'solo', 'solo-filled', 'solo-inverted']
   const props = computed(() => {
     return {
       clearable: clear.value || undefined,

packages/docs/src/examples/v-file-input/usage.vue

@@ -24,7 +24,7 @@
 
   const name = 'v-file-input'
   const model = ref('default')
-  const options = ['solo', 'underlined']
+  const options = ['outlined', 'underlined', 'solo', 'solo-filled', 'solo-inverted']
   const clear = ref(false)
   const counter = ref(false)
   const disabled = ref(false)

packages/docs/src/examples/v-select/usage.vue

@@ -29,7 +29,7 @@
   const clear = ref(false)
   const chips = ref(false)
   const multiple = ref(false)
-  const options = ['solo', 'underlined']
+  const options = ['outlined', 'underlined', 'solo', 'solo-filled', 'solo-inverted']
   const props = computed(() => {
     return {
       clearable: clear.value || undefined,

packages/docs/src/examples/v-text-field/usage.vue

@@ -30,13 +30,13 @@
   const field = ref()
   const label = ref('Label')
   const prepend = ref(false)
-  const options = ['outlined', 'solo', 'underlined']
+  const options = ['outlined', 'underlined', 'solo', 'solo-filled', 'solo-inverted']
   const props = computed(() => {
     return {
       clearable: clearable.value || undefined,
       label: label.value,
       'prepend-icon': prepend.value ? 'mdi-vuetify' : undefined,
-      variant: ['outlined', 'solo', 'underlined'].includes(model.value) ? model.value : undefined,
+      variant: model.value === 'default' ? undefined : model.value,
     }
   })
 

packages/docs/src/examples/v-textarea/usage.vue

@@ -30,13 +30,13 @@
   const field = ref()
   const label = ref('Label')
   const prepend = ref(false)
-  const options = ['outlined', 'solo', 'underlined']
+  const options = ['outlined', 'underlined', 'solo', 'solo-filled', 'solo-inverted']
   const props = computed(() => {
     return {
       clearable: clearable.value || undefined,
       label: label.value,
       'prepend-icon': prepend.value ? 'mdi-vuetify' : undefined,
-      variant: ['outlined', 'solo', 'underlined'].includes(model.value) ? model.value : undefined,
+      variant: model.value === 'default' ? undefined : model.value,
     }
   })
 

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

@@ -37,18 +37,31 @@
   &--appended
     padding-inline-end: $field-control-affixed-padding
 
-  &--variant-solo
+  &--variant-solo,
+  &--variant-solo-filled
     background: $field-control-solo-background
     border-color: transparent
     color: $field-control-solo-color
 
     @include tools.elevation($field-control-solo-elevation)
 
+  &--variant-solo-inverted
+    background: $field-control-solo-background
+    border-color: transparent
+    color: $field-control-solo-inverted-color
+
+    @include tools.elevation($field-control-solo-elevation)
+
+    &.v-field--focused
+      color: $field-control-solo-inverted-focused-color
+
   &--variant-filled
     border-bottom-left-radius: 0
     border-bottom-right-radius: 0
 
   &--variant-solo,
+  &--variant-solo-inverted,
+  &--variant-solo-filled,
   &--variant-filled
     $root: &
 
@@ -86,6 +99,12 @@
         @at-root #{selector.nest(&, $root)}
           --v-input-control-height: #{$field-control-underlined-height + $modifier}
 
+  &--flat
+    box-shadow: none
+
+  &--rounded
+    @include tools.rounded($field-rounded-border-radius)
+
   // These are separate so they can override the default variant styles
   &.v-field
     &--prepended
@@ -224,7 +243,9 @@
       visibility: visible
 
     .v-field--variant-solo &,
-    .v-field--variant-filled &
+    .v-field--variant-solo-inverted &,
+    .v-field--variant-filled &,
+    .v-field--variant-solo-filled &
       $root: &
 
       @at-root
@@ -362,14 +383,17 @@
 
 /* endregion */
 /* region OVERLAY */
+.v-field__overlay
+  border-radius: inherit
+  pointer-events: none
+
+  @include tools.absolute()
+
 .v-field--variant-filled
   .v-field__overlay
     background-color: currentColor
-    border-radius: inherit
     opacity: $field-overlay-filled-opacity
-    pointer-events: none
     transition: opacity $field-subtle-transition-timing
-    @include tools.absolute()
 
   &.v-field--has-background .v-field__overlay
     opacity: 0
@@ -381,6 +405,34 @@
   &.v-field--focused .v-field__overlay
     opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier))
 
+.v-field--variant-solo-filled
+  .v-field__overlay
+    background-color: currentColor
+    opacity: $field-overlay-filled-opacity
+    transition: opacity $field-subtle-transition-timing
+
+  @media (hover: hover)
+    &:hover .v-field__overlay
+      opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier))
+
+  &.v-field--focused .v-field__overlay
+    opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier))
+
+.v-field--variant-solo-inverted
+  .v-field__overlay
+    transition: opacity $field-subtle-transition-timing
+
+  &.v-field--has-background .v-field__overlay
+    opacity: 0
+
+  @media (hover: hover)
+    &:hover .v-field__overlay
+      opacity: calc((#{.04} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier))
+
+  &.v-field--focused .v-field__overlay
+    background-color: $field-overlay-focused-background-color
+    opacity: 1
+
 /* endregion */
 /* region MODIFIERS */
 .v-field--reverse

packages/vuetify/src/components/VField/VField.tsx

@@ -10,6 +10,7 @@ import { VFieldLabel } from './VFieldLabel'
 import { IconValue } from '@/composables/icons'
 import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'
 import { makeFocusProps, useFocus } from '@/composables/focus'
+import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { useBackgroundColor, useTextColor } from '@/composables/color'
 
@@ -35,7 +36,7 @@ import type { MakeSlots, SlotsToProps } from '@/util'
 import type { PropType, Ref } from 'vue'
 import type { VInputSlot } from '@/components/VInput/VInput'
 
-const allowedVariants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const
+const allowedVariants = ['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain'] as const
 type Variant = typeof allowedVariants[number]
 
 export interface DefaultInputSlot {
@@ -63,6 +64,7 @@ export const makeVFieldProps = propsFactory({
   dirty: Boolean,
   disabled: Boolean,
   error: Boolean,
+  flat: Boolean,
   label: String,
   persistentClear: Boolean,
   prependInnerIcon: IconValue,
@@ -80,6 +82,7 @@ export const makeVFieldProps = propsFactory({
 
   ...makeThemeProps(),
   ...makeLoaderProps(),
+  ...makeRoundedProps(),
 }, 'v-field')
 
 export type VFieldSlots = MakeSlots<{
@@ -118,6 +121,7 @@ export const VField = genericComponent<new <T>() => {
     const { loaderClasses } = useLoader(props)
     const { focusClasses, isFocused, focus, blur } = useFocus(props)
     const { InputIcon } = useInputIcon(props)
+    const { roundedClasses } = useRounded(props)
 
     const isActive = computed(() => props.dirty || props.active)
     const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label))
@@ -218,6 +222,7 @@ export const VField = genericComponent<new <T>() => {
               'v-field--disabled': props.disabled,
               'v-field--dirty': props.dirty,
               'v-field--error': props.error,
+              'v-field--flat': props.flat,
               'v-field--has-background': !!props.bgColor,
               'v-field--persistent-clear': props.persistentClear,
               'v-field--prepended': hasPrepend,
@@ -230,6 +235,7 @@ export const VField = genericComponent<new <T>() => {
             backgroundColorClasses.value,
             focusClasses.value,
             loaderClasses.value,
+            roundedClasses.value,
           ]}
           style={[
             backgroundColorStyles.value,
@@ -258,7 +264,7 @@ export const VField = genericComponent<new <T>() => {
           )}
 
           <div class="v-field__field" data-no-activator="">
-            {['solo', 'filled'].includes(props.variant) && hasLabel.value && (
+            {['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasLabel.value && (
               <VFieldLabel
                 key="floating-label"
                 ref={ floatingLabelRef }

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

@@ -2,6 +2,7 @@
 
 // INPUT
 $field-border-radius: settings.$border-radius-root !default;
+$field-rounded-border-radius: map-get(settings.$rounded, 'pill') !default;
 $field-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $field-disabled-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default;
 $field-error-color: rgb(var(--v-theme-error)) !default;
@@ -18,6 +19,8 @@ $field-clearable-transition: .15s opacity, .15s width settings.$standard-easing
 $field-control-solo-background: rgb(var(--v-theme-surface)) !default;
 $field-control-solo-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $field-control-solo-elevation: 2 !default;
+$field-control-solo-inverted-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
+$field-control-solo-inverted-focused-color: rgb(var(--v-theme-on-surface-variant)) !default;
 $field-control-filled-background: rgba(var(--v-theme-on-surface), var(--v-idle-opacity)) !default;
 $field-control-padding-start: 16px !default;
 $field-control-padding-end: 16px !default;
@@ -43,3 +46,4 @@ $field-focused-border-width: 2px !default;
 
 // OVERLAY
 $field-overlay-filled-opacity: 0.04 !default;
+$field-overlay-focused-background-color: rgb(var(--v-theme-surface-variant)) !default;