Ai text

packages/shared-types/src/Colors.ts

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

packages/shared-types/src/ComponentThemeVariables.ts

@@ -66,21 +66,24 @@ 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
 }
 
 export type BadgeTheme = {
@@ -1386,15 +1389,18 @@ export type TagTheme = {
 }
 
 export type TextTheme = Typography & {
-  primaryInverseColor: Colors['contrasts']['white1010']
-  primaryColor: Colors['contrasts']['grey125125']
-  secondaryColor: Colors['contrasts']['grey4570']
-  secondaryInverseColor: Colors['contrasts']['grey1111']
-  brandColor: Colors['contrasts']['blue4570']
-  dangerColor: Colors['contrasts']['red4570']
-  successColor: Colors['contrasts']['green4570']
-  alertColor: Colors['contrasts']['blue4570']
-  warningColor: Colors['contrasts']['orange5782']
+  primaryInverseColor: string
+  primaryColor: string
+  secondaryColor: string
+  secondaryInverseColor: string
+  brandColor: string
+  dangerColor: string
+  successColor: string
+  alertColor: string
+  warningColor: string
+  aiColor: string
+
+  aiBackgroundColor: string
   paragraphMargin: string | 0
 }
 

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

@@ -4,6 +4,34 @@ describes: Avatar
 
 The avatar component can be used to display a user's avatar. When an image src is not supplied the user's initials will display.
 
+## Variant
+
+Avatar has a variant prop, which currently only toggles it between `ai` and `default` behavior. `ai` is a preset where you can only change the `size` and `margin` visual props, all others are preset. In the following example, there are the `ai` variants.
+
+### ai
+
+```js
+---
+type: example
+readonly: true
+---
+<div>
+   <View display="block" padding="small medium">
+    <Avatar variant="ai" size="xx-small" margin="0 small 0 0" />
+    <Avatar variant="ai" size="x-small" margin="0 small 0 0" />
+    <Avatar variant="ai" size="small" margin="0 small 0 0" />
+    <Avatar variant="ai" size="medium" margin="0 small 0 0" />
+    <Avatar variant="ai" size="large" margin="0 small 0 0" />
+    <Avatar variant="ai" size="x-large" margin="0 small 0 0" />
+    <Avatar variant="ai" size="xx-large" />
+  </View>
+</div>
+```
+
+### default
+
+Most avatar's features are accessible through the `default` variant
+
 Instead of the initials, an SVG icon can be displayed with the `renderIcon` property.
 
 The avatar can be `circle` _(default)_ or `rectangle`. Use the `margin` prop to add space between Avatar and other content.

packages/ui-avatar/src/Avatar/index.tsx

@@ -32,6 +32,7 @@ import {
 } from 'react'
 
 import { View } from '@instructure/ui-view'
+import { IconAiSolid } from '@instructure/ui-icons'
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils'
 import type { AvatarProps } from './props'
 
@@ -52,7 +53,8 @@ const Avatar = forwardRef(
       showBorder = 'auto',
       shape = 'circle',
       display = 'inline-block',
-      onImageLoaded = (_event: SyntheticEvent) => {},
+      variant = 'default',
+      onImageLoaded = (_event: SyntheticEvent) => { },
       src,
       name,
       renderIcon,
@@ -78,7 +80,8 @@ const Avatar = forwardRef(
         shape,
         src,
         showBorder,
-        themeOverride
+        themeOverride,
+        variant
       },
       componentId: 'Avatar',
       displayName: 'Avatar'
@@ -122,11 +125,13 @@ const Avatar = forwardRef(
     }
 
     const renderContent = () => {
-      if (!renderIcon) {
+      const calcedRenderIcon = variant === 'ai' ? <IconAiSolid /> : renderIcon
+
+      if (!calcedRenderIcon) {
         return renderInitials()
       }
 
-      return <span css={styles?.iconSVG}>{callRenderProp(renderIcon)}</span>
+      return <span css={styles?.iconSVG}>{callRenderProp(calcedRenderIcon)}</span>
     }
 
     return (

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

@@ -100,6 +100,11 @@ type AvatarOwnProps = {
    * An icon, or function that returns an icon that gets displayed. If the `src` prop is provided, `src` will have priority.
    */
   renderIcon?: Renderable
+
+  /**
+   * if "ai", it will ignore most props (e.g.: shape, showBorder, onImageLoaded, hasInverseColor, color, name) and render an "ai avatar"
+   */
+  variant?: 'default' | 'ai'
 }
 
 export type AvatarState = {
@@ -149,7 +154,8 @@ const propTypes: PropValidators<PropKeys> = {
   onImageLoaded: PropTypes.func,
   as: PropTypes.elementType,
   elementRef: PropTypes.func,
-  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  variant: PropTypes.oneOf(['default', 'ai'])
 }
 
 const allowedProps: AllowedPropKeys = [