feat(ui-avatar,shared-types): add new ai color variant

Author: HerrTopi

packages/shared-types/src/ComponentThemeVariables.ts

@@ -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 = {

packages/ui-avatar/src/Avatar/README.md

@@ -23,6 +23,26 @@ readonly: true
 </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 small 0 0"/>
+  <Avatar size="x-small" color="ai" renderIcon={IconAiSolid} margin="0 small 0 0"/>
+  <Avatar size="small" color="ai" renderIcon={IconAiSolid} margin="0 small 0 0"/>
+  <Avatar size="medium" color="ai" renderIcon={IconAiSolid} margin="0 small 0 0"/>
+  <Avatar size="large" color="ai" renderIcon={IconAiSolid} margin="0 small 0 0"/>
+  <Avatar size="x-large"  color="ai" renderIcon={IconAiSolid} margin="0 small 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

packages/ui-avatar/src/Avatar/props.ts

@@ -68,6 +68,7 @@ type AvatarOwnProps = {
     | 'fire'
     | 'licorice'
     | 'ash'
+    | 'ai'
   /**
    * In inverse color mode the background and text/icon colors are inverted
    */
@@ -139,7 +140,8 @@ const propTypes: PropValidators<PropKeys> = {
     'crimson',
     'fire',
     'licorice',
-    'ash'
+    'ash',
+    'ai'
   ]),
   hasInverseColor: PropTypes.bool,
   showBorder: PropTypes.oneOf(['auto', 'always', 'never']),

packages/ui-avatar/src/Avatar/styles.ts

@@ -51,44 +51,97 @@ const generateStyle = (
   const { loaded, size, color, hasInverseColor, shape, src, showBorder } =
     params
 
+  // NOTE: this is needed due to design changes. The size of the component is calculated from "em" which means it is
+  // tied to the fontSize. The font sizes changed for the icons, which meant that the container (component) size would've
+  // changed too without additional calculations
+  const calcNewScaler = (
+    originalFontSize: number,
+    newFontSize: number,
+    originalScaler: number
+  ) => {
+    return `${(originalFontSize * originalScaler) / newFontSize}em`
+  }
+
   const sizeStyles = {
     auto: {
       fontSize: 'inherit',
-      borderWidth: componentTheme.borderWidthSmall
+      borderWidth: componentTheme.borderWidthSmall,
+      width: '2.5em',
+      height: '2.5em'
     },
     'xx-small': {
-      fontSize: '0.5rem',
-      borderWidth: componentTheme.borderWidthSmall
+      fontSize: '0.625rem',
+      borderWidth: componentTheme.borderWidthSmall,
+      width: calcNewScaler(0.5, 0.625, shape === 'circle' ? 2.5 : 3),
+      height: calcNewScaler(0.5, 0.625, 2.5)
     },
     'x-small': {
-      fontSize: '0.75rem',
-      borderWidth: componentTheme.borderWidthSmall
+      fontSize: '0.875rem',
+      borderWidth: componentTheme.borderWidthSmall,
+      width: calcNewScaler(0.75, 0.875, shape === 'circle' ? 2.5 : 3),
+      height: calcNewScaler(0.75, 0.875, 2.5)
     },
     small: {
-      fontSize: '1rem',
-      borderWidth: componentTheme.borderWidthSmall
+      fontSize: '1.25rem',
+      borderWidth: componentTheme.borderWidthSmall,
+      width: calcNewScaler(1, 1.25, shape === 'circle' ? 2.5 : 3),
+      height: calcNewScaler(1, 1.25, 2.5)
     },
     medium: {
-      fontSize: '1.25rem',
-      borderWidth: componentTheme.borderWidthMedium
+      fontSize: '1.5rem',
+      borderWidth: componentTheme.borderWidthMedium,
+      width: calcNewScaler(1.25, 1.5, shape === 'circle' ? 2.5 : 3),
+      height: calcNewScaler(1.25, 1.5, 2.5)
     },
     large: {
-      fontSize: '1.5rem',
-      borderWidth: componentTheme.borderWidthMedium
+      fontSize: '1.75rem',
+      borderWidth: componentTheme.borderWidthMedium,
+      width: calcNewScaler(1.5, 1.75, shape === 'circle' ? 2.5 : 3),
+      height: calcNewScaler(1.5, 1.75, 2.5)
     },
     'x-large': {
-      fontSize: '1.75rem',
-      borderWidth: componentTheme.borderWidthMedium
+      fontSize: '2rem',
+      borderWidth: componentTheme.borderWidthMedium,
+      width: calcNewScaler(1.75, 2, shape === 'circle' ? 2.5 : 3),
+      height: calcNewScaler(1.75, 2, 2.5)
     },
     'xx-large': {
-      fontSize: '2rem',
-      borderWidth: componentTheme.borderWidthMedium
+      fontSize: '2.25rem',
+      borderWidth: componentTheme.borderWidthMedium,
+      width: calcNewScaler(2, 2.25, shape === 'circle' ? 2.5 : 3),
+      height: calcNewScaler(2, 2.25, 2.5)
     }
   }
 
-  const variantStyles = {
+  const initialSizeStyles = {
+    auto: {
+      fontSize: 'inherit'
+    },
+    'xx-small': {
+      fontSize: '0.5rem'
+    },
+    'x-small': {
+      fontSize: '0.75rem'
+    },
+    small: {
+      fontSize: '1rem'
+    },
+    medium: {
+      fontSize: '1.25rem'
+    },
+    large: {
+      fontSize: '1.5rem'
+    },
+    'x-large': {
+      fontSize: '1.75rem'
+    },
+    'xx-large': {
+      fontSize: '2rem'
+    }
+  }
+
+  const shapeStyles = {
     circle: {
-      width: '2.5em',
       position: 'relative',
       borderRadius: '100%',
       overflow: 'hidden'
@@ -105,34 +158,54 @@ const generateStyle = (
     crimson: componentTheme.colorCrimson,
     fire: componentTheme.colorFire,
     licorice: componentTheme.colorLicorice,
-    ash: componentTheme.colorAsh
+    ash: componentTheme.colorAsh,
+    ai: `
+        linear-gradient(to bottom,  ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) padding-box,
+        linear-gradient(to bottom right, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) border-box`
   }
 
-  const backgroundColor = hasInverseColor
-    ? colorVariants[color!]
-    : componentTheme.background
+  const background = () => {
+    if (color === 'ai') {
+      return {
+        background: `
+        linear-gradient(to bottom,  ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) padding-box,
+        linear-gradient(to bottom right, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) border-box`,
+        border: 'solid transparent'
+      }
+    }
+    return hasInverseColor
+      ? {
+          backgroundColor: colorVariants[color!],
+          backgroundClip: 'content-box'
+        }
+      : {
+          backgroundColor: componentTheme.background,
+          backgroundClip: 'content-box'
+        }
+  }
 
-  const contentColor = hasInverseColor
-    ? componentTheme.background
-    : colorVariants[color!]
+  const contentColor = () => {
+    if (color === 'ai') {
+      return componentTheme.aiFontColor
+    }
+    return hasInverseColor ? componentTheme.background : colorVariants[color!]
+  }
 
   return {
     avatar: {
       label: 'avatar',
-      height: '2.5em',
       boxSizing: 'border-box',
-      backgroundColor: backgroundColor,
+      borderStyle: 'solid',
+      borderColor: componentTheme.borderColor,
+      ...background(),
       backgroundPosition: 'center',
       backgroundSize: 'cover',
-      backgroundClip: 'content-box',
       backgroundRepeat: 'no-repeat',
       overflow: 'hidden',
       lineHeight: 0,
       textAlign: 'center',
-      borderStyle: 'solid',
-      borderColor: componentTheme.borderColor,
       ...sizeStyles[size!],
-      ...variantStyles[shape!],
+      ...shapeStyles[shape!],
       ...(loaded
         ? {
             backgroundImage: `url('${src}')`,
@@ -155,11 +228,12 @@ const generateStyle = (
     },
     initials: {
       label: 'avatar__initials',
-      color: contentColor,
+      color: contentColor(),
       lineHeight: '2.375em',
       fontFamily: componentTheme.fontFamily,
       fontWeight: componentTheme.fontWeight,
-      letterSpacing: '0.0313em'
+      letterSpacing: '0.0313em',
+      ...initialSizeStyles[size!]
     },
     loadImage: {
       label: 'avatar__loadImage',
@@ -174,7 +248,7 @@ const generateStyle = (
       width: '100%',
 
       svg: {
-        fill: contentColor,
+        fill: contentColor(),
         height: '1em',
         width: '1em'
       }

packages/ui-avatar/src/Avatar/theme.ts

@@ -52,7 +52,11 @@ const generateComponentTheme = (theme: Theme): AvatarTheme => {
     colorCrimson: colors?.contrasts?.red4570,
     colorFire: colors?.contrasts?.orange4570,
     colorLicorice: colors?.contrasts?.grey125125,
-    colorAsh: colors?.contrasts?.grey4570
+    colorAsh: colors?.contrasts?.grey4570,
+
+    aiTopGradientColor: colors?.contrasts?.violet4570,
+    aiBottomGradientColor: colors?.contrasts?.sea4570,
+    aiFontColor: colors?.contrasts?.white1010
   }
 
   return {