From a88a37d0a5ada1e6343ec8fcd29cd40cd0745c59 Mon Sep 17 00:00:00 2001 From: Patrick Robertson Date: Mon, 3 Mar 2025 11:56:23 +0000 Subject: [PATCH] Hook in to RTD theme to set react theme --- docs/source/installation/settings.html | 48438 ++++++++++++++++++++++- scripts/settings/index.html | 14 +- scripts/settings/src/App.tsx | 2 +- scripts/settings/src/StepCard.tsx | 1 + scripts/settings/src/main.tsx | 39 +- scripts/settings/src/theme.tsx | 20 - scripts/settings/vite.config.ts | 4 + 7 files changed, 48282 insertions(+), 236 deletions(-) delete mode 100644 scripts/settings/src/theme.tsx diff --git a/docs/source/installation/settings.html b/docs/source/installation/settings.html index 832938d..b1bf1ff 100644 --- a/docs/source/installation/settings.html +++ b/docs/source/installation/settings.html @@ -1,4 +1,81 @@ - +`; +const rotateAnimation = typeof circularRotateKeyframe !== "string" ? css` + animation: ${circularRotateKeyframe} 1.4s linear infinite; + ` : null; +const dashAnimation = typeof circularDashKeyframe !== "string" ? css` + animation: ${circularDashKeyframe} 1.4s ease-in-out infinite; + ` : null; +const useUtilityClasses$u = (ownerState) => { + const { + classes, + variant, + color: color2, + disableShrink + } = ownerState; + const slots = { + root: ["root", variant, `color${capitalize(color2)}`], + svg: ["svg"], + circle: ["circle", `circle${capitalize(variant)}`, disableShrink && "circleDisableShrink"] + }; + return composeClasses(slots, getCircularProgressUtilityClass, classes); +}; +const CircularProgressRoot = styled("span", { + name: "MuiCircularProgress", + slot: "Root", + overridesResolver: (props, styles2) => { + const { + ownerState + } = props; + return [styles2.root, styles2[ownerState.variant], styles2[`color${capitalize(ownerState.color)}`]]; + } +})(memoTheme(({ + theme +}) => ({ + display: "inline-block", + variants: [{ + props: { + variant: "determinate" + }, + style: { + transition: theme.transitions.create("transform") + } + }, { + props: { + variant: "indeterminate" + }, + style: rotateAnimation || { + animation: `${circularRotateKeyframe} 1.4s linear infinite` + } + }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({ + props: { + color: color2 + }, + style: { + color: (theme.vars || theme).palette[color2].main + } + }))] +}))); +const CircularProgressSVG = styled("svg", { + name: "MuiCircularProgress", + slot: "Svg", + overridesResolver: (props, styles2) => styles2.svg +})({ + display: "block" + // Keeps the progress centered +}); +const CircularProgressCircle = styled("circle", { + name: "MuiCircularProgress", + slot: "Circle", + overridesResolver: (props, styles2) => { + const { + ownerState + } = props; + return [styles2.circle, styles2[`circle${capitalize(ownerState.variant)}`], ownerState.disableShrink && styles2.circleDisableShrink]; + } +})(memoTheme(({ + theme +}) => ({ + stroke: "currentColor", + variants: [{ + props: { + variant: "determinate" + }, + style: { + transition: theme.transitions.create("stroke-dashoffset") + } + }, { + props: { + variant: "indeterminate" + }, + style: { + // Some default value that looks fine waiting for the animation to kicks in. + strokeDasharray: "80px, 200px", + strokeDashoffset: 0 + // Add the unit to fix a Edge 16 and below bug. + } + }, { + props: ({ + ownerState + }) => ownerState.variant === "indeterminate" && !ownerState.disableShrink, + style: dashAnimation || { + // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used. + animation: `${circularDashKeyframe} 1.4s ease-in-out infinite` + } + }] +}))); +const CircularProgress = /* @__PURE__ */ reactExports.forwardRef(function CircularProgress2(inProps, ref) { + const props = useDefaultProps({ + props: inProps, + name: "MuiCircularProgress" + }); + const { + className, + color: color2 = "primary", + disableShrink = false, + size = 40, + style: style2, + thickness = 3.6, + value = 0, + variant = "indeterminate", + ...other + } = props; + const ownerState = { + ...props, + color: color2, + disableShrink, + size, + thickness, + value, + variant + }; + const classes = useUtilityClasses$u(ownerState); + const circleStyle = {}; + const rootStyle = {}; + const rootProps = {}; + if (variant === "determinate") { + const circumference = 2 * Math.PI * ((SIZE - thickness) / 2); + circleStyle.strokeDasharray = circumference.toFixed(3); + rootProps["aria-valuenow"] = Math.round(value); + circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`; + rootStyle.transform = "rotate(-90deg)"; + } + return /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressRoot, { + className: clsx(classes.root, className), + style: { + width: size, + height: size, + ...rootStyle, + ...style2 + }, + ownerState, + ref, + role: "progressbar", + ...rootProps, + ...other, + children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressSVG, { + className: classes.svg, + ownerState, + viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`, + children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressCircle, { + className: classes.circle, + style: circleStyle, + ownerState, + cx: SIZE, + cy: SIZE, + r: (SIZE - thickness) / 2, + fill: "none", + strokeWidth: thickness + }) + }) + }); +}); +function getIconButtonUtilityClass(slot) { + return generateUtilityClass("MuiIconButton", slot); +} +const iconButtonClasses = generateUtilityClasses("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]); +const useUtilityClasses$t = (ownerState) => { + const { + classes, + disabled, + color: color2, + edge, + size, + loading + } = ownerState; + const slots = { + root: ["root", loading && "loading", disabled && "disabled", color2 !== "default" && `color${capitalize(color2)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`], + loadingIndicator: ["loadingIndicator"], + loadingWrapper: ["loadingWrapper"] + }; + return composeClasses(slots, getIconButtonUtilityClass, classes); +}; +const IconButtonRoot = styled(ButtonBase, { + name: "MuiIconButton", + slot: "Root", + overridesResolver: (props, styles2) => { + const { + ownerState + } = props; + return [styles2.root, ownerState.loading && styles2.loading, ownerState.color !== "default" && styles2[`color${capitalize(ownerState.color)}`], ownerState.edge && styles2[`edge${capitalize(ownerState.edge)}`], styles2[`size${capitalize(ownerState.size)}`]]; + } +})(memoTheme(({ + theme +}) => ({ + textAlign: "center", + flex: "0 0 auto", + fontSize: theme.typography.pxToRem(24), + padding: 8, + borderRadius: "50%", + color: (theme.vars || theme).palette.action.active, + transition: theme.transitions.create("background-color", { + duration: theme.transitions.duration.shortest + }), + variants: [{ + props: (props) => !props.disableRipple, + style: { + "--IconButton-hoverBg": theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity), + "&:hover": { + backgroundColor: "var(--IconButton-hoverBg)", + // Reset on touch devices, it doesn't add specificity + "@media (hover: none)": { + backgroundColor: "transparent" + } + } + } + }, { + props: { + edge: "start" + }, + style: { + marginLeft: -12 + } + }, { + props: { + edge: "start", + size: "small" + }, + style: { + marginLeft: -3 + } + }, { + props: { + edge: "end" + }, + style: { + marginRight: -12 + } + }, { + props: { + edge: "end", + size: "small" + }, + style: { + marginRight: -3 + } + }] +})), memoTheme(({ + theme +}) => ({ + variants: [{ + props: { + color: "inherit" + }, + style: { + color: "inherit" + } + }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({ + props: { + color: color2 + }, + style: { + color: (theme.vars || theme).palette[color2].main + } + })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({ + props: { + color: color2 + }, + style: { + "--IconButton-hoverBg": theme.vars ? `rgba(${(theme.vars || theme).palette[color2].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color2].main, theme.palette.action.hoverOpacity) + } + })), { + props: { + size: "small" + }, + style: { + padding: 5, + fontSize: theme.typography.pxToRem(18) + } + }, { + props: { + size: "large" + }, + style: { + padding: 12, + fontSize: theme.typography.pxToRem(28) + } + }], + [`&.${iconButtonClasses.disabled}`]: { + backgroundColor: "transparent", + color: (theme.vars || theme).palette.action.disabled + }, + [`&.${iconButtonClasses.loading}`]: { + color: "transparent" + } +}))); +const IconButtonLoadingIndicator = styled("span", { + name: "MuiIconButton", + slot: "LoadingIndicator", + overridesResolver: (props, styles2) => styles2.loadingIndicator +})(({ + theme +}) => ({ + display: "none", + position: "absolute", + visibility: "visible", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + color: (theme.vars || theme).palette.action.disabled, + variants: [{ + props: { + loading: true + }, + style: { + display: "flex" + } + }] +})); +const IconButton = /* @__PURE__ */ reactExports.forwardRef(function IconButton2(inProps, ref) { + const props = useDefaultProps({ + props: inProps, + name: "MuiIconButton" + }); + const { + edge = false, + children, + className, + color: color2 = "default", + disabled = false, + disableFocusRipple = false, + size = "medium", + id: idProp, + loading = null, + loadingIndicator: loadingIndicatorProp, + ...other + } = props; + const loadingId = useId(idProp); + const loadingIndicator = loadingIndicatorProp ?? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { + "aria-labelledby": loadingId, + color: "inherit", + size: 16 + }); + const ownerState = { + ...props, + edge, + color: color2, + disabled, + disableFocusRipple, + loading, + loadingIndicator, + size + }; + const classes = useUtilityClasses$t(ownerState); + return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconButtonRoot, { + id: loading ? loadingId : idProp, + className: clsx(classes.root, className), + centerRipple: true, + focusRipple: !disableFocusRipple, + disabled: disabled || loading, + ref, + ...other, + ownerState, + children: [typeof loading === "boolean" && // use plain HTML span to minimize the runtime overhead + /* @__PURE__ */ jsxRuntimeExports.jsx("span", { + className: classes.loadingWrapper, + style: { + display: "contents" + }, + children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconButtonLoadingIndicator, { + className: classes.loadingIndicator, + ownerState, + children: loading && loadingIndicator + }) + }), children] + }); +}); +function getTypographyUtilityClass(slot) { + return generateUtilityClass("MuiTypography", slot); +} +const typographyClasses = generateUtilityClasses("MuiTypography", ["root", "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "inherit", "button", "caption", "overline", "alignLeft", "alignRight", "alignCenter", "alignJustify", "noWrap", "gutterBottom", "paragraph"]); +const v6Colors = { + primary: true, + secondary: true, + error: true, + info: true, + success: true, + warning: true, + textPrimary: true, + textSecondary: true, + textDisabled: true +}; +const extendSxProp = internal_createExtendSxProp(); +const useUtilityClasses$s = (ownerState) => { + const { + align, + gutterBottom, + noWrap, + paragraph: paragraph2, + variant, + classes + } = ownerState; + const slots = { + root: ["root", variant, ownerState.align !== "inherit" && `align${capitalize(align)}`, gutterBottom && "gutterBottom", noWrap && "noWrap", paragraph2 && "paragraph"] + }; + return composeClasses(slots, getTypographyUtilityClass, classes); +}; +const TypographyRoot = styled("span", { + name: "MuiTypography", + slot: "Root", + overridesResolver: (props, styles2) => { + const { + ownerState + } = props; + return [styles2.root, ownerState.variant && styles2[ownerState.variant], ownerState.align !== "inherit" && styles2[`align${capitalize(ownerState.align)}`], ownerState.noWrap && styles2.noWrap, ownerState.gutterBottom && styles2.gutterBottom, ownerState.paragraph && styles2.paragraph]; + } +})(memoTheme(({ + theme +}) => { + var _a; + return { + margin: 0, + variants: [{ + props: { + variant: "inherit" + }, + style: { + // Some elements, like