feat(ui-list,shared-types): ability to override delimiter color

INSTUI-4569

Author: joyenjoyer

packages/shared-types/src/ComponentThemeVariables.ts

@@ -711,6 +711,7 @@ export type InlineListItemTheme = {
   fontSizeMedium: Typography['fontSizeMedium']
   fontSizeLarge: Typography['fontSizeLarge']
   color: Colors['contrasts']['grey4570']
+  delimiterColor: Colors['contrasts']['grey125125']
   lineHeight: Typography['lineHeightCondensed']
   noneSpacing: Spacing['xSmall']
   pipeSpacing: Spacing['xSmall']

packages/ui-list/src/InlineList/InlineListItem/styles.ts

@@ -136,7 +136,8 @@ const generateStyle = (
       ...delimiterVariants[delimiter!],
       '[class$=-inlineListItem]:last-of-type > &:last-child::after': {
         content: 'none'
-      }
+      },
+      color: componentTheme.delimiterColor
     }
   }
 }

packages/ui-list/src/InlineList/InlineListItem/theme.ts

@@ -46,6 +46,7 @@ const generateComponentTheme = (theme: Theme): InlineListItemTheme => {
     fontSizeMedium: typography?.fontSizeMedium,
     fontSizeLarge: typography?.fontSizeLarge,
     color: colors?.contrasts?.grey4570,
+    delimiterColor: colors?.contrasts?.grey125125,
     lineHeight: typography?.lineHeightCondensed,
     noneSpacing: spacing?.xSmall,
     pipeSpacing: spacing?.xSmall,