feat(menu): Padding variables for horizontal menu

CHANGELOG.md

@@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add RTL examples for `Button` and `Divider` components @mnajdova ([#792](https://github.com/stardust-ui/react/pull/792))
 - Add mechanism for marking icons that should rotate in RTL in Teams theme; marked icons: `send`, `bullets`, `leave`, `outdent`, `redo`, `undo`, `send` @mnajdova ([#788](https://github.com/stardust-ui/react/pull/788))
 - Remove ability to introduce global style overrides for HTML document from `pxToRem` @kuzhelov ([#789](https://github.com/stardust-ui/react/pull/789))
+- Padding variable for horizontal menu @jurokapsiar ([#808](https://github.com/stardust-ui/react/pull/808))
 - Remove handledProps from behaviors @jurokapsiar ([#805](https://github.com/stardust-ui/react/pull/805))
 - Add `create` shorthand factory to `Header` component @layershifter ([#809](https://github.com/stardust-ui/react/pull/809))
 - Add `keyframeParams` prop in the `Animation` component and the `animation` prop @mnajdova ([#794](https://github.com/stardust-ui/react/pull/794))

src/themes/teams/components/Menu/menuItemStyles.ts

@@ -297,7 +297,9 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
         ? { padding: `${pxToRem(4)} 0` }
         : pointing && vertical
         ? { padding: `${pxToRem(8)} ${pxToRem(18)}` }
-        : { padding: `${pxToRem(14)} ${pxToRem(18)}` }),
+        : {
+            padding: v.horizontalPadding,
+          }),
 
       ...(iconOnly && {
         margin: pxToRem(1),

src/themes/teams/components/Menu/menuVariables.ts

@@ -1,3 +1,5 @@
+import { pxToRem } from '../../../../lib'
+
 export interface MenuVariables {
   color: string
 
@@ -21,6 +23,8 @@ export interface MenuVariables {
   disabledColor: string
 
   lineHeightBase: string
+
+  horizontalPadding: string
 }
 
 export default (siteVars: any): MenuVariables => {
@@ -48,5 +52,7 @@ export default (siteVars: any): MenuVariables => {
     disabledColor: siteVars.gray06,
 
     lineHeightBase: siteVars.lineHeightMedium,
+
+    horizontalPadding: `${pxToRem(14)} ${pxToRem(18)} ${pxToRem(14)} ${pxToRem(18)}`,
   }
 }