feat(ui-heading,shared-types): add ai color

INSTUI-4550

Author: HerrTopi

packages/shared-types/src/ComponentThemeVariables.ts

@@ -662,14 +662,16 @@ export type HeadingTheme = Typography & {
   h5FontSize: Typography['fontSizeSmall']
   h5FontWeight: Typography['fontWeightNormal']
   h5FontFamily: Typography['fontFamily']
-  primaryInverseColor: Colors['contrasts']['white1010']
-  primaryColor: Colors['contrasts']['grey125125']
-  secondaryColor: Colors['contrasts']['grey4570']
-  secondaryInverseColor: Colors['contrasts']['grey1111']
+  primaryInverseColor: string
+  primaryColor: string
+  secondaryColor: string
+  secondaryInverseColor: string
   borderPadding: Spacing['xxxSmall']
-  borderColor: Colors['contrasts']['grey1424']
+  borderColor: string
   borderWidth: Border['widthSmall']
   borderStyle: Border['style']
+  aiTextTopGradientColor: string
+  aiTextBottomGradientColor: string
 }
 
 export type ImgTheme = {

packages/ui-heading/src/Heading/README.md

@@ -65,6 +65,7 @@ type: example
   <Heading>I inherit my color via the CSS cascade (default)</Heading>
   <Heading color="primary">I am primary color</Heading>
   <Heading color="secondary">I am secondary color</Heading>
+  <Heading color="ai"><IconAiColoredSolid/>&nbsp; I am AI color</Heading>
 </div>
 ```
 

packages/ui-heading/src/Heading/props.ts

@@ -58,6 +58,7 @@ type HeadingOwnProps = {
     | 'primary-inverse'
     | 'secondary-inverse'
     | 'inherit'
+    | 'ai'
   /**
    * The *visual* appearance of the Heading: h1 is largest; h5 is smallest.
    */
@@ -112,7 +113,8 @@ const propTypes: PropValidators<PropKeys> = {
     'secondary',
     'primary-inverse',
     'secondary-inverse',
-    'inherit'
+    'inherit',
+    'ai'
   ]),
   level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'reset']),
   as: PropTypes.elementType,

packages/ui-heading/src/Heading/styles.ts

@@ -143,7 +143,13 @@ const generateStyle = (
     primary: { color: componentTheme.primaryColor },
     secondary: { color: componentTheme.secondaryColor },
     'primary-inverse': { color: componentTheme.primaryInverseColor },
-    'secondary-inverse': { color: componentTheme.secondaryInverseColor }
+    'secondary-inverse': { color: componentTheme.secondaryInverseColor },
+    ai: {
+      background: `
+        linear-gradient(to bottom, ${componentTheme.aiTextTopGradientColor} 0%, ${componentTheme.aiTextBottomGradientColor} 100%) text`,
+      border: 'solid transparent',
+      WebkitTextFillColor: 'transparent'
+    }
   }
 
   const borderStyles = {
@@ -182,6 +188,8 @@ const generateStyle = (
       label: 'heading',
       lineHeight: componentTheme.lineHeight,
       margin: 0,
+      display: 'flex',
+      alignItems: 'center',
 
       // NOTE: the input styles exist to accommodate the InPlaceEdit component
       // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)

packages/ui-heading/src/Heading/theme.ts

@@ -83,7 +83,10 @@ const generateComponentTheme = (theme: Theme): HeadingTheme => {
     borderPadding: spacing?.xxxSmall,
     borderColor: colors?.contrasts?.grey1424,
     borderWidth: borders?.widthSmall,
-    borderStyle: borders?.style
+    borderStyle: borders?.style,
+
+    aiTextTopGradientColor: colors.contrasts.violet4570,
+    aiTextBottomGradientColor: colors.contrasts.sea4570
   }
 
   return {