fix(dialogs): themeing support for Teams dark and hc

CHANGELOG.md

@@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fixed `TreeTitle` - `tabIndex` prop should be camel case in behavior @sophieH29 ([#1345](https://github.com/stardust-ui/react/pull/1345))
 - Fixed handle refs on updates of `innerRef` prop in `Ref` component @layershifter ([#1331](https://github.com/stardust-ui/react/pull/1331))
 - Fixed positioing of `Popup` in scrollable container @layershifter ([#1341](https://github.com/stardust-ui/react/pull/1341))
+- Add Teams dark and hc themeing for `Dialog` [redlines] @codepretty ([#1297](https://github.com/stardust-ui/react/pull/1297))
 
 ### Features
 - Add `selected`, `isFromKeyboard` props to `DropdownItem` @mnajdova ([#1299](https://github.com/stardust-ui/react/pull/1299))

packages/react/src/themes/teams-dark/componentVariables.ts

@@ -2,6 +2,7 @@ export { default as Attachment } from './components/Attachment/attachmentVariabl
 export { default as Button } from './components/Button/buttonVariables'
 export { default as Chat } from './components/Chat/chatVariables'
 export { default as ChatMessage } from './components/Chat/chatMessageVariables'
+export { default as Dialog } from './components/Dialog/dialogVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
 export { default as Header } from './components/Header/headerVariables'
 export { default as HeaderDescription } from './components/Header/headerDescriptionVariables'

packages/react/src/themes/teams-dark/components/Dialog/dialogVariables.ts

@@ -0,0 +1,8 @@
+import { DialogVariables } from '../../../teams/components/Dialog/dialogVariables'
+
+export default (siteVars: any): Partial<DialogVariables> => {
+  return {
+    rootBackground: siteVars.colors.grey[650],
+    foregroundColor: siteVars.colors.white,
+  }
+}

packages/react/src/themes/teams-high-contrast/componentStyles.ts

@@ -1,4 +1,5 @@
 export { default as Attachment } from './components/Attachment/attachmentStyles'
 export { default as MenuItem } from './components/Menu/menuItemStyles'
 export { default as Alert } from './components/Alert/alertStyles'
+export { default as Dialog } from './components/Dialog/dialogStyles'
 export { default as Dropdown } from './components/Dropdown/dropdownStyles'

packages/react/src/themes/teams-high-contrast/componentVariables.ts

@@ -3,6 +3,7 @@ export { default as Avatar } from './components/Avatar/avatarVariables'
 export { default as Button } from './components/Button/buttonVariables'
 export { default as Chat } from './components/Chat/chatVariables'
 export { default as ChatMessage } from './components/Chat/chatMessageVariables'
+export { default as Dialog } from './components/Dialog/dialogVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
 export { default as Header } from './components/Header/headerVariables'
 export { default as Input } from './components/Input/inputVariables'

packages/react/src/themes/teams-high-contrast/components/Dialog/dialogStyles.ts

@@ -0,0 +1,7 @@
+import { ICSSInJSStyle } from '../../../types'
+
+export default {
+  root: ({ variables: v }): ICSSInJSStyle => ({
+    border: `1px solid ${v.foregroundColor}`,
+  }),
+}

packages/react/src/themes/teams-high-contrast/components/Dialog/dialogVariables.ts

@@ -0,0 +1,9 @@
+import { DialogVariables } from '../../../teams/components/Dialog/dialogVariables'
+
+export default (siteVars: any): Partial<DialogVariables> => {
+  return {
+    boxShadow: 'none',
+    rootBackground: siteVars.colors.black,
+    foregroundColor: siteVars.colors.white,
+  }
+}

packages/react/src/themes/teams/componentStyles.ts

@@ -15,6 +15,8 @@ export { default as Chat } from './components/Chat/chatStyles'
 export { default as ChatItem } from './components/Chat/chatItemStyles'
 export { default as ChatMessage } from './components/Chat/chatMessageStyles'
 
+export { default as Dialog } from './components/Dialog/dialogStyles'
+
 export { default as Divider } from './components/Divider/dividerStyles'
 
 export { default as Dropdown } from './components/Dropdown/dropdownStyles'

packages/react/src/themes/teams/componentVariables.ts

@@ -13,6 +13,8 @@ export { default as Chat } from './components/Chat/chatVariables'
 export { default as ChatItem } from './components/Chat/chatItemVariables'
 export { default as ChatMessage } from './components/Chat/chatMessageVariables'
 
+export { default as Dialog } from './components/Dialog/dialogVariables'
+
 export { default as Divider } from './components/Divider/dividerVariables'
 
 export { default as Dropdown } from './components/Dropdown/dropdownVariables'

packages/react/src/themes/teams/components/Dialog/dialogStyles.ts

@@ -0,0 +1,17 @@
+import { DialogProps } from '../../../../components/Dialog/Dialog'
+import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types'
+import { DialogVariables } from './dialogVariables'
+
+type DialogStyleParams = ComponentStyleFunctionParam<DialogProps, DialogVariables>
+
+export default {
+  root: ({ props: p, variables: v }: DialogStyleParams): ICSSInJSStyle => ({
+    boxShadow: v.boxShadow,
+    color: v.foregroundColor,
+  }),
+
+  header: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({
+    fontSize: v.headerFontSize,
+    fontWeight: v.headerFontWeight,
+  }),
+}

packages/react/src/themes/teams/components/Dialog/dialogVariables.ts

@@ -0,0 +1,29 @@
+import { DialogVariables as BaseDialogVariables } from '../../../base/components/Dialog/dialogVariables'
+import { pxToRem } from '../../../../lib'
+
+export interface DialogVariables extends BaseDialogVariables {
+  boxShadow: string
+  foregroundColor: string
+
+  headerFontSize: string
+  headerFontWeight: number
+}
+
+export default (siteVariables): DialogVariables => ({
+  boxShadow: siteVariables.shadowLevel4,
+  foregroundColor: siteVariables.colors.grey[900],
+
+  rootBackground: siteVariables.colors.white,
+  rootBorderRadius: pxToRem(3),
+  rootPadding: `${pxToRem(27)} ${pxToRem(32)} ${pxToRem(20)} ${pxToRem(32)}`,
+  rootWidth: '50vw',
+
+  contentMargin: `0 0 ${pxToRem(20)} 0`,
+
+  headerFontSize: siteVariables.fontSizes.large,
+  headerFontWeight: siteVariables.fontWeightBold,
+  headerMargin: `0 0 ${pxToRem(8)} 0`,
+
+  overlayBackground: 'rgba(37, 36, 36, .75)', // todo: update to a palette value when daisy has mapped one
+  overlayZIndex: 1000,
+})