feat(ui-text,shared-types): add warningColor to Text component

INSTUI-4473

Author: HerrTopi

packages/shared-types/src/ComponentThemeVariables.ts

@@ -1391,6 +1391,7 @@ export type TextTheme = Typography & {
   dangerColor: Colors['contrasts']['red4570']
   successColor: Colors['contrasts']['green4570']
   alertColor: Colors['contrasts']['blue4570']
+  warningColor: Colors['contrasts']['orange5782']
   paragraphMargin: string | 0
 }
 

packages/ui-text/src/Text/README.md

@@ -145,8 +145,9 @@ type: example
   <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</Text>
+  <Text color="alert">I&#39;m alert text - DEPRECATED - DO NOT USE</Text>
 </div>
 ```
 

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

@@ -49,6 +49,7 @@ type TextOwnProps = {
     | 'success'
     | 'danger'
     | 'alert'
+    | 'warning'
     | 'primary-inverse'
     | 'secondary-inverse'
   /**
@@ -115,6 +116,7 @@ const propTypes: PropValidators<PropKeys> = {
     'brand',
     'success',
     'danger',
+    'warning',
     'alert',
     'primary-inverse',
     'secondary-inverse'

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

@@ -104,7 +104,8 @@ const generateStyle = (
     success: { color: componentTheme.successColor },
     brand: { color: componentTheme.brandColor },
     danger: { color: componentTheme.dangerColor },
-    alert: { color: componentTheme.alertColor }
+    alert: { color: componentTheme.alertColor },
+    warning: { color: componentTheme.warningColor }
   }
 
   const wrapStyle = {

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

@@ -46,13 +46,14 @@ const generateComponentTheme = (theme: Theme): TextTheme => {
     primaryInverseColor: colors?.contrasts?.white1010,
     primaryColor: colors?.contrasts?.grey125125,
 
-    secondaryColor: colors?.contrasts?.grey4570,
+    secondaryColor: colors?.contrasts?.grey5782,
     secondaryInverseColor: colors?.contrasts?.grey1111,
 
-    brandColor: colors?.contrasts?.blue4570,
-    dangerColor: colors?.contrasts?.red4570,
-    successColor: colors?.contrasts?.green4570,
-    alertColor: colors?.contrasts?.blue4570,
+    brandColor: colors?.contrasts?.blue5782,
+    dangerColor: colors?.contrasts?.red5782,
+    successColor: colors?.contrasts?.green5782,
+    alertColor: colors?.contrasts?.blue5782,
+    warningColor: colors?.contrasts?.orange5782,
 
     paragraphMargin: `${spacing.medium} 0`
   }