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