fix(many): fix access of colors from theme

INSTUI-4561

Author: HerrTopi

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

@@ -46,7 +46,7 @@ const generateComponentTheme = (theme: Theme): AvatarTheme => {
 
     // these colors have sufficient contrast with the white background
     // in the normal and high contrast themes
-    color: colors?.contrasts.blue4570,
+    color: colors?.contrasts?.blue4570,
     colorShamrock: colors?.contrasts?.green4570,
     colorBarney: colors?.contrasts?.blue4570,
     colorCrimson: colors?.contrasts?.red4570,

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

@@ -85,8 +85,8 @@ const generateComponentTheme = (theme: Theme): HeadingTheme => {
     borderWidth: borders?.widthSmall,
     borderStyle: borders?.style,
 
-    aiTextTopGradientColor: colors.contrasts.violet4570,
-    aiTextBottomGradientColor: colors.contrasts.sea4570
+    aiTextTopGradientColor: colors?.contrasts?.violet4570,
+    aiTextBottomGradientColor: colors?.contrasts?.sea4570
   }
 
   return {

packages/ui-radio-input/src/RadioInputGroup/theme.ts

@@ -34,7 +34,7 @@ const generateComponentTheme = (theme: Theme): RadioInputGroupTheme => {
   const { colors } = theme
 
   const componentVariables: RadioInputGroupTheme = {
-    invalidAsteriskColor: colors.primitives.red57
+    invalidAsteriskColor: colors?.primitives?.red57
   }
 
   return {

packages/ui-side-nav-bar/src/SideNavBar/SideNavBarItem/theme.ts

@@ -61,13 +61,13 @@ const generateComponentTheme = (theme: Theme): SideNavBarItemTheme => {
 
     hoverBackgroundColor: colors?.contrasts?.grey125125,
     outerFocusOutline: `inset 0 0 0 0.125rem ${colors?.contrasts?.grey4570}`,
-    innerFocusOutline: `inset 0 0 0 0.25rem ${colors.contrasts?.white1010}`,
+    innerFocusOutline: `inset 0 0 0 0.25rem ${colors?.contrasts?.white1010}`,
 
     selectedFontColor: colors?.contrasts?.blue4570,
     selectedIconColor: colors?.contrasts?.blue4570,
     selectedBackgroundColor: colors?.contrasts?.white1010,
-    selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors.contrasts?.white1010}`,
-    selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors.contrasts?.blue4570}`,
+    selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors?.contrasts?.white1010}`,
+    selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors?.contrasts?.blue4570}`,
 
     contentPadding: spacing?.xxSmall
   }