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

INSTUI-4547

Author: HerrTopi

packages/shared-types/src/ComponentThemeVariables.ts

@@ -1398,15 +1398,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-text/src/Text/README.md

@@ -26,6 +26,24 @@ type: example
 </div>
 ```
 
+### Text colors
+
+```js
+---
+type: example
+---
+<div>
+  <Text color="primary">I&#39;m primary text</Text><br/>
+  <Text color="secondary">I&#39;m secondary text</Text><br/>
+  <Text color="brand">I&#39;m brand text</Text><br />
+  <Text color="success">I&#39;m success text</Text><br/>
+  <Text color="warning">I&#39;m warning text</Text><br />
+  <Text color="danger">I&#39;m danger text</Text><br />
+  <Text color="ai-highlight">I&#39;m a highlighted text (by AI)</Text><br />
+  <Text color="alert">I&#39;m alert text - DEPRECATED - DO NOT USE</Text>
+</div>
+```
+
 ### Font sizes
 
 ```js
@@ -134,23 +152,6 @@ type: example
 </div>
 ```
 
-### Text colors
-
-```js
----
-type: example
----
-<div>
-  <Text color="primary">I&#39;m primary text</Text><br/>
-  <Text color="secondary">I&#39;m secondary text</Text><br/>
-  <Text color="brand">I&#39;m brand text</Text><br />
-  <Text color="success">I&#39;m success text</Text><br/>
-  <Text color="warning">I&#39;m warning text</Text><br />
-  <Text color="danger">I&#39;m danger text</Text><br />
-  <Text color="alert">I&#39;m alert text - DEPRECATED - DO NOT USE</Text>
-</div>
-```
-
 ```js
 ---
 type: example

packages/ui-text/src/Text/props.ts

@@ -52,6 +52,7 @@ type TextOwnProps = {
     | 'warning'
     | 'primary-inverse'
     | 'secondary-inverse'
+    | 'ai-highlight'
   /**
    * Provides a reference to the underlying HTML element
    */
@@ -119,7 +120,8 @@ const propTypes: PropValidators<PropKeys> = {
     'warning',
     'alert',
     'primary-inverse',
-    'secondary-inverse'
+    'secondary-inverse',
+    'ai-highlight'
   ]),
   elementRef: PropTypes.func,
   fontStyle: PropTypes.oneOf(['italic', 'normal']),

packages/ui-text/src/Text/styles.ts

@@ -105,7 +105,11 @@ const generateStyle = (
     brand: { color: componentTheme.brandColor },
     danger: { color: componentTheme.dangerColor },
     alert: { color: componentTheme.alertColor },
-    warning: { color: componentTheme.warningColor }
+    warning: { color: componentTheme.warningColor },
+    'ai-highlight': {
+      color: componentTheme.aiColor,
+      background: componentTheme.aiBackgroundColor
+    }
   }
 
   const wrapStyle = {

packages/ui-text/src/Text/theme.ts

@@ -54,6 +54,9 @@ const generateComponentTheme = (theme: Theme): TextTheme => {
     successColor: colors?.contrasts?.green5782,
     alertColor: colors?.contrasts?.blue5782,
     warningColor: colors?.contrasts?.orange5782,
+    aiColor: colors?.contrasts?.violet5790,
+
+    aiBackgroundColor: colors?.contrasts?.violet1212,
 
     paragraphMargin: `${spacing.medium} 0`
   }