feat(User): add color prop forwarded to inner Avatar

docs/content/docs/2.components/user.md

@@ -124,6 +124,44 @@ ignore:
 
 ::
 
+### Color :badge{label="Soon" class="align-text-top"}
+
+Use the `color` prop to tint the inner [Avatar](/docs/components/avatar/). An explicit `avatar.color` overrides this default.
+
+::component-code
+---
+prettier: true
+ignore:
+  - name
+  - description
+  - avatar.src
+items:
+  color:
+    - air-primary
+    - air-primary-success
+    - air-primary-alert
+    - air-primary-copilot
+    - air-primary-warning
+    - air-primary-no-accent
+    - air-secondary
+    - air-secondary-alert
+    - air-secondary-accent
+    - air-secondary-accent-1
+    - air-secondary-accent-2
+    - air-secondary-no-accent
+    - air-tertiary
+    - air-tertiary-accent
+    - air-tertiary-no-accent
+    - air-selection
+    - air-boost
+props:
+  name: 'John Doe'
+  description: 'Software Engineer'
+  avatar.src: '/b24ui/avatar/employee.png'
+  color: 'air-primary-alert'
+---
+::
+
 ### Size
 
 Use the `size` prop to change the size of the user avatar and text.

playgrounds/demo/app/pages/components/user.vue

@@ -1,14 +1,34 @@
 <script lang="ts" setup>
+import avatarTheme from '#build/b24ui/avatar'
+
+const colors = Object.keys(avatarTheme.variants.color)
+
+const attrs = reactive({
+  color: [avatarTheme.defaultVariants.color]
+})
 </script>
 
 <template>
   <PlaygroundPage>
-    <B24User
-      name="User name"
-      description="User description"
-      :avatar="{ src: 'https://github.com/bitrix24.png' }"
-      to="https://github.com/bitrix24"
-      target="_blank"
-    />
+    <template #controls>
+      <B24Select
+        v-model="attrs.color"
+        class="w-44"
+        :items="colors"
+        placeholder="Color"
+        multiple
+        size="xs"
+      />
+    </template>
+    <Matrix v-slot="props" :attrs="attrs" class="flex-col">
+      <B24User
+        name="User name"
+        description="User description"
+        :avatar="{ src: 'https://github.com/bitrix24.png' }"
+        to="https://github.com/bitrix24"
+        target="_blank"
+        v-bind="props"
+      />
+    </Matrix>
   </PlaygroundPage>
 </template>

playgrounds/nuxt/app/pages/components/user.vue

@@ -1,14 +1,34 @@
 <script lang="ts" setup>
+import avatarTheme from '#build/b24ui/avatar'
+
+const colors = Object.keys(avatarTheme.variants.color)
+
+const attrs = reactive({
+  color: [avatarTheme.defaultVariants.color]
+})
 </script>
 
 <template>
   <PlaygroundPage>
-    <B24User
-      name="User name"
-      description="User description"
-      :avatar="{ src: 'https://github.com/bitrix24.png' }"
-      to="https://github.com/bitrix24"
-      target="_blank"
-    />
+    <template #controls>
+      <B24Select
+        v-model="attrs.color"
+        class="w-44"
+        :items="colors"
+        placeholder="Color"
+        multiple
+        size="xs"
+      />
+    </template>
+    <Matrix v-slot="props" :attrs="attrs" class="flex-col">
+      <B24User
+        name="User name"
+        description="User description"
+        :avatar="{ src: 'https://github.com/bitrix24.png' }"
+        to="https://github.com/bitrix24"
+        target="_blank"
+        v-bind="props"
+      />
+    </Matrix>
   </PlaygroundPage>
 </template>

src/runtime/components/User.vue

@@ -16,6 +16,10 @@ export interface UserProps {
   name?: string
   description?: string
   avatar?: Omit<AvatarProps, 'size'> & { [key: string]: any }
+  /**
+   * Default `color` for the inner `B24Avatar`. Overridden by `avatar.color` when set.
+   */
+  color?: AvatarProps['color']
   chip?: boolean | Omit<ChipProps, 'size' | 'inset'>
   /**
    * @defaultValue 'md'
@@ -89,11 +93,19 @@ const chipSize = computed<ChipProps['size']>(() => {
   <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })" @click="props.onClick">
     <slot name="avatar" :b24ui="b24ui">
       <B24Chip v-if="props.chip && props.avatar && !['3xs'].includes(props.size || '')" inset v-bind="typeof props.chip === 'object' ? props.chip : {}" :size="chipSize">
-        <B24Avatar :alt="props.name" v-bind="props.avatar" :size="props.size" data-slot="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+        <B24Avatar
+          :alt="props.name"
+          :color="props.color"
+          v-bind="props.avatar"
+          :size="props.size"
+          data-slot="avatar"
+          :class="b24ui.avatar({ class: props.b24ui?.avatar })"
+        />
       </B24Chip>
       <B24Avatar
         v-else-if="props.avatar"
         :alt="props.name"
+        :color="props.color"
         v-bind="props.avatar"
         :size="props.size"
         data-slot="avatar"

test/components/User.spec.ts

@@ -22,6 +22,7 @@ describe('User', () => {
     ['with to', { props: { ...props, to: 'https://github.com/bitrix24' } }],
     ['with avatar', { props }],
     ['with chip', { props: { ...props, chip: { color: 'air-primary-success' } } }],
+    ['with color', { props: { ...props, color: 'air-primary' } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
     ...orientations.map((orientation: string) => [`with orientation ${orientation}`, { props: { ...props, orientation } }]),
     ['with as', { props: { ...props, as: 'section' } }],

test/components/__snapshots__/User-vue.spec.ts.snap

@@ -62,6 +62,16 @@ exports[`User > renders with class correctly 1`] = `
 </div>"
 `;
 
+exports[`User > renders with color correctly 1`] = `
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) shrink-0"><img src="https://github.com/bitrix24.png" alt="User alt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
+    <!--v-if-->
+    <p data-slot="name" class="font-(--ui-font-weight-medium) text-label text-(length:--ui-font-size-sm)">User name</p>
+    <p data-slot="description" class="text-description text-(length:--ui-font-size-xs)">User description</p>
+  </div>
+</div>"
+`;
+
 exports[`User > renders with default slot correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-outline-no-accent size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) shrink-0"><img src="https://github.com/bitrix24.png" alt="User alt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
   <div data-slot="wrapper" class="">

test/components/__snapshots__/User.spec.ts.snap

@@ -62,6 +62,16 @@ exports[`User > renders with class correctly 1`] = `
 </div>"
 `;
 
+exports[`User > renders with color correctly 1`] = `
+"<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) shrink-0"><img src="https://github.com/bitrix24.png" alt="User alt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="">
+    <!--v-if-->
+    <p data-slot="name" class="font-(--ui-font-weight-medium) text-label text-(length:--ui-font-size-sm)">User name</p>
+    <p data-slot="description" class="text-description text-(length:--ui-font-size-xs)">User description</p>
+  </div>
+</div>"
+`;
+
 exports[`User > renders with default slot correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-outline-no-accent size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) shrink-0"><img src="https://github.com/bitrix24.png" alt="User alt" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
   <div data-slot="wrapper" class="">