@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
1,063 lines • 51.2 kB
JavaScript
import { createTheme, } from "./Components/CoreComponents";
import { baseSpacing, blackAlpha, borderRadiusBase, borderRadiusFull, borderRadiusLg, borderRadiusMd, borderRadiusSm, borderRadiusXl, btnBorderRadius, btnFontFamily, btnFontWeight, btnTextTransform, colorMainColor, danger, defaultButtonActiveBackgroundColor, defaultButtonColor, defaultButtonDarkActiveBackgroundColor, defaultButtonDarkColor, defaultButtonDarkHoverBackgroundColor, defaultButtonHoverBackgroundColor, focusColor, fontColorH1, fontColorH2, fontColorH3, fontColorH4, fontColorH5, fontFamilyBase, fontFamilyH1, fontFamilyH2, fontFamilyH3, fontFamilyH4, fontFamilyH5, fontSizeH1, fontSizeH2, fontSizeH3, fontSizeH4, fontSizeH5, fontStyleH1, fontStyleH2, fontStyleH3, fontStyleH4, fontStyleH5, fontWeightBold, fontWeightH1, fontWeightH2, fontWeightH3, fontWeightH4, fontWeightH5, genAiGradient, gray, iconSizeDefault, iconSizeSmall, info, mainColor, neutral, primaryButtonBg, primaryButtonColor, purple, semanticTokens, shadow2Xl, shadowBase, shadowDarkLg, shadowLg, shadowMd, shadowOutline, shadowSm, shadowXl, strokeLight, success, tabFocusShadow, themePrimary, warning, whiteAlpha, } from "./Foundations";
import { getGhostButtonBackgroundColor, getSolidButtonBackgroundColor, } from "./Foundations/buttons";
import { fontSizes } from "./Foundations/fontSizes";
import { fontWeights } from "./Foundations/fontWeights";
// In this file we override the default material ui theme
// we map the css variables to javascript variables
const documentDirection = document.dir !== "" ? document.dir : "ltr";
export const getStyles = (isDarkTheme) => {
const semanticColor = isDarkTheme ? "dark" : "default";
return {
direction: documentDirection,
palette: {
primary: {
light: themePrimary[300],
main: themePrimary[500],
dark: themePrimary[700],
},
error: {
light: danger[300],
main: danger[500],
dark: danger[700],
},
warning: {
light: warning[300],
main: warning[500],
dark: warning[700],
},
info: {
light: info[300],
main: info[500],
dark: info[700],
},
success: {
light: success[300],
main: success[500],
dark: success[700],
},
mode: isDarkTheme ? "dark" : "light",
},
shadows: [
"none",
shadowSm,
shadowSm,
shadowBase,
shadowBase,
shadowBase,
shadowBase,
shadowMd,
shadowMd,
shadowMd,
shadowMd,
shadowMd,
shadowLg,
shadowLg,
shadowLg,
shadowLg,
shadowXl,
shadowXl,
shadowXl,
shadowXl,
shadow2Xl,
shadow2Xl,
shadow2Xl,
shadow2Xl,
shadowDarkLg,
],
typography: {
fontFamily: fontFamilyBase,
fontWeightLight: fontWeights.normal,
fontWeightRegular: fontWeights.normal,
fontWeightMedium: fontWeights.semibold,
fontWeightBold: fontWeights.semibold,
h1: {
fontFamily: fontFamilyH1,
fontWeight: fontWeightH1,
fontStyle: fontStyleH1,
color: isDarkTheme ? "white" : fontColorH1,
fontSize: fontSizeH1,
marginBottom: "1em",
lineHeight: 1.25,
},
h2: {
fontFamily: fontFamilyH2,
fontWeight: fontWeightH2,
fontStyle: fontStyleH2,
color: isDarkTheme ? "white" : fontColorH2,
fontSize: fontSizeH2,
marginBottom: "1em",
lineHeight: 1.25,
},
h3: {
fontFamily: fontFamilyH3,
fontWeight: fontWeightH3,
fontStyle: fontStyleH3,
color: isDarkTheme ? "white" : fontColorH3,
fontSize: fontSizeH3,
marginBottom: "1em",
lineHeight: 1.25,
},
h4: {
fontFamily: fontFamilyH4,
fontWeight: fontWeightH4,
fontStyle: fontStyleH4,
color: isDarkTheme ? "white" : fontColorH4,
fontSize: fontSizeH4,
marginBottom: "1em",
lineHeight: 1.25,
},
h5: {
fontFamily: fontFamilyH5,
fontWeight: fontWeightH5,
fontStyle: fontStyleH5,
color: isDarkTheme ? "white" : fontColorH5,
fontSize: fontSizeH5,
marginBottom: "1em",
lineHeight: 1.25,
},
h6: {
fontWeight: fontWeights.semibold,
color: semanticTokens.bodyText[semanticColor],
},
subtitle1: {
fontFamily: fontFamilyBase,
fontWeight: fontWeights.semibold,
color: semanticTokens.subtleText[semanticColor],
textTransform: "uppercase",
fontSize: fontSizes.sm,
},
subtitle2: {
fontFamily: fontFamilyBase,
},
body1: {
fontFamily: fontFamilyBase,
textAlign: "left",
fontSize: "0.875rem",
},
body2: {
fontFamily: fontFamilyBase,
color: semanticTokens.subtleText[semanticColor],
},
caption: {
fontFamily: fontFamilyBase,
},
overline: {
fontFamily: fontFamilyBase,
},
},
components: {
MuiDialog: {
styleOverrides: {
root: {
form: {
display: "flex",
flexDirection: "column",
maxHeight: "100%",
overflow: "hidden",
},
},
container: {
alignItems: "flex-start",
},
paper: {
boxShadow: shadowLg,
margin: "4rem 0",
maxHeight: "calc(100vh - 8rem)",
borderRadius: `${borderRadiusLg} !important`,
"@media (max-width: 600px)": {
borderRadius: "0 !important",
width: "100vw",
height: "100vh",
maxHeight: "100vh",
margin: 0,
form: {
flex: 1,
},
"[class*=MuiDialogContent]": {
maxHeight: "none !important",
},
},
},
paperFullScreen: {
margin: 24,
height: "calc(100vh - 48px)",
},
},
},
MuiAlert: {
styleOverrides: {
root: {
width: "100%",
borderRadius: borderRadiusMd,
marginBottom: "1rem",
"&.MuiAlert-colorInfo": {
backgroundColor: semanticTokens.infoBg[semanticColor],
"& .MuiAlert-icon": {
color: semanticTokens.infoFg[semanticColor],
},
},
"&.MuiAlert-colorSuccess": {
backgroundColor: semanticTokens.successBg[semanticColor],
"& .MuiAlert-icon": {
color: semanticTokens.successFg[semanticColor],
},
},
"&.MuiAlert-colorWarning": {
backgroundColor: semanticTokens.warningBg[semanticColor],
"& .MuiAlert-icon": {
color: semanticTokens.warningFg[semanticColor],
},
},
"&.MuiAlert-colorError": {
backgroundColor: semanticTokens.dangerBg[semanticColor],
"& .MuiAlert-icon": {
color: semanticTokens.dangerFg[semanticColor],
},
},
"&.MuiAlert-colorNeutral": {
backgroundColor: semanticTokens.neutralBg[semanticColor],
"& .MuiAlert-icon": {
color: semanticTokens.neutralFg[semanticColor],
},
},
"&.MuiAlert-colorAi": {
backgroundImage: genAiGradient[100],
color: semanticTokens.bodyText.default,
"& .MuiAlert-icon": {
color: purple[500],
},
},
".MuiAlertTitle-root": {
margin: 0,
"+ .MuiAlert-inner-content": {
marginTop: "0.5rem",
},
},
"&.MuiAlert-collapsed": {},
".MuiAlert-message": {},
},
},
},
MuiListSubheader: {
styleOverrides: {
root: {
lineHeight: "32px",
},
},
},
MuiSwitch: {
styleOverrides: {
root: {
marginTop: "0.70rem",
width: "2.25rem",
height: "1.25rem",
padding: 0,
display: "flex",
"& .MuiSwitch-switchBase": {
padding: 2,
"&.Mui-disabled": {
cursor: "not-allowed",
"& .MuiSwitch-thumb": {
backgroundColor: gray[50],
cursor: "not-allowed",
},
"& + .MuiSwitch-track": {
opacity: "0.4 !important",
cursor: "not-allowed",
},
},
"&.Mui-checked": {
transform: "translateX(16px)",
color: "#fff",
"& + .MuiSwitch-track": {
backgroundColor: success[500],
opacity: 1,
},
},
},
"& .MuiSwitch-thumb": {
boxShadow: "0 2px 4px 0 rgb(0 35 11 / 20%)",
width: "1rem",
height: "1rem",
},
"& .MuiSwitch-track": {
borderRadius: borderRadiusFull,
opacity: 1,
backgroundColor: isDarkTheme ? whiteAlpha[400] : blackAlpha[400],
boxSizing: "border-box",
},
"& + label": {
marginTop: "0.5rem",
},
},
},
},
MuiButton: {
styleOverrides: {
// Common button styles
root: {
borderRadius: btnBorderRadius,
fontSize: fontSizes.md,
whiteSpace: "nowrap",
fontFamily: btnFontFamily,
fontWeight: btnFontWeight,
textTransform: btnTextTransform,
lineHeight: 1.2,
display: "inline-flex",
alignItems: "center",
position: "relative",
padding: 0,
paddingInlineStart: "0.875rem",
paddingInlineEnd: "0.875rem",
height: "2.25rem",
gap: "0.5rem",
maxWidth: "100%",
overflow: "hidden",
textOverflow: "ellipsis",
"tr td &": {
maxWidth: "unset",
},
".blok-button-label": {
overflow: "hidden",
maxWidth: "100%",
textOverflow: "ellipsis",
lineHeight: 1.75,
},
"&.Mui-disabled": {
opacity: 0.4,
cursor: "not-allowed",
boxShadow: "none",
},
" .m-icon, .MuiSvgIcon-root": {
fontSize: `${iconSizeDefault} !important`,
},
// Icon button overriders ************************************************************/
"&.icon-button": {
padding: 0,
height: "2.25rem",
minWidth: "2.25rem",
borderRadius: btnBorderRadius,
overflow: "visible",
"&.MuiButton-sizeLarge": {
height: "3rem",
minWidth: "3rem",
},
"&.MuiButton-sizeSmall": {
height: "2rem",
minWidth: "2rem",
},
" > .button-count": {
position: "absolute",
right: "-2px",
top: 0,
},
},
".MuiButton-endIcon, .MuiButton-startIcon": {
margin: 0,
fontSize: iconSizeDefault,
},
"&.MuiButton-colorPrimary:not(.MuiButton-contained)": {
".MuiCircularProgress-root": {
color: `${colorMainColor} !important`,
},
},
"&:focus-visible": {
boxShadow: shadowOutline,
},
// Ghost and outline variants ************************************************************/
"&.MuiButton-textAi, &.MuiButton-outlinedAi": {
color: isDarkTheme ? purple[200] : purple[600],
"&:hover": {
backgroundColor: getGhostButtonBackgroundColor("purple", isDarkTheme, 100, 100),
},
"&:active, &.button-active": {
backgroundColor: getGhostButtonBackgroundColor("purple", isDarkTheme, 200, 200),
},
},
"&.MuiButton-textInherit, &.MuiButton-outlinedInherit": {
color: isDarkTheme ? defaultButtonDarkColor : defaultButtonColor,
"&:hover": {
backgroundColor: isDarkTheme
? defaultButtonDarkHoverBackgroundColor
: defaultButtonHoverBackgroundColor,
},
"&:active, &.button-active": {
backgroundColor: isDarkTheme
? defaultButtonDarkActiveBackgroundColor
: defaultButtonActiveBackgroundColor,
},
},
"&.MuiButton-textPrimary, &.MuiButton-outlinedPrimary": {
color: isDarkTheme ? themePrimary[200] : themePrimary[600],
"&:hover": {
backgroundColor: getGhostButtonBackgroundColor("primary", isDarkTheme, 100, 100),
},
"&:active, &.button-active": {
backgroundColor: getGhostButtonBackgroundColor("primary", isDarkTheme, 200, 200),
},
},
"&.MuiButton-textError, &.MuiButton-outlinedError": {
color: isDarkTheme ? danger[200] : danger[600],
"&:hover": {
backgroundColor: getGhostButtonBackgroundColor("danger", isDarkTheme, 200, 100),
},
"&:active, &.button-active": {
backgroundColor: getGhostButtonBackgroundColor("danger", isDarkTheme, 200, 200),
},
},
"&.MuiButton-textWarning, &.MuiButton-outlinedWarning": {
color: isDarkTheme ? warning[200] : warning[600],
"&:hover": {
backgroundColor: getGhostButtonBackgroundColor("warning", isDarkTheme, 200, 100),
},
"&:active, &.button-active": {
backgroundColor: getGhostButtonBackgroundColor("warning", isDarkTheme, 200, 200),
},
},
"&.MuiButton-textInfo, &.MuiButton-outlinedInfo": {
color: isDarkTheme ? info[200] : info[600],
"&:hover": {
backgroundColor: getGhostButtonBackgroundColor("info", isDarkTheme, 200, 100),
},
"&:active, &.button-active": {
backgroundColor: getGhostButtonBackgroundColor("info", isDarkTheme, 200, 200),
},
},
"&.MuiButton-textSuccess, &.MuiButton-outlinedSuccess": {
color: isDarkTheme ? success[200] : success[600],
"&:hover": {
backgroundColor: getGhostButtonBackgroundColor("success", isDarkTheme, 200, 100),
},
"&:active, &.button-active": {
backgroundColor: getGhostButtonBackgroundColor("success", isDarkTheme, 200, 200),
},
},
"&.MuiButton-outlined": {
borderColor: semanticTokens.borderColor[semanticColor],
},
// Solid variants ************************************************************/
"&.MuiButton-contained": {
color: isDarkTheme ? blackAlpha[900] : "white",
".MuiCircularProgress-root": {
color: "white",
},
},
"&.MuiButton-containedAi": {
backgroundColor: getSolidButtonBackgroundColor("purple", isDarkTheme, 200, 500),
"&:hover": {
backgroundColor: getSolidButtonBackgroundColor("purple", isDarkTheme, 300, 600),
},
"&:active, &.button-active": {
backgroundColor: getSolidButtonBackgroundColor("purple", isDarkTheme, 400, 700),
},
},
"&.MuiButton-containedInherit": {
backgroundColor: getSolidButtonBackgroundColor("neutral", isDarkTheme, 200, 500),
"&:hover": {
backgroundColor: getSolidButtonBackgroundColor("neutral", isDarkTheme, 300, 600),
},
"&:active, &.button-active": {
backgroundColor: getSolidButtonBackgroundColor("neutral", isDarkTheme, 400, 700),
},
},
"&.MuiButton-containedError": {
backgroundColor: getSolidButtonBackgroundColor("danger", isDarkTheme, 200, 500),
"&:hover": {
backgroundColor: getSolidButtonBackgroundColor("danger", isDarkTheme, 300, 600),
},
"&:active, &.button-active": {
backgroundColor: getSolidButtonBackgroundColor("danger", isDarkTheme, 400, 700),
},
},
"&.MuiButton-containedWarning": {
backgroundColor: getSolidButtonBackgroundColor("warning", isDarkTheme, 200, 500),
"&:hover": {
backgroundColor: getSolidButtonBackgroundColor("warning", isDarkTheme, 300, 600),
},
"&:active, &.button-active": {
backgroundColor: getSolidButtonBackgroundColor("warning", isDarkTheme, 400, 700),
},
},
"&.MuiButton-containedInfo": {
backgroundColor: getSolidButtonBackgroundColor("info", isDarkTheme, 200, 500),
"&:hover": {
backgroundColor: getSolidButtonBackgroundColor("info", isDarkTheme, 300, 600),
},
"&:active, &.button-active": {
backgroundColor: getSolidButtonBackgroundColor("info", isDarkTheme, 400, 700),
},
},
"&.MuiButton-containedSuccess": {
backgroundColor: getSolidButtonBackgroundColor("success", isDarkTheme, 200, 500),
"&:hover": {
backgroundColor: getSolidButtonBackgroundColor("success", isDarkTheme, 300, 600),
},
"&:active, &.button-active": {
backgroundColor: getSolidButtonBackgroundColor("success", isDarkTheme, 400, 700),
},
},
"&.MuiButton-containedPrimary": {
color: primaryButtonColor,
backgroundColor: primaryButtonBg[500],
"&:hover": {
backgroundColor: primaryButtonBg[600],
},
"&:active, &.button-active": {
backgroundColor: primaryButtonBg[700],
},
},
// Button shadows.
"&.shadow-sm": {
boxShadow: shadowSm,
},
"&.shadow-md": {
boxShadow: shadowMd,
},
"&.shadow-lg": {
boxShadow: shadowLg,
},
"&.shadow-xl": {
boxShadow: shadowXl,
},
"> .button-count": {
color: mainColor,
backgroundColor: themePrimary[100],
borderRadius: borderRadiusFull,
padding: "3px 5px",
fontSize: 10,
fontWeight: fontWeightBold,
lineHeight: 1,
zIndex: 10,
minWidth: 16,
textAlign: "center",
fontStyle: "normal",
height: 17,
},
variants: [
// Extra small variant ************************************************************/
{
props: { size: "extraSmall" },
style: {
height: "1.5rem",
paddingInlineStart: "0.5rem",
paddingInlineEnd: "0.5rem",
fontSize: fontSizes.xs,
lineHeight: 1.2,
gap: "0.25rem",
" .m-icon, .MuiSvgIcon-root": {
fontSize: `${iconSizeSmall} !important`,
},
},
},
// Toggle variant ************************************************************/
{
props: { variant: "toggle" },
style: {
color: isDarkTheme
? defaultButtonDarkColor
: defaultButtonColor,
"&:hover": {
backgroundColor: isDarkTheme
? defaultButtonDarkHoverBackgroundColor
: defaultButtonHoverBackgroundColor,
},
"&:active, &.button-active": {
color: isDarkTheme ? themePrimary[200] : themePrimary[600],
backgroundColor: getGhostButtonBackgroundColor("primary", isDarkTheme, 100, 100),
},
"&.Mui-disabled": {
backgroundColor: "transparent",
color: semanticTokens.neutralFg[semanticColor],
},
},
},
// AI variant ************************************************************/
{
props: { variant: "ai" },
style: {
backgroundSize: "250% 100% !important",
color: isDarkTheme ? blackAlpha[900] : "white",
transition: "background-position 0.2s",
background: isDarkTheme
? genAiGradient[200]
: genAiGradient[500],
"&:hover": {
background: isDarkTheme
? genAiGradient[300]
: genAiGradient[500],
backgroundPosition: "100% 0%",
},
"&.Mui-disabled": {
color: isDarkTheme ? blackAlpha[900] : "white",
},
"&:active, &.button-active": {
background: isDarkTheme
? genAiGradient[400]
: genAiGradient[700],
backgroundPosition: "100% 0%",
},
},
},
{
props: { variant: "navigation" },
style: {
backgroundColor: semanticTokens.bodyBg[semanticColor],
borderRadius: borderRadiusMd,
color: semanticTokens.neutralFg[semanticColor],
"&:hover": {
backgroundColor: isDarkTheme ? whiteAlpha[100] : gray[100],
},
"&:active, &.button-active": {
color: themePrimary[600],
backgroundColor: themePrimary[100],
},
"&.Mui-disabled": {
backgroundColor: "transparent",
color: semanticTokens.neutralFg[semanticColor],
},
},
},
{
props: { variant: "filter" },
style: {
backgroundColor: semanticTokens.bodyBg[semanticColor],
borderRadius: borderRadiusMd,
color: semanticTokens.neutralFg[semanticColor],
border: `1px solid ${semanticTokens.borderColor[semanticColor]}`,
"&:hover": {
backgroundColor: isDarkTheme ? whiteAlpha[100] : gray[100],
},
"&:active, &.button-active": {
color: themePrimary[600],
backgroundColor: themePrimary[100],
},
"&.Mui-disabled": {
backgroundColor: "transparent",
color: semanticTokens.neutralFg[semanticColor],
},
},
},
{
props: { variant: "link" },
style: {
padding: 0,
height: "auto",
lineHeight: "inherit",
verticalAlign: "baseline",
"&:hover": {
textDecoration: "underline",
},
"&.MuiButton-colorError": {
color: isDarkTheme ? danger[200] : danger[500],
"&:active, &.button-active": {
color: isDarkTheme ? danger[400] : danger[700],
},
},
"&.MuiButton-colorWarning": {
color: isDarkTheme ? warning[200] : warning[500],
"&:active, &.button-active": {
color: isDarkTheme ? warning[400] : warning[700],
},
},
"&.MuiButton-colorInfo": {
color: isDarkTheme ? info[200] : info[500],
"&:active, &.button-active": {
color: isDarkTheme ? info[400] : info[700],
},
},
"&.MuiButton-colorSuccess": {
color: isDarkTheme ? success[200] : success[500],
"&:active, &.button-active": {
color: isDarkTheme ? success[400] : success[700],
},
},
"&.MuiButton-colorInherit": {
color: isDarkTheme ? whiteAlpha[500] : neutral[500],
"&:active, &.button-active": {
color: isDarkTheme ? whiteAlpha[700] : neutral[700],
},
},
"&.MuiButton-colorPrimary": {
color: isDarkTheme ? themePrimary[200] : themePrimary[600],
"&:active, &.button-active": {
color: isDarkTheme
? themePrimary[400]
: themePrimary[700],
},
},
"&.MuiButton-colorAi": {
color: isDarkTheme ? purple[200] : purple[600],
"&:active, &.button-active": {
color: isDarkTheme ? purple[400] : purple[700],
},
},
"&.icon-button": {
"&:hover:after": {
content: "''",
position: "absolute",
display: "block",
borderBottom: "1px solid currentColor",
bottom: "0",
width: iconSizeDefault,
},
},
},
},
],
},
sizeLarge: {
height: "3rem",
paddingInlineStart: "1.5rem",
paddingInlineEnd: "1.5rem",
},
sizeSmall: {
height: "2rem",
paddingInlineStart: "0.75rem",
paddingInlineEnd: "0.75rem",
" .m-icon, .MuiSvgIcon-root": {
fontSize: `${iconSizeDefault} !important`,
},
},
},
},
MuiIconButton: {
styleOverrides: {
root: {
"&.Mui-disabled": {
backgroundColor: isDarkTheme
? `${whiteAlpha[200]} !important`
: `${blackAlpha[100]} !important`,
},
},
},
},
MuiCheckbox: {
styleOverrides: {
root: {
"&.Mui-disabled": {
backgroundColor: "transparent !important",
},
},
},
},
MuiFilledInput: {
styleOverrides: {
root: {
backgroundColor: `${semanticTokens.bodyBg[semanticColor]} !important`,
border: `1px solid ${semanticTokens.borderColorA11y[semanticColor]}`,
borderRadius: `${borderRadiusMd} !important`,
minHeight: "2.25rem",
color: semanticTokens.bodyText[semanticColor],
fontSize: fontSizes.md,
"&:hover, &:hover:focus-visible": {
backgroundColor: semanticTokens.bodyBg[semanticColor],
border: `1px solid ${semanticTokens.neutralColor600[semanticColor]}`,
color: semanticTokens.bodyText[semanticColor],
},
"&.Mui-disabled": {
border: `1px solid ${semanticTokens.neutralColor600[semanticColor]}`,
backgroundColor: blackAlpha[100],
color: semanticTokens.subtleText[semanticColor],
"&::placeholder": {
color: "transparent",
},
},
"&.Mui-focused": {
backgroundColor: `${semanticTokens.bodyBg[semanticColor]} !important`,
border: `1px solid ${focusColor} !important`,
color: semanticTokens.bodyText[semanticColor],
},
"&.Mui-error, &.Mui-error.Mui-focused": {
backgroundColor: `${semanticTokens.bodyBg[semanticColor]} !important`,
border: `1px solid ${semanticTokens.red[semanticColor]} !important`,
color: semanticTokens.bodyText[semanticColor],
},
"&::placeholder": {
color: semanticTokens.placeholderColor[semanticColor],
},
},
input: {
padding: "0.5rem 1rem",
lineHeight: "1.2em",
height: "1.3em",
},
multiline: {
padding: "0.5rem 1rem",
textArea: {
minHeight: 68,
padding: 0,
},
},
underline: {
"&:after": {
display: "none",
},
"&:before": {
display: "none",
},
},
},
},
MuiFormHelperText: {
styleOverrides: {
root: {
fontSize: fontSizes.sm,
lineHeight: "1.2em",
marginTop: baseSpacing,
color: semanticTokens.subtleText[semanticColor],
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
fontWeight: fontWeights.semibold,
color: isDarkTheme
? whiteAlpha[700]
: semanticTokens.subtleText[semanticColor],
},
asterisk: {
color: semanticTokens.red[semanticColor],
},
},
},
MuiTooltip: {
styleOverrides: {
tooltip: {
fontSize: ".85rem",
},
},
},
MuiPaper: {
styleOverrides: {
rounded: { borderRadius: `${borderRadiusMd} !important` },
},
},
MuiTab: {
styleOverrides: {
root: {
fontSize: `${fontSizes.md} !important`,
minWidth: "0 !important",
textTransform: btnTextTransform,
color: semanticTokens.neutralFg[semanticColor],
backgroundColor: "transparent",
minHeight: "2.25rem",
padding: "8px 16px",
"&:hover, &:hover:focus-visible": {
backgroundColor: blackAlpha[100],
},
"&:focus": {
backgroundColor: "transparent",
},
"&:focus-visible, &.Mui-focusVisible": {
backgroundColor: "transparent",
boxShadow: tabFocusShadow,
},
"&:active, &:active:focus-visible": {
backgroundColor: blackAlpha[200],
},
"&.Mui-selected": {
color: semanticTokens.primaryFg[semanticColor],
backgroundColor: "transparent",
"&:hover, &:hover:focus-visible": {
backgroundColor: `${themePrimary[100]} !important`,
},
"&:focus": {
backgroundColor: "transparent",
},
"&:focus-visible, &.Mui-focusVisible": {
backgroundColor: "transparent",
boxShadow: tabFocusShadow,
},
"&:active, &:active:focus-visible": {
backgroundColor: `${themePrimary[200]} !important`,
},
},
"&.Mui-disabled": {
color: blackAlpha[400],
backgroundColor: "transparent",
},
},
labelIcon: {
fontSize: `${fontSizes.sm} !important`,
minHeight: "0 !important",
"& svg": {
marginBottom: `0 !important`,
},
},
},
},
MuiMenu: {
styleOverrides: {
root: {
".MuiMenu-paper": {
border: `1px solid ${semanticTokens.borderColor[semanticColor]}`,
borderRadius: borderRadiusMd,
boxShadow: `${shadowMd} !important`,
},
".MuiDivider-root": {
borderColor: `${semanticTokens.borderColor[semanticColor]} !important`,
opacity: 0.6,
},
".MuiMenu-list": {
minWidth: "14rem",
},
},
},
},
MuiMenuItem: {
styleOverrides: {
root: {
color: semanticTokens.bodyText[semanticColor],
padding: "0.5rem 0.875rem",
fontSize: "0.875rem",
"&:hover, &:focus": {
backgroundColor: isDarkTheme ? whiteAlpha[100] : blackAlpha[100],
},
"&:active": {
backgroundColor: isDarkTheme ? whiteAlpha[200] : blackAlpha[200],
},
"&.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus, &.Mui-selected:active": {
backgroundColor: semanticTokens.primaryBg[semanticColor],
color: semanticTokens.primaryFg[semanticColor],
".MuiListItemIcon-root": {
color: `${semanticTokens.primaryFg[semanticColor]} !important`,
},
},
".m-icon:not([data-icon-color])": {
color: "currentColor",
},
},
},
},
MuiListItemIcon: {
styleOverrides: {
root: {
minWidth: "22px !important",
marginRight: "12px",
color: `${semanticTokens.neutralFg[semanticColor]} !important`,
},
},
},
MuiTableCell: {
styleOverrides: {
root: {
fontSize: "0.875rem",
padding: "8px 10px",
lineHeight: "1.6",
borderBottomColor: strokeLight,
},
head: {
fontSize: fontSizes.sm,
color: semanticTokens.neutralFg[semanticColor],
whiteSpace: "nowrap",
minHeight: "20px",
},
},
},
MuiCircularProgress: {
styleOverrides: {
colorPrimary: {
color: isDarkTheme ? whiteAlpha[400] : blackAlpha[400],
},
},
},
MuiLinearProgress: {
styleOverrides: {
root: {
borderRadius: borderRadiusXl,
backgroundColor: blackAlpha[100],
},
bar: {
borderRadius: borderRadiusXl,
},
},
},
MuiTabs: {
styleOverrides: {
root: {
borderBottom: `2px solid ${semanticTokens.borderColor[semanticColor]}`,
minHeight: "2.25rem",
"&:has(.MuiTabs-scroller)": {
border: "none",
},
".MuiTabs-flexContainer": {
borderBottom: `2px solid ${semanticTokens.borderColor[semanticColor]}`,
},
},
},
},
MuiAutocomplete: {
styleOverrides: {
inputRoot: {
backgroundColor: isDarkTheme ? whiteAlpha[400] : blackAlpha[100],
paddingLeft: "4px !important",
paddingTop: "4px !important",
paddingBottom: "4px !important",
},
tag: {
borderRadius: borderRadiusSm,
"&:active, &:active:focus-visible": {
backgroundColor: isDarkTheme ? whiteAlpha[500] : blackAlpha[300],
},
"&:focus-within, &:focus": {
backgroundColor: isDarkTheme
? "transparent !important"
: undefined,
borderColor: isDarkTheme ? "white" : undefined,
},
},
input: {
paddingLeft: "4px !important",
},
},
},
MuiDivider: {
styleOverrides: {
root: {
borderColor: semanticTokens.borderColor[semanticColor],
},
},
},
MuiButtonBase: {
defaultProps: {
// The props to apply
disableRipple: true, // No more ripple, on the whole application 💣!
},
},
MuiSelect: {
styleOverrides: {
select: {
minHeight: "1.2em",
},
},
},
MuiSlider: {
styleOverrides: {
thumb: {
backgroundColor: "white",
boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06)",
outline: `1px solid ${semanticTokens.borderColorA11y[semanticColor]}`,
},
rail: {
backgroundColor: blackAlpha[200],
opacity: 1,
borderRadius: borderRadiusBase,
},
track: { borderRadius: borderRadiusBase },
sizeSmall: {
height: "0.25rem",
"& .MuiSlider-thumb": {
width: "0.875rem",
height: "0.875rem",
},
},
},
},
},
};
};
export const BlokThemeLight = createTheme(getStyles(false));
export const BlokThemeDark = createTheme(getStyles(true));
//# sourceMappingURL=BlokTheme.js.map