Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const decorator = content => {content}
// const decorator = content => content;
ctItemBorderColorFocus: siteVars.colorScheme.default.borderFocus,
ctItemColor: siteVars.colorScheme.default.foreground,
ctItemColorFocus: siteVars.colorScheme.default.foregroundFocus,
ctItemColorHover: siteVars.colorScheme.default.foregroundHover,
ctItemActiveBackground: siteVars.colorScheme.default.backgroundActive1,
// FIXME: use variables for colors!
ctItemActiveBackgroundOverlay:
'linear-gradient(90deg,rgba(60,62,93,.6),rgba(60,62,93,0) 33%),linear-gradient(135deg,rgba(60,62,93,.6) 33%,rgba(60,62,93,0) 70%),linear-gradient(180deg,rgba(60,62,93,.6) 70%,rgba(60,62,93,0) 94%),linear-gradient(225deg,rgba(60,62,93,.6) 33%,rgba(60,62,93,0) 73%),linear-gradient(270deg,rgba(60,62,93,.6),rgba(60,62,93,0) 33%),linear-gradient(0deg,rgba(98,100,167,.75) 6%,rgba(98,100,167,0) 70%)',
ctItemActiveColor: siteVars.colorScheme.default.foregroundActive1,
ctItemDangerBackground: siteVars.colorScheme.red.background2,
ctItemDangerBackgroundHover: siteVars.colorScheme.red.backgroundHover,
ctItemDangerColorHover: siteVars.colorScheme.red.foregroundHover,
ctItemIndicatorPadding: pxToRem(8),
ctItemNotificationBackgroundColor: siteVars.colors.red[400],
ctItemNotificationSize: pxToRem(8),
ctItemPrimaryBackground: siteVars.colorScheme.default.background3,
ctItemPrimaryBackgroundHover: siteVars.colorScheme.brand.backgroundHover1,
ctItemPrimaryColorHover: siteVars.colorScheme.brand.foregroundHover1,
}),
},
ctItemColorHover: siteVars.colorScheme.default.foregroundHover,
ctItemActiveBackground: siteVars.colorScheme.default.backgroundActive1,
// FIXME: use variables for colors!
ctItemActiveBackgroundOverlay:
'linear-gradient(90deg,rgba(60,62,93,.6),rgba(60,62,93,0) 33%),linear-gradient(135deg,rgba(60,62,93,.6) 33%,rgba(60,62,93,0) 70%),linear-gradient(180deg,rgba(60,62,93,.6) 70%,rgba(60,62,93,0) 94%),linear-gradient(225deg,rgba(60,62,93,.6) 33%,rgba(60,62,93,0) 73%),linear-gradient(270deg,rgba(60,62,93,.6),rgba(60,62,93,0) 33%),linear-gradient(0deg,rgba(98,100,167,.75) 6%,rgba(98,100,167,0) 70%)',
ctItemActiveColor: siteVars.colorScheme.default.foregroundActive1,
ctItemDangerBackground: siteVars.colorScheme.red.background2,
ctItemDangerBackgroundHover: siteVars.colorScheme.red.backgroundHover,
ctItemDangerColorHover: siteVars.colorScheme.red.foregroundHover,
ctItemIndicatorPadding: pxToRem(8),
ctItemNotificationBackgroundColor: siteVars.colors.red[400],
ctItemNotificationSize: pxToRem(8),
ctItemPrimaryBackground: siteVars.colorScheme.default.background3,
ctItemPrimaryBackgroundHover: siteVars.colorScheme.brand.backgroundHover1,
ctItemPrimaryColorHover: siteVars.colorScheme.brand.foregroundHover1,
}),
},
},
},
// Just a showcase of how we can further customize the styles for the buttons...
// This should only indicate which variables are missing in the Teams theme, like (primaryBorderWidth)
componentStyles: {
Button: {
root: ({ props: p }: { props: ButtonProps }) => ({
...(p.primary && {
border: 0,
}),
}),
},
},
}
return mergeThemes(baseTheme, buttonOverrides)
}
import React from 'react'
import ReactDOM from 'react-dom'
import { Button, Provider, themes } from '@fluentui/react'
ReactDOM.render(
React.createElement(
Provider,
{ theme: themes.teams },
React.createElement(Button, { content: 'Theming' }),
),
document.getElementById('root'),
)
root: ({ props: p, theme: { siteVariables } }) => ({
[`&.${classNames.threadReplies.trigger}`]: {
border: 'none',
justifyContent: 'start',
marginBottom: pxToRem(1),
boxShadow: 'none',
textDecoration: 'none',
'&:focus': {
backgroundColor: siteVariables.colorScheme.default.background,
},
'&:hover': {
backgroundColor: siteVariables.colorScheme.default.background,
},
'&:active': {
backgroundColor: siteVariables.colorScheme.default.background,
},
},
}),
[`& .${classNames.threadedMessage.innerContent}`]: {
padding: `${pxToRem(8)} ${pxToRem(16)}`,
},
[`& .${classNames.threadedMessage.author}`]: {
padding: `${pxToRem(5)} ${pxToRem(5)} ${pxToRem(5)} 0`,
},
[`& .${classNames.threadedMessage.timestamp}`]: {
padding: pxToRem(5),
color: siteVariables.colorScheme.default.foreground2,
},
},
[`&.${classNames.threadReplies.message}`]: {
width: '100%',
minWidth: '100%',
margin: `${pxToRem(1)} 0`,
paddingLeft: pxToRem(60),
backgroundColor: siteVariables.colorScheme.default.background1,
},
[`&.${classNames.replyEditor}`]: {
width: '100%',
minWidth: '100%',
padding: 0,
margin: 0,
backgroundColor: siteVariables.colorScheme.default.background2,
},
}),
},
root: ({ props: p, theme: { siteVariables } }) => ({
[`&.${classNames.threadedMessage.thread}`]: {
padding: 0,
width: '100%',
},
[`&.${classNames.threadedMessage.threadBody}`]: {
width: '100%',
minWidth: '100%',
padding: 0,
margin: 0,
borderBottom: `${pxToRem(1)} solid ${siteVariables.colorScheme.default.background2}`,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
[`& .${classNames.threadedMessage.innerContent}`]: {
padding: `${pxToRem(8)} ${pxToRem(16)}`,
},
[`& .${classNames.threadedMessage.author}`]: {
padding: `${pxToRem(5)} ${pxToRem(5)} ${pxToRem(5)} 0`,
},
[`& .${classNames.threadedMessage.timestamp}`]: {
padding: pxToRem(5),
color: siteVariables.colorScheme.default.foreground2,
},
},
[`&.${classNames.threadReplies.message}`]: {
width: '100%',
width: '100%',
minWidth: '100%',
padding: 0,
margin: 0,
borderBottom: `${pxToRem(1)} solid ${siteVariables.colorScheme.default.background2}`,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
[`& .${classNames.threadedMessage.innerContent}`]: {
padding: `${pxToRem(8)} ${pxToRem(16)}`,
},
[`& .${classNames.threadedMessage.author}`]: {
padding: `${pxToRem(5)} ${pxToRem(5)} ${pxToRem(5)} 0`,
},
[`& .${classNames.threadedMessage.timestamp}`]: {
padding: pxToRem(5),
color: siteVariables.colorScheme.default.foreground2,
},
},
[`&.${classNames.threadReplies.message}`]: {
width: '100%',
minWidth: '100%',
margin: `${pxToRem(1)} 0`,
paddingLeft: pxToRem(60),
backgroundColor: siteVariables.colorScheme.default.background1,
},
[`&.${classNames.replyEditor}`]: {
width: '100%',
minWidth: '100%',
padding: 0,
margin: 0,
backgroundColor: siteVariables.colorScheme.default.background2,
root: ({ props: p, theme: { siteVariables } }) => ({
[`& .${ChatItem.slotClassNames.message}`]: {
width: '100%',
},
[`&.${classNames.threadReplies.chatItem}`]: {
padding: 0,
backgroundColor: siteVariables.colorScheme.default.background1,
},
[`& .${classNames.threadReplies.chatItemMessage}`]: {
margin: 0,
},
[`& .${classNames.threadReplies.gutter}`]: {
left: pxToRem(15),
zIndex: '1',
},
}),
},