style(many): change separator colors

INSTUI-4665

Author: HerrTopi

packages/ui-color-picker/src/ColorPreset/theme.ts

@@ -38,7 +38,7 @@ const generateComponentTheme = (theme: Theme): ColorPresetTheme => {
     smallSpacing: spacing?.small,
     selectedIndicatorBackgroundColor: colors?.contrasts?.white1010,
     selectedIndicatorBorderColor: colors?.contrasts?.grey125125,
-    popoverDividerColor: colors?.contrasts?.grey1214,
+    popoverDividerColor: colors?.contrasts?.grey3045,
     smallBorder: borders?.widthSmall,
     popoverFooterColor: colors?.contrasts?.grey1111,
     checkerboardBackgroundImage: `linear-gradient(45deg, ${colors?.contrasts?.grey4570} 25%, transparent 25%),

packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/styles.ts

@@ -89,7 +89,8 @@ const generateStyle = (
     drawerTrayWithShadow: {
       label: 'drawerTray--with-shadow',
       ...trayStyle,
-      boxShadow: componentTheme.boxShadow
+      boxShadow: componentTheme.boxShadow,
+      border: 0
     },
     drawerTrayContent: {
       label: 'drawerTray__content',

packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/theme.ts

@@ -35,7 +35,7 @@ const generateComponentTheme = (theme: Theme): DrawerLayoutTrayTheme => {
 
   const componentVariables: DrawerLayoutTrayTheme = {
     background: colors?.contrasts?.white1010,
-    borderColor: colors?.contrasts?.grey1424,
+    borderColor: colors?.contrasts?.grey3045,
     borderWidth: borders?.widthSmall,
     borderStyle: borders?.style,
     zIndex: stacking?.topmost,

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

@@ -75,7 +75,7 @@ const generateComponentTheme = (theme: Theme): HeadingTheme => {
     secondaryInverseColor: colors?.contrasts?.grey1111,
 
     borderPadding: spacing?.xxxSmall,
-    borderColor: colors?.contrasts?.grey1424,
+    borderColor: colors?.contrasts?.grey3045,
     borderWidth: borders?.widthSmall,
     borderStyle: borders?.style,
 

packages/ui-menu/src/Menu/MenuItemSeparator/theme.ts

@@ -34,7 +34,7 @@ const generateComponentTheme = (theme: Theme): MenuSeparatorTheme => {
   const { colors, spacing, borders } = theme
 
   const componentVariables: MenuSeparatorTheme = {
-    background: colors?.contrasts?.grey1214,
+    background: colors?.contrasts?.grey3045,
     height: borders?.widthSmall,
     margin: `0 ${spacing?.small}`
   }

packages/ui-options/src/Options/Separator/theme.ts

@@ -34,7 +34,7 @@ const generateComponentTheme = (theme: Theme): OptionsSeparatorTheme => {
   const { borders, colors, spacing } = theme
 
   const componentVariables: OptionsSeparatorTheme = {
-    background: colors?.contrasts?.grey1214,
+    background: colors?.contrasts?.grey3045,
     height: borders?.widthSmall,
     margin: `0 ${spacing?.small}`
   }