feat(VChip): add base-color prop

[J-Sek]

Description

Very quick fix, I did not dwell on it too much.

• check all relevant examples in docs

resolves #19678

Markup:

Playground

<template>
  <v-row justify="center">
    <v-col cols="12" sm="7" md="6" lg="5">
      <h5 class="mt-6 mb-3">`base-color` + `selected-class`</h5>
      <v-sheet elevation="10" rounded="xl">
        <div class="pa-4">
          <!--These chips should be red -->
          <v-chip-group column>
            <v-chip base-color="red" selected-class="text-primary" v-for="tag in 3" :key="tag">
              chip {{ tag }}
            </v-chip>
          </v-chip-group>

          <!--These chips should be red as well -->
          <v-chip-group selected-class="text-primary" column base-color="red">
            <v-chip v-for="tag in 3" :key="tag">
              chip {{ tag }}
            </v-chip>
          </v-chip-group>

          <!--without chip-group -->
          <div class="d-flex ga-2 py-2">
            <v-chip base-color="red">base color</v-chip>
            <v-chip color="red">color</v-chip>
          </div>
        </div>
      </v-sheet>

      <h5 class="mt-6 mb-3">Without `selected-class`</h5>
      <v-sheet elevation="10" rounded="xl">
        <div class="pa-4">
          <!--These chips should be red -->
          <v-chip-group colum>
            <v-chip base-color="red" color="green" v-for="tag in 4" :key="tag">
              chip {{ tag }}
            </v-chip>
          </v-chip-group>

          <!--These chips should be red as well -->
          <v-chip-group column base-color="red" color="green">
            <v-chip v-for="tag in 4" :key="tag">
              chip {{ tag }}
            </v-chip>
          </v-chip-group>
        </div>
      </v-sheet>
    </v-col>
  </v-row>
</template>

[KaelWD]

This breaks the typical case of color without active-class, now you can't tell what's selected:

It probably needs a new baseColor prop like lists and buttons have.