Skip to content

Ai avatar #1959

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HerrTopi merged 2 commits into from
May 15, 2025
Merged

Ai avatar #1959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
58d311c
feat(ui-themes,shared-types): add new primitive and contrast colors
HerrTopi Apr 28, 2025
bb93031
feat(ui-avatar,shared-types): add new ai color variant
HerrTopi May 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions packages/shared-types/src/Colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,28 @@ type Primitives = {
red57: string
red70: string
red82: string

sea12: string
sea30: string
sea45: string
sea70: string
sea110: string
sea35: string
sea40: string
sea50: string
sea57: string
sea90: string

violet12: string
violet30: string
violet45: string
violet70: string
violet110: string
violet35: string
violet40: string
violet50: string
violet57: string
violet90: string
}

type AdditionalPrimitives = {
Expand Down Expand Up @@ -219,6 +241,12 @@ type Contrasts = {
red1212: Primitives['red12']
red4570: Primitives['red45'] | Primitives['red70']
red5782: Primitives['red57'] | Primitives['red82']

violet1212: Primitives['violet12']
violet4570: Primitives['violet45'] | Primitives['violet70']
violet5790: Primitives['violet57'] | Primitives['violet90']
sea4570: Primitives['sea45'] | Primitives['sea70']
sea5790: Primitives['sea57'] | Primitives['sea90']
}

type UI = {
Expand Down
22 changes: 13 additions & 9 deletions packages/shared-types/src/ComponentThemeVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,21 +66,25 @@ export type AlertTheme = {
}

export type AvatarTheme = {
background: Colors['contrasts']['white1010']
background: string
borderWidthSmall: Border['widthSmall']
borderWidthMedium: Border['widthMedium']
borderColor: Colors['contrasts']['grey1214']
borderColor: string
boxShadowColor: string
boxShadowBlur: string
fontFamily: Typography['fontFamily']
fontWeight: Typography['fontWeightBold']
color: Colors['contrasts']['blue4570']
colorShamrock: Colors['contrasts']['green4570']
colorBarney: Colors['contrasts']['blue4570']
colorCrimson: Colors['contrasts']['orange4570']
colorFire: Colors['contrasts']['red4570']
colorLicorice: Colors['contrasts']['grey125125']
colorAsh: Colors['contrasts']['grey4570']
color: string
colorShamrock: string
colorBarney: string
colorCrimson: string
colorFire: string
colorLicorice: string
colorAsh: string

aiTopGradientColor: string
aiBottomGradientColor: string
aiFontColor: string
}

export type BadgeTheme = {
Expand Down
124 changes: 72 additions & 52 deletions packages/ui-avatar/src/Avatar/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,35 @@ type: example
readonly: true
---
<div>
<Avatar name="Sarah Robinson" src={avatarSquare} margin="0 small 0 0" />
<Avatar name="Sarah Robinson" margin="0 small 0 0" />
<Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 small 0 0" />
<Avatar name="Kyle Montgomery" src={avatarSquare} shape="rectangle" margin="0 small 0 0" />
<Avatar name="Kyle Montgomery" shape="rectangle" margin="0 small 0 0" />
<Avatar name="Sarah Robinson" src={avatarSquare} margin="0 space8 0 0" />
<Avatar name="Sarah Robinson" margin="0 space8 0 0" />
<Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 space8 0 0" />
<Avatar name="Kyle Montgomery" src={avatarSquare} shape="rectangle" margin="0 space8 0 0" />
<Avatar name="Kyle Montgomery" shape="rectangle" margin="0 space8 0 0" />
<Avatar name="Kyle Montgomery" renderIcon={<IconGroupLine />} shape="rectangle" />
</div>
```

### AI Avatar

There is a need for special, `ai avatars`. These have a specific look. You can achieve it the following way

```js
---
type: example
readonly: true
---
<View display="block" padding="small medium" background="primary">
<Avatar size="xx-small" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
<Avatar size="x-small" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
<Avatar size="small" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
<Avatar size="medium" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
<Avatar size="large" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
<Avatar size="x-large" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
<Avatar size="xx-large" color="ai" renderIcon={IconAiSolid} />
</View>
```

### Size

The `size` prop allows you to select from `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, and `xx-large`. If the `auto` prop is set, the avatar size will adjust according to the font-size
Expand All @@ -34,30 +54,30 @@ type: example
---
<div>
<View display="block" padding="small medium">
<Avatar name="Arthur C. Clarke" size="xx-small" margin="0 small 0 0" />
<Avatar name="James Arias" size="x-small" margin="0 small 0 0" />
<Avatar name="Charles Kimball" size="small" margin="0 small 0 0" />
<Avatar name="Melissa Reed" size="medium" margin="0 small 0 0" />
<Avatar name="Heather Wheeler" size="large" margin="0 small 0 0" />
<Avatar name="David Herbert" size="x-large" margin="0 small 0 0" />
<Avatar name="Arthur C. Clarke" size="xx-small" margin="0 space8 0 0" />
<Avatar name="James Arias" size="x-small" margin="0 space8 0 0" />
<Avatar name="Charles Kimball" size="small" margin="0 space8 0 0" />
<Avatar name="Melissa Reed" size="medium" margin="0 space8 0 0" />
<Avatar name="Heather Wheeler" size="large" margin="0 space8 0 0" />
<Avatar name="David Herbert" size="x-large" margin="0 space8 0 0" />
<Avatar name="Isaac Asimov" size="xx-large" />
</View>
<View display="block" padding="small medium" background="primary">
<Avatar name="Arthur C. Clarke" size="xx-small" margin="0 small 0 0" src={avatarSquare} />
<Avatar name="James Arias" size="x-small" margin="0 small 0 0" src={avatarSquare} />
<Avatar name="Charles Kimball" size="small" margin="0 small 0 0" src={avatarSquare} />
<Avatar name="Melissa Reed" size="medium" margin="0 small 0 0" src={avatarSquare} />
<Avatar name="Heather Wheeler" size="large" margin="0 small 0 0" src={avatarSquare} />
<Avatar name="David Herbert" size="x-large" margin="0 small 0 0" src={avatarSquare} />
<Avatar name="Arthur C. Clarke" size="xx-small" margin="0 space8 0 0" src={avatarSquare} />
<Avatar name="James Arias" size="x-small" margin="0 space8 0 0" src={avatarSquare} />
<Avatar name="Charles Kimball" size="small" margin="0 space8 0 0" src={avatarSquare} />
<Avatar name="Melissa Reed" size="medium" margin="0 space8 0 0" src={avatarSquare} />
<Avatar name="Heather Wheeler" size="large" margin="0 space8 0 0" src={avatarSquare} />
<Avatar name="David Herbert" size="x-large" margin="0 space8 0 0" src={avatarSquare} />
<Avatar name="Isaac Asimov" size="xx-large" src={avatarSquare} />
</View>
<View display="block" padding="small medium">
<Avatar name="Arthur C. Clarke" renderIcon={<IconGroupLine />} size="xx-small" margin="0 small 0 0" />
<Avatar name="James Arias" renderIcon={<IconGroupLine />} size="x-small" margin="0 small 0 0" />
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} size="small" margin="0 small 0 0" />
<Avatar name="Melissa Reed" renderIcon={<IconGroupLine />} size="medium" margin="0 small 0 0" />
<Avatar name="Heather Wheeler" renderIcon={<IconGroupLine />} size="large" margin="0 small 0 0" />
<Avatar name="David Herbert" renderIcon={<IconGroupLine />} size="x-large" margin="0 small 0 0" />
<Avatar name="Arthur C. Clarke" renderIcon={<IconGroupLine />} size="xx-small" margin="0 space8 0 0" />
<Avatar name="James Arias" renderIcon={<IconGroupLine />} size="x-small" margin="0 space8 0 0" />
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} size="small" margin="0 space8 0 0" />
<Avatar name="Melissa Reed" renderIcon={<IconGroupLine />} size="medium" margin="0 space8 0 0" />
<Avatar name="Heather Wheeler" renderIcon={<IconGroupLine />} size="large" margin="0 space8 0 0" />
<Avatar name="David Herbert" renderIcon={<IconGroupLine />} size="x-large" margin="0 space8 0 0" />
<Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} size="xx-large" />
</View>
</div>
Expand All @@ -73,21 +93,21 @@ type: example
---
<div>
<View display="block" padding="small medium">
<Avatar name="Arthur C. Clarke" margin="0 small 0 0" />
<Avatar name="James Arias" color="shamrock" margin="0 small 0 0" />
<Avatar name="Charles Kimball" color="barney" margin="0 small 0 0" />
<Avatar name="Melissa Reed" color="crimson" margin="0 small 0 0" />
<Avatar name="Heather Wheeler" color="fire" margin="0 small 0 0" />
<Avatar name="David Herbert" color="licorice" margin="0 small 0 0" />
<Avatar name="Arthur C. Clarke" margin="0 space8 0 0" />
<Avatar name="James Arias" color="shamrock" margin="0 space8 0 0" />
<Avatar name="Charles Kimball" color="barney" margin="0 space8 0 0" />
<Avatar name="Melissa Reed" color="crimson" margin="0 space8 0 0" />
<Avatar name="Heather Wheeler" color="fire" margin="0 space8 0 0" />
<Avatar name="David Herbert" color="licorice" margin="0 space8 0 0" />
<Avatar name="Isaac Asimov" color="ash" />
</View>
<View display="block" padding="small medium">
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" margin="0 small 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="shamrock" margin="0 small 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="barney" margin="0 small 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="crimson" margin="0 small 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="fire" margin="0 small 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="licorice" margin="0 small 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" margin="0 space8 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="shamrock" margin="0 space8 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="barney" margin="0 space8 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="crimson" margin="0 space8 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="fire" margin="0 space8 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="licorice" margin="0 space8 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="ash" />
</View>
</div>
Expand All @@ -103,21 +123,21 @@ type: example
---
<div>
<View display="block" padding="small medium" background="primary">
<Avatar name="Arthur C. Clarke" hasInverseColor margin="0 small 0 0" />
<Avatar name="James Arias" color="shamrock" hasInverseColor margin="0 small 0 0" />
<Avatar name="Charles Kimball" color="barney" hasInverseColor margin="0 small 0 0" />
<Avatar name="Melissa Reed" color="crimson" hasInverseColor margin="0 small 0 0" />
<Avatar name="Heather Wheeler" color="fire" hasInverseColor margin="0 small 0 0" />
<Avatar name="David Herbert" color="licorice" hasInverseColor margin="0 small 0 0" />
<Avatar name="Arthur C. Clarke" hasInverseColor margin="0 space8 0 0" />
<Avatar name="James Arias" color="shamrock" hasInverseColor margin="0 space8 0 0" />
<Avatar name="Charles Kimball" color="barney" hasInverseColor margin="0 space8 0 0" />
<Avatar name="Melissa Reed" color="crimson" hasInverseColor margin="0 space8 0 0" />
<Avatar name="Heather Wheeler" color="fire" hasInverseColor margin="0 space8 0 0" />
<Avatar name="David Herbert" color="licorice" hasInverseColor margin="0 space8 0 0" />
<Avatar name="Isaac Asimov" color="ash" hasInverseColor />
</View>
<View display="block" padding="small medium" background="primary">
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" hasInverseColor margin="0 small 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="shamrock" hasInverseColor margin="0 small 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="barney" hasInverseColor margin="0 small 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="crimson" hasInverseColor margin="0 small 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="fire" hasInverseColor margin="0 small 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="licorice" hasInverseColor margin="0 small 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" hasInverseColor margin="0 space8 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="shamrock" hasInverseColor margin="0 space8 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="barney" hasInverseColor margin="0 space8 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="crimson" hasInverseColor margin="0 space8 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="fire" hasInverseColor margin="0 space8 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="licorice" hasInverseColor margin="0 space8 0 0" />
<Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="ash" hasInverseColor />
</View>
</div>
Expand All @@ -130,9 +150,9 @@ In case you need more control over the color, feel free to use the `themeOverrid
type: example
---
<div>
<Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} themeOverride={{ color: '#efb410' }} margin="0 small 0 0" />
<Avatar name="Heather Wheeler" color="fire" themeOverride={{ colorFire: 'magenta' }} margin="0 small 0 0" />
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} hasInverseColor themeOverride={{ color: 'lightblue', background: 'black' }} margin="0 small 0 0" />
<Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} themeOverride={{ color: '#efb410' }} margin="0 space8 0 0" />
<Avatar name="Heather Wheeler" color="fire" themeOverride={{ colorFire: 'magenta' }} margin="0 space8 0 0" />
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} hasInverseColor themeOverride={{ color: 'lightblue', background: 'black' }} margin="0 space8 0 0" />
<Avatar name="David Herbert" hasInverseColor color="fire" themeOverride={{ colorFire: '#efb410' }} />
</div>
```
Expand All @@ -146,8 +166,8 @@ By default only avatars without an image have borders but you can force it to `a
type: example
---
<div>
<Avatar name="Sarah Robinson" src={avatarSquare} margin="0 small 0 0" showBorder="always"/>
<Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 small 0 0" showBorder="never"/>
<Avatar name="Sarah Robinson" src={avatarSquare} margin="0 space8 0 0" showBorder="always"/>
<Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 space8 0 0" showBorder="never"/>
</div>
```

Expand Down
4 changes: 3 additions & 1 deletion packages/ui-avatar/src/Avatar/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ type AvatarOwnProps = {
| 'fire'
| 'licorice'
| 'ash'
| 'ai'
/**
* In inverse color mode the background and text/icon colors are inverted
*/
Expand Down Expand Up @@ -139,7 +140,8 @@ const propTypes: PropValidators<PropKeys> = {
'crimson',
'fire',
'licorice',
'ash'
'ash',
'ai'
]),
hasInverseColor: PropTypes.bool,
showBorder: PropTypes.oneOf(['auto', 'always', 'never']),
Expand Down
Loading
Loading