From d488febf7fd61f91b9720de7c8529b2138f01590 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 30 Jun 2026 16:20:06 -0400 Subject: [PATCH 01/36] Initial commit --- .changeset/sweet-months-cross.md | 5 ++++ .changeset/thirty-trains-cross.md | 5 ++++ .../content/docs/components/mui/Progress.md | 4 +++ packages/mui/src/~components.css | 2 ++ .../src/~components/MuiCircularProgress.css | 28 +++++++++++++++++++ .../mui/src/~components/MuiLinearProgress.css | 28 +++++++++++++++++++ packages/mui/src/~createTheme.tsx | 5 ++++ packages/mui/src/~forced-colors.css | 9 ++++++ 8 files changed, 86 insertions(+) create mode 100644 .changeset/sweet-months-cross.md create mode 100644 .changeset/thirty-trains-cross.md create mode 100644 packages/mui/src/~components/MuiCircularProgress.css create mode 100644 packages/mui/src/~components/MuiLinearProgress.css diff --git a/.changeset/sweet-months-cross.md b/.changeset/sweet-months-cross.md new file mode 100644 index 000000000000..036d64414585 --- /dev/null +++ b/.changeset/sweet-months-cross.md @@ -0,0 +1,5 @@ +--- +"@stratakit/mui": patch +--- + +Styled `LinearProgress` to match the Strata visual design language. diff --git a/.changeset/thirty-trains-cross.md b/.changeset/thirty-trains-cross.md new file mode 100644 index 000000000000..c8ee1d417b9c --- /dev/null +++ b/.changeset/thirty-trains-cross.md @@ -0,0 +1,5 @@ +--- +"@stratakit/mui": patch +--- + +Styled `CircularProgress` to match the Strata visual design language. diff --git a/apps/website/src/content/docs/components/mui/Progress.md b/apps/website/src/content/docs/components/mui/Progress.md index a1c53a70cc02..6de85a736879 100644 --- a/apps/website/src/content/docs/components/mui/Progress.md +++ b/apps/website/src/content/docs/components/mui/Progress.md @@ -8,6 +8,10 @@ links: ::example{src="mui/CircularProgress.default"} +## StrataKit MUI modifications + +- The `enableTrackSlot` prop defaults to true for `CircularProgress`. + ## Examples ### Linear diff --git a/packages/mui/src/~components.css b/packages/mui/src/~components.css index 936c36787cf0..4b6a22949e2e 100644 --- a/packages/mui/src/~components.css +++ b/packages/mui/src/~components.css @@ -17,10 +17,12 @@ @import "./~components/MuiCard.css"; @import "./~components/MuiCheckbox.css"; @import "./~components/MuiChip.css"; +@import "./~components/MuiCircularProgress.css"; @import "./~components/MuiDialog.css"; @import "./~components/MuiForm.css"; @import "./~components/MuiIconButton.css"; @import "./~components/MuiInput.css"; +@import "./~components/MuiLinearProgress.css"; @import "./~components/MuiLink.css"; @import "./~components/MuiList.css"; @import "./~components/MuiMenu.css"; diff --git a/packages/mui/src/~components/MuiCircularProgress.css b/packages/mui/src/~components/MuiCircularProgress.css new file mode 100644 index 000000000000..943d2a4ae3a5 --- /dev/null +++ b/packages/mui/src/~components/MuiCircularProgress.css @@ -0,0 +1,28 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ + +.MuiCircularProgress-track { + opacity: 1; + + :where(.MuiCircularProgress-root.MuiCircularProgress-colorPrimary) & { + stroke: var(--stratakit-color-bg-accent-muted); + } + + :where(.MuiCircularProgress-root.MuiCircularProgress-colorSecondary) & { + stroke: var(--stratakit-color-border-page-base); + } +} + +.MuiCircularProgress-circle { + stroke-linecap: round; + + :where(.MuiCircularProgress-root.MuiCircularProgress-colorPrimary) & { + stroke: var(--stratakit-color-border-accent-strong); + } + + :where(.MuiCircularProgress-root.MuiCircularProgress-colorSecondary) & { + stroke: var(--stratakit-color-border-mono-faded); + } +} diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css new file mode 100644 index 000000000000..124eeff29582 --- /dev/null +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -0,0 +1,28 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ + +.MuiLinearProgress-root { + border-radius: calc(infinity * 1px); + + &:where(.MuiLinearProgress-colorPrimary) { + background-color: var(--stratakit-color-bg-accent-muted); + } + + &:where(.MuiLinearProgress-colorSecondary) { + background-color: var(--stratakit-color-border-page-base); + } +} + +.MuiLinearProgress-bar { + border-radius: calc(infinity * 1px); + + :where(.MuiLinearProgress-root.MuiLinearProgress-colorPrimary) & { + background-color: var(--stratakit-color-border-accent-strong); + } + + :where(.MuiLinearProgress-root.MuiLinearProgress-colorSecondary) & { + background-color: var(--stratakit-color-border-mono-faded); + } +} diff --git a/packages/mui/src/~createTheme.tsx b/packages/mui/src/~createTheme.tsx index 0ede09a1b385..34566a41b8db 100644 --- a/packages/mui/src/~createTheme.tsx +++ b/packages/mui/src/~createTheme.tsx @@ -326,6 +326,11 @@ function createTheme(args: CreateThemeArgs) { }, }, }, + MuiCircularProgress: { + defaultProps: { + enableTrackSlot: true, + }, + }, MuiContainer: { defaultProps: { component: Role.div } }, MuiDialog: { defaultProps: { component: Role.div } }, MuiDialogContentText: { diff --git a/packages/mui/src/~forced-colors.css b/packages/mui/src/~forced-colors.css index 2c633b51a5f8..cc91924eaa19 100644 --- a/packages/mui/src/~forced-colors.css +++ b/packages/mui/src/~forced-colors.css @@ -114,6 +114,15 @@ } } +.MuiCircularProgress-track { + stroke: CanvasText; + opacity: 0.25; +} + +.MuiCircularProgress-circle { + stroke: CanvasText; +} + .MuiDialog-paper { border: 1px solid; } From ba6771c297331661b7143503df6c5b6496bb46cb Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Mon, 6 Jul 2026 09:54:59 -0400 Subject: [PATCH 02/36] Attempt to fix visual artifacting --- packages/mui/src/~components/MuiCircularProgress.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/mui/src/~components/MuiCircularProgress.css b/packages/mui/src/~components/MuiCircularProgress.css index 943d2a4ae3a5..c49ef41b022b 100644 --- a/packages/mui/src/~components/MuiCircularProgress.css +++ b/packages/mui/src/~components/MuiCircularProgress.css @@ -3,6 +3,10 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ +.MuiCircularProgress-svg { + shape-rendering: geometricPrecision; +} + .MuiCircularProgress-track { opacity: 1; From d8bc77235530bb9d5c60517c330d91606ceb0c2b Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Mon, 6 Jul 2026 10:31:35 -0400 Subject: [PATCH 03/36] Use neutral color instead of mono --- packages/mui/src/~components/MuiCircularProgress.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui/src/~components/MuiCircularProgress.css b/packages/mui/src/~components/MuiCircularProgress.css index c49ef41b022b..bc41643ba304 100644 --- a/packages/mui/src/~components/MuiCircularProgress.css +++ b/packages/mui/src/~components/MuiCircularProgress.css @@ -15,7 +15,7 @@ } :where(.MuiCircularProgress-root.MuiCircularProgress-colorSecondary) & { - stroke: var(--stratakit-color-border-page-base); + stroke: var(--stratakit-color-border-neutral-muted); } } @@ -27,6 +27,6 @@ } :where(.MuiCircularProgress-root.MuiCircularProgress-colorSecondary) & { - stroke: var(--stratakit-color-border-mono-faded); + stroke: var(--stratakit-color-border-neutral-inverse); } } From e81158869f871eba728cef0b24467d538e50ebea Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 7 Jul 2026 10:17:57 -0400 Subject: [PATCH 04/36] Border color for track, icon color for fill --- packages/mui/src/~components/MuiCircularProgress.css | 6 +++--- packages/mui/src/~components/MuiLinearProgress.css | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/mui/src/~components/MuiCircularProgress.css b/packages/mui/src/~components/MuiCircularProgress.css index bc41643ba304..60102fe8fe7f 100644 --- a/packages/mui/src/~components/MuiCircularProgress.css +++ b/packages/mui/src/~components/MuiCircularProgress.css @@ -11,7 +11,7 @@ opacity: 1; :where(.MuiCircularProgress-root.MuiCircularProgress-colorPrimary) & { - stroke: var(--stratakit-color-bg-accent-muted); + stroke: var(--stratakit-color-border-accent-muted); } :where(.MuiCircularProgress-root.MuiCircularProgress-colorSecondary) & { @@ -23,10 +23,10 @@ stroke-linecap: round; :where(.MuiCircularProgress-root.MuiCircularProgress-colorPrimary) & { - stroke: var(--stratakit-color-border-accent-strong); + stroke: var(--stratakit-color-icon-accent-strong); } :where(.MuiCircularProgress-root.MuiCircularProgress-colorSecondary) & { - stroke: var(--stratakit-color-border-neutral-inverse); + stroke: var(--stratakit-color-icon-neutral-base); } } diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index 124eeff29582..ff43df3a39db 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -7,11 +7,11 @@ border-radius: calc(infinity * 1px); &:where(.MuiLinearProgress-colorPrimary) { - background-color: var(--stratakit-color-bg-accent-muted); + background-color: var(--stratakit-color-border-accent-muted); } &:where(.MuiLinearProgress-colorSecondary) { - background-color: var(--stratakit-color-border-page-base); + background-color: var(--stratakit-color-border-neutral-muted); } } @@ -19,10 +19,10 @@ border-radius: calc(infinity * 1px); :where(.MuiLinearProgress-root.MuiLinearProgress-colorPrimary) & { - background-color: var(--stratakit-color-border-accent-strong); + background-color: var(--stratakit-color-icon-accent-strong); } :where(.MuiLinearProgress-root.MuiLinearProgress-colorSecondary) & { - background-color: var(--stratakit-color-border-mono-faded); + background-color: var(--stratakit-color-icon-neutral-base); } } From b86eac40c13de61d146926805376e40d399b0330 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 7 Jul 2026 14:57:01 -0400 Subject: [PATCH 05/36] Revert ba6771c --- packages/mui/src/~components/MuiCircularProgress.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/mui/src/~components/MuiCircularProgress.css b/packages/mui/src/~components/MuiCircularProgress.css index 60102fe8fe7f..771821d3e0ed 100644 --- a/packages/mui/src/~components/MuiCircularProgress.css +++ b/packages/mui/src/~components/MuiCircularProgress.css @@ -3,10 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -.MuiCircularProgress-svg { - shape-rendering: geometricPrecision; -} - .MuiCircularProgress-track { opacity: 1; From 51815e42f69fbf489cf7fd0f4e51cde735b37089 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 7 Jul 2026 15:05:24 -0400 Subject: [PATCH 06/36] Determinate LinearProgress has end indicator --- .../mui/src/~components/MuiLinearProgress.css | 37 +++++++++++++------ 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index ff43df3a39db..7f1abf6e7802 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -4,25 +4,40 @@ *--------------------------------------------------------------------------------------------*/ .MuiLinearProgress-root { + /* #region Variables */ + --✨color-track--primary: var(--stratakit-color-border-accent-muted); + --✨color-track--secondary: var(--stratakit-color-border-neutral-muted); + --✨color-fill--primary: var(--stratakit-color-icon-accent-strong); + --✨color-fill--secondary: var(--stratakit-color-icon-neutral-base); + /* #endregion */ + + background-color: var(--_MuiLinearProgress-track-color); border-radius: calc(infinity * 1px); &:where(.MuiLinearProgress-colorPrimary) { - background-color: var(--stratakit-color-border-accent-muted); + --_MuiLinearProgress-track-color: var(--✨color-track--primary); + --_MuiLinearProgress-fill-color: var(--✨color-fill--primary); } &:where(.MuiLinearProgress-colorSecondary) { - background-color: var(--stratakit-color-border-neutral-muted); + --_MuiLinearProgress-track-color: var(--✨color-track--secondary); + --_MuiLinearProgress-fill-color: var(--✨color-fill--secondary); } -} - -.MuiLinearProgress-bar { - border-radius: calc(infinity * 1px); - :where(.MuiLinearProgress-root.MuiLinearProgress-colorPrimary) & { - background-color: var(--stratakit-color-icon-accent-strong); + &:where(.MuiLinearProgress-determinate) { + &::after { + content: ""; + position: absolute; + inset-inline-end: 0; + inset-block: 0; + aspect-ratio: 1; + background-color: var(--_MuiLinearProgress-fill-color); + border-radius: inherit; + } } +} - :where(.MuiLinearProgress-root.MuiLinearProgress-colorSecondary) & { - background-color: var(--stratakit-color-icon-neutral-base); - } +.MuiLinearProgress-bar { + background-color: var(--_MuiLinearProgress-fill-color); + border-radius: inherit; } From 21d80312e67436538c2ee82de25b3c2d40cbbb92 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 7 Jul 2026 15:23:47 -0400 Subject: [PATCH 07/36] Mention end marker in docs --- apps/website/src/content/docs/components/mui/Progress.md | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/website/src/content/docs/components/mui/Progress.md b/apps/website/src/content/docs/components/mui/Progress.md index 6de85a736879..0f26e98bd1ac 100644 --- a/apps/website/src/content/docs/components/mui/Progress.md +++ b/apps/website/src/content/docs/components/mui/Progress.md @@ -11,6 +11,7 @@ links: ## StrataKit MUI modifications - The `enableTrackSlot` prop defaults to true for `CircularProgress`. +- Added an end marker to `LinearProgress` when the `variant` prop is set to `"determinate"`. ## Examples From cbaf3f2ee43e4fd6a11d947eac203885d0a761cf Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 7 Jul 2026 15:32:02 -0400 Subject: [PATCH 08/36] Split Progress.md into 2 files --- .../mui/{Progress.md => CircularProgress.md} | 11 ++--------- .../content/docs/components/mui/LinearProgress.md | 13 +++++++++++++ 2 files changed, 15 insertions(+), 9 deletions(-) rename apps/website/src/content/docs/components/mui/{Progress.md => CircularProgress.md} (56%) create mode 100644 apps/website/src/content/docs/components/mui/LinearProgress.md diff --git a/apps/website/src/content/docs/components/mui/Progress.md b/apps/website/src/content/docs/components/mui/CircularProgress.md similarity index 56% rename from apps/website/src/content/docs/components/mui/Progress.md rename to apps/website/src/content/docs/components/mui/CircularProgress.md index 0f26e98bd1ac..1689669c36cd 100644 --- a/apps/website/src/content/docs/components/mui/Progress.md +++ b/apps/website/src/content/docs/components/mui/CircularProgress.md @@ -1,5 +1,5 @@ --- -title: Progress +title: CircularProgress description: Progress indicators are used to display a loading state or visualize the progress of an operation. links: muiDocs: https://mui.com/material-ui/react-progress/ @@ -10,11 +10,4 @@ links: ## StrataKit MUI modifications -- The `enableTrackSlot` prop defaults to true for `CircularProgress`. -- Added an end marker to `LinearProgress` when the `variant` prop is set to `"determinate"`. - -## Examples - -### Linear - -::example{src="mui/LinearProgress.default"} +- The `enableTrackSlot` prop defaults to true. diff --git a/apps/website/src/content/docs/components/mui/LinearProgress.md b/apps/website/src/content/docs/components/mui/LinearProgress.md new file mode 100644 index 000000000000..584b893b8323 --- /dev/null +++ b/apps/website/src/content/docs/components/mui/LinearProgress.md @@ -0,0 +1,13 @@ +--- +title: LinearProgress +description: Progress indicators are used to display a loading state or visualize the progress of an operation. +links: + muiDocs: https://mui.com/material-ui/react-progress/ + apiReference: https://mui.com/material-ui/api/linear-progress/ +--- + +::example{src="mui/LinearProgress.default"} + +## StrataKit MUI modifications + +- Added an end marker when the `variant` prop is set to `"determinate"`. From 86097256c29fb69563273c3dc15fbbff580a83d1 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 7 Jul 2026 15:50:40 -0400 Subject: [PATCH 09/36] Add color documentation and simplify demo. --- .../app/mui/CircularProgress.showcase.tsx | 10 ++---- .../app/mui/LinearProgress.showcase.tsx | 5 ++- .../docs/components/mui/CircularProgress.md | 9 ++++++ .../docs/components/mui/LinearProgress.md | 9 ++++++ ...colors.tsx => CircularProgress.colors.tsx} | 26 +++++----------- examples/mui/LinearProgress._colors.tsx | 31 ------------------- examples/mui/LinearProgress.colors.tsx | 19 ++++++++++++ 7 files changed, 48 insertions(+), 61 deletions(-) rename examples/mui/{CircularProgress._colors.tsx => CircularProgress.colors.tsx} (50%) delete mode 100644 examples/mui/LinearProgress._colors.tsx create mode 100644 examples/mui/LinearProgress.colors.tsx diff --git a/apps/test-app/app/mui/CircularProgress.showcase.tsx b/apps/test-app/app/mui/CircularProgress.showcase.tsx index 4be032016f02..55932f312119 100644 --- a/apps/test-app/app/mui/CircularProgress.showcase.tsx +++ b/apps/test-app/app/mui/CircularProgress.showcase.tsx @@ -2,20 +2,14 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import Stack from "@mui/material/Stack"; -import CircularProgressColors_ from "examples/mui/CircularProgress._colors.tsx"; +import CircularProgressColors from "examples/mui/CircularProgress.colors.tsx"; import CircularProgressDefault from "examples/mui/CircularProgress.default.tsx"; -import { isProduction } from "~/~utils.tsx"; export default function CircularProgressExamples() { return ( <> - {!isProduction && ( - - - - )} + ); } diff --git a/apps/test-app/app/mui/LinearProgress.showcase.tsx b/apps/test-app/app/mui/LinearProgress.showcase.tsx index f2a15327e501..55896c59853c 100644 --- a/apps/test-app/app/mui/LinearProgress.showcase.tsx +++ b/apps/test-app/app/mui/LinearProgress.showcase.tsx @@ -3,15 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import Stack from "@mui/material/Stack"; -import LinearProgressColors_ from "examples/mui/LinearProgress._colors.tsx"; +import LinearProgressColors from "examples/mui/LinearProgress.colors.tsx"; import LinearProgressDefault from "examples/mui/LinearProgress.default.tsx"; -import { isProduction } from "~/~utils.tsx"; export default function LinearProgressExamples() { return ( - {!isProduction && } + ); } diff --git a/apps/website/src/content/docs/components/mui/CircularProgress.md b/apps/website/src/content/docs/components/mui/CircularProgress.md index 1689669c36cd..4da695241a36 100644 --- a/apps/website/src/content/docs/components/mui/CircularProgress.md +++ b/apps/website/src/content/docs/components/mui/CircularProgress.md @@ -11,3 +11,12 @@ links: ## StrataKit MUI modifications - The `enableTrackSlot` prop defaults to true. + +## Examples + +### Colors + +- **Primary:** The default. Use when indicating the primary loading state on a page. +- **Secondary:** Use when indicating a secondary loading state or when multiple loading states are shown at once. + +::example{src="mui/CircularProgress.colors"} diff --git a/apps/website/src/content/docs/components/mui/LinearProgress.md b/apps/website/src/content/docs/components/mui/LinearProgress.md index 584b893b8323..243f67d2ab9e 100644 --- a/apps/website/src/content/docs/components/mui/LinearProgress.md +++ b/apps/website/src/content/docs/components/mui/LinearProgress.md @@ -11,3 +11,12 @@ links: ## StrataKit MUI modifications - Added an end marker when the `variant` prop is set to `"determinate"`. + +## Examples + +### Colors + +- **Primary:** The default. Use when indicating the primary loading state on a page. +- **Secondary:** Use when indicating a secondary loading state or when multiple loading states are shown at once. + +::example{src="mui/LinearProgress.colors"} diff --git a/examples/mui/CircularProgress._colors.tsx b/examples/mui/CircularProgress.colors.tsx similarity index 50% rename from examples/mui/CircularProgress._colors.tsx rename to examples/mui/CircularProgress.colors.tsx index bfffcb43f15c..b0050fd09bdb 100644 --- a/examples/mui/CircularProgress._colors.tsx +++ b/examples/mui/CircularProgress.colors.tsx @@ -7,25 +7,13 @@ import * as React from "react"; import CircularProgress from "@mui/material/CircularProgress"; import Typography from "@mui/material/Typography"; -type CircularProgressProps = React.ComponentProps; -const colors = [ - "secondary", - "primary", -] as const satisfies CircularProgressProps["color"][]; - export default () => { - const exampleId = React.useId(); + const labelId = React.useId(); - return colors.map((color) => { - const labelId = `${exampleId}-${color}`; - return ( -
- - - {color.charAt(0).toUpperCase()} - {color.slice(1)}… - -
- ); - }); + return ( + <> + + Analyzing results… + + ); }; diff --git a/examples/mui/LinearProgress._colors.tsx b/examples/mui/LinearProgress._colors.tsx deleted file mode 100644 index 9b40ee86c9b7..000000000000 --- a/examples/mui/LinearProgress._colors.tsx +++ /dev/null @@ -1,31 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ - -import * as React from "react"; -import LinearProgress from "@mui/material/LinearProgress"; -import Typography from "@mui/material/Typography"; - -type LinearProgressProps = React.ComponentProps; -const colors = [ - "secondary", - "primary", -] as const satisfies LinearProgressProps["color"][]; - -export default () => { - const exampleId = React.useId(); - - return colors.map((color) => { - const labelId = `${exampleId}-${color}`; - return ( - - - - {color.charAt(0).toUpperCase()} - {color.slice(1)}… - - - ); - }); -}; diff --git a/examples/mui/LinearProgress.colors.tsx b/examples/mui/LinearProgress.colors.tsx new file mode 100644 index 000000000000..906cc2c3c63c --- /dev/null +++ b/examples/mui/LinearProgress.colors.tsx @@ -0,0 +1,19 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ + +import * as React from "react"; +import LinearProgress from "@mui/material/LinearProgress"; +import Typography from "@mui/material/Typography"; + +export default () => { + const labelId = React.useId(); + + return ( + <> + + Analyzing results… + + ); +}; From 2d26aec79cd55fc0c055dea8d2dcad5224abc6e0 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 7 Jul 2026 15:57:15 -0400 Subject: [PATCH 10/36] Add determinate documentation and demo. --- .../app/mui/CircularProgress.showcase.tsx | 2 + .../app/mui/LinearProgress.showcase.tsx | 2 + .../docs/components/mui/CircularProgress.md | 6 +++ .../docs/components/mui/LinearProgress.md | 6 +++ examples/mui/CircularProgress.determinate.tsx | 51 +++++++++++++++++++ examples/mui/LinearProgress.determinate.tsx | 38 ++++++++++++++ 6 files changed, 105 insertions(+) create mode 100644 examples/mui/CircularProgress.determinate.tsx create mode 100644 examples/mui/LinearProgress.determinate.tsx diff --git a/apps/test-app/app/mui/CircularProgress.showcase.tsx b/apps/test-app/app/mui/CircularProgress.showcase.tsx index 55932f312119..cf949976215e 100644 --- a/apps/test-app/app/mui/CircularProgress.showcase.tsx +++ b/apps/test-app/app/mui/CircularProgress.showcase.tsx @@ -4,12 +4,14 @@ *--------------------------------------------------------------------------------------------*/ import CircularProgressColors from "examples/mui/CircularProgress.colors.tsx"; import CircularProgressDefault from "examples/mui/CircularProgress.default.tsx"; +import CircularProgressDeterminate from "examples/mui/CircularProgress.determinate.tsx"; export default function CircularProgressExamples() { return ( <> + ); } diff --git a/apps/test-app/app/mui/LinearProgress.showcase.tsx b/apps/test-app/app/mui/LinearProgress.showcase.tsx index 55896c59853c..ad09bdb16c59 100644 --- a/apps/test-app/app/mui/LinearProgress.showcase.tsx +++ b/apps/test-app/app/mui/LinearProgress.showcase.tsx @@ -5,12 +5,14 @@ import Stack from "@mui/material/Stack"; import LinearProgressColors from "examples/mui/LinearProgress.colors.tsx"; import LinearProgressDefault from "examples/mui/LinearProgress.default.tsx"; +import LinearProgressDeterminate from "examples/mui/LinearProgress.determinate.tsx"; export default function LinearProgressExamples() { return ( + ); } diff --git a/apps/website/src/content/docs/components/mui/CircularProgress.md b/apps/website/src/content/docs/components/mui/CircularProgress.md index 4da695241a36..cb9d6765903e 100644 --- a/apps/website/src/content/docs/components/mui/CircularProgress.md +++ b/apps/website/src/content/docs/components/mui/CircularProgress.md @@ -20,3 +20,9 @@ links: - **Secondary:** Use when indicating a secondary loading state or when multiple loading states are shown at once. ::example{src="mui/CircularProgress.colors"} + +### Determinate + +Set the `variant` prop to `"determinate"` when the completion percentage is known. + +::example{src="mui/CircularProgress.determinate"} diff --git a/apps/website/src/content/docs/components/mui/LinearProgress.md b/apps/website/src/content/docs/components/mui/LinearProgress.md index 243f67d2ab9e..d9510cecb27c 100644 --- a/apps/website/src/content/docs/components/mui/LinearProgress.md +++ b/apps/website/src/content/docs/components/mui/LinearProgress.md @@ -20,3 +20,9 @@ links: - **Secondary:** Use when indicating a secondary loading state or when multiple loading states are shown at once. ::example{src="mui/LinearProgress.colors"} + +### Determinate + +Set the `variant` prop to `"determinate"` when the completion percentage is known. + +::example{src="mui/LinearProgress.determinate"} diff --git a/examples/mui/CircularProgress.determinate.tsx b/examples/mui/CircularProgress.determinate.tsx new file mode 100644 index 000000000000..d84353e1cf53 --- /dev/null +++ b/examples/mui/CircularProgress.determinate.tsx @@ -0,0 +1,51 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ + +import * as React from "react"; +import Box from "@mui/material/Box"; +import CircularProgress from "@mui/material/CircularProgress"; +import Typography from "@mui/material/Typography"; + +export default () => { + const labelId = React.useId(); + const [value, setValue] = React.useState(10); + + React.useEffect(() => { + const timer = setInterval(() => { + setValue((prevValue) => (prevValue >= 100 ? 0 : prevValue + 10)); + }, 800); + + return () => { + clearInterval(timer); + }; + }, []); + + return ( + <> + + + + {`${Math.round(value)}%`} + + Uploading… + + ); +}; diff --git a/examples/mui/LinearProgress.determinate.tsx b/examples/mui/LinearProgress.determinate.tsx new file mode 100644 index 000000000000..05162236deed --- /dev/null +++ b/examples/mui/LinearProgress.determinate.tsx @@ -0,0 +1,38 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ + +import * as React from "react"; +import LinearProgress from "@mui/material/LinearProgress"; +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; + +export default () => { + const labelId = React.useId(); + const [value, setValue] = React.useState(10); + + React.useEffect(() => { + const timer = setInterval(() => { + setValue((prevValue) => (prevValue >= 100 ? 0 : prevValue + 10)); + }, 800); + + return () => { + clearInterval(timer); + }; + }, []); + + return ( + <> + + + Uploading… + {value}% + + + ); +}; From 1f03f4d1e1d324a7c1b797df26965a4f5e9033d1 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Wed, 8 Jul 2026 09:24:33 -0400 Subject: [PATCH 11/36] Update anchors to new progress docs. --- .../src/content/docs/components/mui/Skeleton.md | 12 ++++++------ .../migration-from-legacy-stratakit.mdx | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/website/src/content/docs/components/mui/Skeleton.md b/apps/website/src/content/docs/components/mui/Skeleton.md index 4889409882eb..0662e41ba541 100644 --- a/apps/website/src/content/docs/components/mui/Skeleton.md +++ b/apps/website/src/content/docs/components/mui/Skeleton.md @@ -12,11 +12,11 @@ links: Make sure the **Skeleton** is suitable for your use case. There may be other, more appropriate components available. -| Use case | [Progress](/components/progress) | [Skeleton](/components/skeleton) | -| ----------------------------------------------------------------------- | -------------------------------- | -------------------------------- | -| Showing a loading (or other) process where the progress is determinable | ✅ | ❌ | -| Showing an indeterminable loading progress | ✅ | ✅ | -| Showing a process other than loading, such as a calculation | ✅ | ❌ | +| Use case | [CircularProgress](/components/circularprogress) & [LinearProgress](/components/linearprogress) | [Skeleton](/components/skeleton) | +| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------- | +| Showing a loading (or other) process where the progress is determinable | ✅ | ❌ | +| Showing an indeterminable loading progress | ✅ | ✅ | +| Showing a process other than loading, such as a calculation | ✅ | ❌ | ### Variants @@ -42,4 +42,4 @@ Accurately representing the shape and structure of a loading interface is a case ## 🚫 Don't - Don't use **Skeleton** where the size and shape of the content and functionality being loaded is not known. -- Don't use **Skeleton** to indicate the progress of any process except loading. For indicating the progress of calculations and other processes within a loaded interface, use [**Progress**](/components/progress). +- Don't use **Skeleton** to indicate the progress of any process except loading. For indicating the progress of calculations and other processes within a loaded interface, use [**CircularProgress**](/components/circularprogress) or [**LinearProgress**](/components/linearprogress). diff --git a/apps/website/src/content/docs/getting-started/migration-from-legacy-stratakit.mdx b/apps/website/src/content/docs/getting-started/migration-from-legacy-stratakit.mdx index 0fbf039c4797..4aee97d980cc 100644 --- a/apps/website/src/content/docs/getting-started/migration-from-legacy-stratakit.mdx +++ b/apps/website/src/content/docs/getting-started/migration-from-legacy-stratakit.mdx @@ -256,7 +256,7 @@ Read additional [StrataKit MUI component documentation](/components/overview/) f ### ProgressBar -- Replace the `ProgressBar` component from `@stratakit/bricks` with the `LinearProgress` component from `@mui/material`. See [Progress examples](/components/progress/) for reference. +- Replace the `ProgressBar` component from `@stratakit/bricks` with the `LinearProgress` component from `@mui/material`. See [LinearProgress examples](/components/linearprogress) for reference. - Remove unsupported [`size`](/reference/bricks/Progress#Progress.ProgressBar.size) prop. - Change [`tone`](/reference/bricks/Progress#Progress.ProgressBar.tone) prop to [`color`](https://mui.com/material-ui/api/linear-progress/#linear-progress-prop-color) prop. @@ -290,7 +290,7 @@ Read additional [StrataKit MUI component documentation](/components/overview/) f ### Spinner -- Replace the `Spinner` component from `@stratakit/bricks` with the `CircularProgress` component from `@mui/material`. See [Progress examples](/components/progress/) for reference. +- Replace the `Spinner` component from `@stratakit/bricks` with the `CircularProgress` component from `@mui/material`. See [CircularProgress examples](/components/circularprogress) for reference. - Change the value of [`size`](/reference/bricks/Spinner#Spinner.size) prop. MUI [`size`](https://mui.com/material-ui/api/circular-progress/#circular-progress-prop-size) prop uses pixel values or custom units when a string is provided. - Change [`tone`](/reference/bricks/Spinner#Spinner.tone) prop to [`color`](https://mui.com/material-ui/api/circular-progress/#circular-progress-prop-color) prop. From f8a5294483280a697d3c7920683b762e6d6f9b36 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Wed, 8 Jul 2026 11:20:33 -0400 Subject: [PATCH 12/36] Simplify determinate demos --- examples/mui/CircularProgress.determinate.tsx | 40 +++---------------- examples/mui/LinearProgress.determinate.tsx | 21 ++-------- 2 files changed, 9 insertions(+), 52 deletions(-) diff --git a/examples/mui/CircularProgress.determinate.tsx b/examples/mui/CircularProgress.determinate.tsx index d84353e1cf53..3e2438b4bed1 100644 --- a/examples/mui/CircularProgress.determinate.tsx +++ b/examples/mui/CircularProgress.determinate.tsx @@ -4,48 +4,20 @@ *--------------------------------------------------------------------------------------------*/ import * as React from "react"; -import Box from "@mui/material/Box"; import CircularProgress from "@mui/material/CircularProgress"; import Typography from "@mui/material/Typography"; export default () => { const labelId = React.useId(); - const [value, setValue] = React.useState(10); - - React.useEffect(() => { - const timer = setInterval(() => { - setValue((prevValue) => (prevValue >= 100 ? 0 : prevValue + 10)); - }, 800); - - return () => { - clearInterval(timer); - }; - }, []); return ( <> - - - - {`${Math.round(value)}%`} - - Uploading… + + Analyzing results… ); }; diff --git a/examples/mui/LinearProgress.determinate.tsx b/examples/mui/LinearProgress.determinate.tsx index 05162236deed..f7315ec5858c 100644 --- a/examples/mui/LinearProgress.determinate.tsx +++ b/examples/mui/LinearProgress.determinate.tsx @@ -5,34 +5,19 @@ import * as React from "react"; import LinearProgress from "@mui/material/LinearProgress"; -import Stack from "@mui/material/Stack"; import Typography from "@mui/material/Typography"; export default () => { const labelId = React.useId(); - const [value, setValue] = React.useState(10); - - React.useEffect(() => { - const timer = setInterval(() => { - setValue((prevValue) => (prevValue >= 100 ? 0 : prevValue + 10)); - }, 800); - - return () => { - clearInterval(timer); - }; - }, []); return ( <> - - Uploading… - {value}% - + Analyzing results… ); }; From 96d9c612ad1290c9dee61144c0b31bd8ce0fcffa Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Wed, 8 Jul 2026 15:49:08 -0400 Subject: [PATCH 13/36] Add support for buffer variant --- .../app/mui/LinearProgress.showcase.tsx | 2 ++ .../docs/components/mui/LinearProgress.md | 8 +++++- examples/mui/LinearProgress.buffer.tsx | 24 +++++++++++++++++ .../mui/src/~components/MuiLinearProgress.css | 22 ++++++++++++++-- packages/mui/src/~forced-colors.css | 26 +++++++++++++++++-- 5 files changed, 77 insertions(+), 5 deletions(-) create mode 100644 examples/mui/LinearProgress.buffer.tsx diff --git a/apps/test-app/app/mui/LinearProgress.showcase.tsx b/apps/test-app/app/mui/LinearProgress.showcase.tsx index ad09bdb16c59..0c2967490449 100644 --- a/apps/test-app/app/mui/LinearProgress.showcase.tsx +++ b/apps/test-app/app/mui/LinearProgress.showcase.tsx @@ -3,6 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import Stack from "@mui/material/Stack"; +import LinearProgressBuffer from "examples/mui/LinearProgress.buffer.tsx"; import LinearProgressColors from "examples/mui/LinearProgress.colors.tsx"; import LinearProgressDefault from "examples/mui/LinearProgress.default.tsx"; import LinearProgressDeterminate from "examples/mui/LinearProgress.determinate.tsx"; @@ -13,6 +14,7 @@ export default function LinearProgressExamples() { + ); } diff --git a/apps/website/src/content/docs/components/mui/LinearProgress.md b/apps/website/src/content/docs/components/mui/LinearProgress.md index d9510cecb27c..ae159a8dd441 100644 --- a/apps/website/src/content/docs/components/mui/LinearProgress.md +++ b/apps/website/src/content/docs/components/mui/LinearProgress.md @@ -10,7 +10,7 @@ links: ## StrataKit MUI modifications -- Added an end marker when the `variant` prop is set to `"determinate"`. +- Added an end marker when the `variant` prop is set to `"determinate"` or `"buffer"`. ## Examples @@ -26,3 +26,9 @@ links: Set the `variant` prop to `"determinate"` when the completion percentage is known. ::example{src="mui/LinearProgress.determinate"} + +### Buffer + +Set the `variant` prop to `"buffer"` when progress and buffered work are tracked separately. + +::example{src="mui/LinearProgress.buffer"} diff --git a/examples/mui/LinearProgress.buffer.tsx b/examples/mui/LinearProgress.buffer.tsx new file mode 100644 index 000000000000..8965b9ab0796 --- /dev/null +++ b/examples/mui/LinearProgress.buffer.tsx @@ -0,0 +1,24 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ + +import * as React from "react"; +import LinearProgress from "@mui/material/LinearProgress"; +import Typography from "@mui/material/Typography"; + +export default () => { + const labelId = React.useId(); + + return ( + <> + + Buffering results… + + ); +}; diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index 7f1abf6e7802..7277728f4a83 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -24,7 +24,11 @@ --_MuiLinearProgress-fill-color: var(--✨color-fill--secondary); } - &:where(.MuiLinearProgress-determinate) { + &:where(.MuiLinearProgress-buffer) { + background-color: transparent; + } + + &:where(.MuiLinearProgress-buffer, .MuiLinearProgress-determinate) { &::after { content: ""; position: absolute; @@ -38,6 +42,20 @@ } .MuiLinearProgress-bar { - background-color: var(--_MuiLinearProgress-fill-color); border-radius: inherit; + background-color: var(--_MuiLinearProgress-fill-color); +} + +.MuiLinearProgress-bar2 { + :where(.MuiLinearProgress-root.MuiLinearProgress-buffer) & { + background-color: var(--_MuiLinearProgress-track-color); + } +} + +.MuiLinearProgress-dashed { + background-image: radial-gradient( + var(--_MuiLinearProgress-track-color) 0%, + var(--_MuiLinearProgress-track-color) 16%, + transparent 42% + ); } diff --git a/packages/mui/src/~forced-colors.css b/packages/mui/src/~forced-colors.css index cc91924eaa19..e9e5b39eeb6d 100644 --- a/packages/mui/src/~forced-colors.css +++ b/packages/mui/src/~forced-colors.css @@ -167,11 +167,33 @@ } .MuiLinearProgress-root { - border: 1px solid; + --_MuiLinearProgress-track-color: Canvas; + --_MuiLinearProgress-fill-color: CanvasText; + + position: relative; + + &:where(:not(.MuiLinearProgress-buffer))::before { + content: ""; + position: absolute; + inset: 0; + background-color: var(--_MuiLinearProgress-fill-color); + opacity: 0.25; + } } .MuiLinearProgress-bar { - background-color: CanvasText; + background-color: var(--_MuiLinearProgress-fill-color); +} + +.MuiLinearProgress-bar2 { + :where(.MuiLinearProgress-root.MuiLinearProgress-buffer) & { + opacity: 0.25; + } +} + +.MuiLinearProgress-dashed { + forced-color-adjust: none; + background-image: radial-gradient(CanvasText 0%, CanvasText 16%, transparent 42%); } .MuiListItemIcon-root { From ea1fe63649f8ae35506af9ce433c8f42c8290289 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Mon, 13 Jul 2026 16:50:37 -0400 Subject: [PATCH 14/36] Reduce size of track --- .../mui/src/~components/MuiLinearProgress.css | 24 ++++++++++++------- packages/mui/src/~forced-colors.css | 18 ++++---------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index 7277728f4a83..76d10cb97b03 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -11,7 +11,7 @@ --✨color-fill--secondary: var(--stratakit-color-icon-neutral-base); /* #endregion */ - background-color: var(--_MuiLinearProgress-track-color); + background-color: transparent; border-radius: calc(infinity * 1px); &:where(.MuiLinearProgress-colorPrimary) { @@ -24,8 +24,15 @@ --_MuiLinearProgress-fill-color: var(--✨color-fill--secondary); } - &:where(.MuiLinearProgress-buffer) { - background-color: transparent; + &:where(.MuiLinearProgress-determinate, .MuiLinearProgress-indeterminate) { + &::before { + content: ""; + position: absolute; + inset-block: 1px; + inset-inline: 0; + background-color: var(--_MuiLinearProgress-track-color); + border-radius: inherit; + } } &:where(.MuiLinearProgress-buffer, .MuiLinearProgress-determinate) { @@ -49,13 +56,14 @@ .MuiLinearProgress-bar2 { :where(.MuiLinearProgress-root.MuiLinearProgress-buffer) & { background-color: var(--_MuiLinearProgress-track-color); + inset-block: 1px; } } .MuiLinearProgress-dashed { - background-image: radial-gradient( - var(--_MuiLinearProgress-track-color) 0%, - var(--_MuiLinearProgress-track-color) 16%, - transparent 42% - ); + background-color: transparent; + background-image: unset; + background-size: unset; + block-size: unset; + inset-block: 1px; } diff --git a/packages/mui/src/~forced-colors.css b/packages/mui/src/~forced-colors.css index e9e5b39eeb6d..eadb5a95812e 100644 --- a/packages/mui/src/~forced-colors.css +++ b/packages/mui/src/~forced-colors.css @@ -170,14 +170,11 @@ --_MuiLinearProgress-track-color: Canvas; --_MuiLinearProgress-fill-color: CanvasText; - position: relative; - - &:where(:not(.MuiLinearProgress-buffer))::before { - content: ""; - position: absolute; - inset: 0; - background-color: var(--_MuiLinearProgress-fill-color); - opacity: 0.25; + &:where(.MuiLinearProgress-determinate, .MuiLinearProgress-indeterminate) { + &::before { + background-color: var(--_MuiLinearProgress-fill-color); + opacity: 0.25; + } } } @@ -191,11 +188,6 @@ } } -.MuiLinearProgress-dashed { - forced-color-adjust: none; - background-image: radial-gradient(CanvasText 0%, CanvasText 16%, transparent 42%); -} - .MuiListItemIcon-root { color: inherit; } From 450c3bfedd2875b3cf39bac11f2e839d7333cb01 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 14 Jul 2026 09:53:28 -0400 Subject: [PATCH 15/36] Reduce size of track on CircularProgress --- packages/mui/src/~createTheme.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/mui/src/~createTheme.tsx b/packages/mui/src/~createTheme.tsx index 363e87730249..b1fe09808ec9 100644 --- a/packages/mui/src/~createTheme.tsx +++ b/packages/mui/src/~createTheme.tsx @@ -329,6 +329,12 @@ function createTheme(args: CreateThemeArgs) { MuiCircularProgress: { defaultProps: { enableTrackSlot: true, + thickness: 4, + }, + styleOverrides: { + track: ({ ownerState }) => ({ + strokeWidth: (ownerState.thickness ?? 4) - 2, + }), }, }, MuiContainer: { defaultProps: { component: Role.div } }, From 2369d7741098331751463975a7c3037eacde906e Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 14 Jul 2026 15:36:34 -0400 Subject: [PATCH 16/36] Change thickness of both Circular & Linear track. --- .../mui/src/~components/MuiCircularProgress.css | 7 +++++++ .../mui/src/~components/MuiLinearProgress.css | 16 +++++++++++++--- packages/mui/src/~createTheme.tsx | 5 ----- 3 files changed, 20 insertions(+), 8 deletions(-) diff --git a/packages/mui/src/~components/MuiCircularProgress.css b/packages/mui/src/~components/MuiCircularProgress.css index 771821d3e0ed..bd258d3ebb4b 100644 --- a/packages/mui/src/~components/MuiCircularProgress.css +++ b/packages/mui/src/~components/MuiCircularProgress.css @@ -3,8 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ +.MuiCircularProgress-root { + --_MuiCircularProgress-track-thickness: 1px; + --_MuiCircularProgress-fill-thickness: 4px; +} + .MuiCircularProgress-track { opacity: 1; + stroke-width: var(--_MuiCircularProgress-track-thickness); :where(.MuiCircularProgress-root.MuiCircularProgress-colorPrimary) & { stroke: var(--stratakit-color-border-accent-muted); @@ -17,6 +23,7 @@ .MuiCircularProgress-circle { stroke-linecap: round; + stroke-width: var(--_MuiCircularProgress-fill-thickness); :where(.MuiCircularProgress-root.MuiCircularProgress-colorPrimary) & { stroke: var(--stratakit-color-icon-accent-strong); diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index 76d10cb97b03..d447d550b11f 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -9,9 +9,13 @@ --✨color-track--secondary: var(--stratakit-color-border-neutral-muted); --✨color-fill--primary: var(--stratakit-color-icon-accent-strong); --✨color-fill--secondary: var(--stratakit-color-icon-neutral-base); + + --_MuiLinearProgress-track-thickness: 1px; + --_MuiLinearProgress-fill-thickness: 4px; /* #endregion */ background-color: transparent; + block-size: var(--_MuiLinearProgress-fill-thickness); border-radius: calc(infinity * 1px); &:where(.MuiLinearProgress-colorPrimary) { @@ -28,8 +32,11 @@ &::before { content: ""; position: absolute; - inset-block: 1px; - inset-inline: 0; + inset-block: calc( + (var(--_MuiLinearProgress-fill-thickness) - var(--_MuiLinearProgress-track-thickness)) * + 0.5 + ); + inset-inline: calc(var(--_MuiLinearProgress-fill-thickness) * 0.5); background-color: var(--_MuiLinearProgress-track-color); border-radius: inherit; } @@ -56,7 +63,10 @@ .MuiLinearProgress-bar2 { :where(.MuiLinearProgress-root.MuiLinearProgress-buffer) & { background-color: var(--_MuiLinearProgress-track-color); - inset-block: 1px; + inset-block: calc( + (var(--_MuiLinearProgress-fill-thickness) - var(--_MuiLinearProgress-track-thickness)) * + 0.5 + ); } } diff --git a/packages/mui/src/~createTheme.tsx b/packages/mui/src/~createTheme.tsx index b1fe09808ec9..be2c35a3e537 100644 --- a/packages/mui/src/~createTheme.tsx +++ b/packages/mui/src/~createTheme.tsx @@ -331,11 +331,6 @@ function createTheme(args: CreateThemeArgs) { enableTrackSlot: true, thickness: 4, }, - styleOverrides: { - track: ({ ownerState }) => ({ - strokeWidth: (ownerState.thickness ?? 4) - 2, - }), - }, }, MuiContainer: { defaultProps: { component: Role.div } }, MuiDialog: { defaultProps: { component: Role.div } }, From 7c94fa97ccdcf0a9bf5c19a0005af36103d6fa6a Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 14 Jul 2026 16:01:59 -0400 Subject: [PATCH 17/36] Determinate demos display percentage completed. --- examples/mui/CircularProgress.determinate.tsx | 28 +++++++++++++++---- examples/mui/LinearProgress.determinate.tsx | 9 ++++-- 2 files changed, 29 insertions(+), 8 deletions(-) diff --git a/examples/mui/CircularProgress.determinate.tsx b/examples/mui/CircularProgress.determinate.tsx index 3e2438b4bed1..89ac7945279c 100644 --- a/examples/mui/CircularProgress.determinate.tsx +++ b/examples/mui/CircularProgress.determinate.tsx @@ -4,20 +4,36 @@ *--------------------------------------------------------------------------------------------*/ import * as React from "react"; +import Box from "@mui/material/Box"; import CircularProgress from "@mui/material/CircularProgress"; import Typography from "@mui/material/Typography"; export default () => { const labelId = React.useId(); + const progress = 50; return ( <> - - Analyzing results… + + + + {progress}% + + + Uploading… ); }; diff --git a/examples/mui/LinearProgress.determinate.tsx b/examples/mui/LinearProgress.determinate.tsx index f7315ec5858c..5841959ae60b 100644 --- a/examples/mui/LinearProgress.determinate.tsx +++ b/examples/mui/LinearProgress.determinate.tsx @@ -5,19 +5,24 @@ import * as React from "react"; import LinearProgress from "@mui/material/LinearProgress"; +import Stack from "@mui/material/Stack"; import Typography from "@mui/material/Typography"; export default () => { const labelId = React.useId(); + const progress = 50; return ( <> - Analyzing results… + + Uploading… + {progress}% + ); }; From e3ebe162eb8a90856c93b159533c3e8b86bd70b7 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 21 Jul 2026 15:50:15 -0400 Subject: [PATCH 18/36] Singular color for progress indicators --- .../src/~components/MuiCircularProgress.css | 28 ++++++++---------- .../mui/src/~components/MuiLinearProgress.css | 19 +++++------- packages/mui/src/~forced-colors.css | 29 ++----------------- 3 files changed, 22 insertions(+), 54 deletions(-) diff --git a/packages/mui/src/~components/MuiCircularProgress.css b/packages/mui/src/~components/MuiCircularProgress.css index bd258d3ebb4b..6f5383e854c2 100644 --- a/packages/mui/src/~components/MuiCircularProgress.css +++ b/packages/mui/src/~components/MuiCircularProgress.css @@ -6,30 +6,26 @@ .MuiCircularProgress-root { --_MuiCircularProgress-track-thickness: 1px; --_MuiCircularProgress-fill-thickness: 4px; + + &:where(.MuiCircularProgress-colorPrimary) { + --_MuiCircularProgress-color: var(--stratakit-color-icon-accent-strong); + } + + &:where(.MuiCircularProgress-colorSecondary) { + --_MuiCircularProgress-color: var(--stratakit-color-icon-neutral-base); + } +} + +:is(.MuiCircularProgress-track, .MuiCircularProgress-circle) { + stroke: var(--_MuiCircularProgress-color); } .MuiCircularProgress-track { opacity: 1; stroke-width: var(--_MuiCircularProgress-track-thickness); - - :where(.MuiCircularProgress-root.MuiCircularProgress-colorPrimary) & { - stroke: var(--stratakit-color-border-accent-muted); - } - - :where(.MuiCircularProgress-root.MuiCircularProgress-colorSecondary) & { - stroke: var(--stratakit-color-border-neutral-muted); - } } .MuiCircularProgress-circle { stroke-linecap: round; stroke-width: var(--_MuiCircularProgress-fill-thickness); - - :where(.MuiCircularProgress-root.MuiCircularProgress-colorPrimary) & { - stroke: var(--stratakit-color-icon-accent-strong); - } - - :where(.MuiCircularProgress-root.MuiCircularProgress-colorSecondary) & { - stroke: var(--stratakit-color-icon-neutral-base); - } } diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index d447d550b11f..acd4f5c1c400 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -5,10 +5,8 @@ .MuiLinearProgress-root { /* #region Variables */ - --✨color-track--primary: var(--stratakit-color-border-accent-muted); - --✨color-track--secondary: var(--stratakit-color-border-neutral-muted); - --✨color-fill--primary: var(--stratakit-color-icon-accent-strong); - --✨color-fill--secondary: var(--stratakit-color-icon-neutral-base); + --✨color--primary: var(--stratakit-color-icon-accent-strong); + --✨color--secondary: var(--stratakit-color-icon-neutral-base); --_MuiLinearProgress-track-thickness: 1px; --_MuiLinearProgress-fill-thickness: 4px; @@ -19,13 +17,11 @@ border-radius: calc(infinity * 1px); &:where(.MuiLinearProgress-colorPrimary) { - --_MuiLinearProgress-track-color: var(--✨color-track--primary); - --_MuiLinearProgress-fill-color: var(--✨color-fill--primary); + --_MuiLinearProgress-color: var(--✨color--primary); } &:where(.MuiLinearProgress-colorSecondary) { - --_MuiLinearProgress-track-color: var(--✨color-track--secondary); - --_MuiLinearProgress-fill-color: var(--✨color-fill--secondary); + --_MuiLinearProgress-color: var(--✨color--secondary); } &:where(.MuiLinearProgress-determinate, .MuiLinearProgress-indeterminate) { @@ -37,7 +33,7 @@ 0.5 ); inset-inline: calc(var(--_MuiLinearProgress-fill-thickness) * 0.5); - background-color: var(--_MuiLinearProgress-track-color); + background-color: var(--_MuiLinearProgress-color); border-radius: inherit; } } @@ -49,7 +45,7 @@ inset-inline-end: 0; inset-block: 0; aspect-ratio: 1; - background-color: var(--_MuiLinearProgress-fill-color); + background-color: var(--_MuiLinearProgress-color); border-radius: inherit; } } @@ -57,12 +53,11 @@ .MuiLinearProgress-bar { border-radius: inherit; - background-color: var(--_MuiLinearProgress-fill-color); + background-color: var(--_MuiLinearProgress-color); } .MuiLinearProgress-bar2 { :where(.MuiLinearProgress-root.MuiLinearProgress-buffer) & { - background-color: var(--_MuiLinearProgress-track-color); inset-block: calc( (var(--_MuiLinearProgress-fill-thickness) - var(--_MuiLinearProgress-track-thickness)) * 0.5 diff --git a/packages/mui/src/~forced-colors.css b/packages/mui/src/~forced-colors.css index eadb5a95812e..40b20f2fe9c4 100644 --- a/packages/mui/src/~forced-colors.css +++ b/packages/mui/src/~forced-colors.css @@ -114,13 +114,8 @@ } } -.MuiCircularProgress-track { - stroke: CanvasText; - opacity: 0.25; -} - -.MuiCircularProgress-circle { - stroke: CanvasText; +.MuiCircularProgress-root { + --_MuiCircularProgress-color: CanvasText; } .MuiDialog-paper { @@ -167,25 +162,7 @@ } .MuiLinearProgress-root { - --_MuiLinearProgress-track-color: Canvas; - --_MuiLinearProgress-fill-color: CanvasText; - - &:where(.MuiLinearProgress-determinate, .MuiLinearProgress-indeterminate) { - &::before { - background-color: var(--_MuiLinearProgress-fill-color); - opacity: 0.25; - } - } -} - -.MuiLinearProgress-bar { - background-color: var(--_MuiLinearProgress-fill-color); -} - -.MuiLinearProgress-bar2 { - :where(.MuiLinearProgress-root.MuiLinearProgress-buffer) & { - opacity: 0.25; - } + --_MuiLinearProgress-color: CanvasText; } .MuiListItemIcon-root { From 096ffbd261b36f06acefebb1bf5d47ae7bc53ad1 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 21 Jul 2026 15:53:18 -0400 Subject: [PATCH 19/36] Increase size of fill from 4 to 5 --- packages/mui/src/~components/MuiCircularProgress.css | 2 +- packages/mui/src/~components/MuiLinearProgress.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui/src/~components/MuiCircularProgress.css b/packages/mui/src/~components/MuiCircularProgress.css index 6f5383e854c2..b432c4d6427e 100644 --- a/packages/mui/src/~components/MuiCircularProgress.css +++ b/packages/mui/src/~components/MuiCircularProgress.css @@ -5,7 +5,7 @@ .MuiCircularProgress-root { --_MuiCircularProgress-track-thickness: 1px; - --_MuiCircularProgress-fill-thickness: 4px; + --_MuiCircularProgress-fill-thickness: 5px; &:where(.MuiCircularProgress-colorPrimary) { --_MuiCircularProgress-color: var(--stratakit-color-icon-accent-strong); diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index acd4f5c1c400..e583d8bce317 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -9,7 +9,7 @@ --✨color--secondary: var(--stratakit-color-icon-neutral-base); --_MuiLinearProgress-track-thickness: 1px; - --_MuiLinearProgress-fill-thickness: 4px; + --_MuiLinearProgress-fill-thickness: 5px; /* #endregion */ background-color: transparent; From ef3e5bdd1e6e7c4217acc2c354143849031daac9 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 21 Jul 2026 15:53:30 -0400 Subject: [PATCH 20/36] Remove end dot from determinate linear --- packages/mui/src/~components/MuiLinearProgress.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index e583d8bce317..ccf6bd67e48c 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -38,7 +38,7 @@ } } - &:where(.MuiLinearProgress-buffer, .MuiLinearProgress-determinate) { + &:where(.MuiLinearProgress-buffer) { &::after { content: ""; position: absolute; From 4a15d98ef942e0744b7a43ddc843589203a82805 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 21 Jul 2026 16:15:06 -0400 Subject: [PATCH 21/36] Use CSS module for CircularProgress determinate demo --- .../mui/CircularProgress.determinate.module.css | 17 +++++++++++++++++ examples/mui/CircularProgress.determinate.tsx | 15 ++++----------- 2 files changed, 21 insertions(+), 11 deletions(-) create mode 100644 examples/mui/CircularProgress.determinate.module.css diff --git a/examples/mui/CircularProgress.determinate.module.css b/examples/mui/CircularProgress.determinate.module.css new file mode 100644 index 000000000000..50afa7175e9a --- /dev/null +++ b/examples/mui/CircularProgress.determinate.module.css @@ -0,0 +1,17 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ + +.container { + display: inline-flex; + position: relative; +} + +.percentage { + align-items: center; + display: flex; + inset: 0; + justify-content: center; + position: absolute; +} diff --git a/examples/mui/CircularProgress.determinate.tsx b/examples/mui/CircularProgress.determinate.tsx index 89ac7945279c..3a00676e5b7a 100644 --- a/examples/mui/CircularProgress.determinate.tsx +++ b/examples/mui/CircularProgress.determinate.tsx @@ -8,28 +8,21 @@ import Box from "@mui/material/Box"; import CircularProgress from "@mui/material/CircularProgress"; import Typography from "@mui/material/Typography"; +import styles from "./CircularProgress.determinate.module.css"; + export default () => { const labelId = React.useId(); const progress = 50; return ( <> - + - + {progress}% From 60dc625f1be6b37311f96d1a8f6f3b2e97c9ead8 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Wed, 22 Jul 2026 13:23:35 -0400 Subject: [PATCH 22/36] Revert ef3e5bd. --- packages/mui/src/~components/MuiLinearProgress.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index ccf6bd67e48c..e583d8bce317 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -38,7 +38,7 @@ } } - &:where(.MuiLinearProgress-buffer) { + &:where(.MuiLinearProgress-buffer, .MuiLinearProgress-determinate) { &::after { content: ""; position: absolute; From ce00408cf2eb1ea14e670f21b3ca996a2988934e Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Wed, 22 Jul 2026 13:26:56 -0400 Subject: [PATCH 23/36] Updated docs --- .../website/src/content/docs/components/mui/CircularProgress.md | 2 ++ apps/website/src/content/docs/components/mui/LinearProgress.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/apps/website/src/content/docs/components/mui/CircularProgress.md b/apps/website/src/content/docs/components/mui/CircularProgress.md index cb9d6765903e..f2a327322f4a 100644 --- a/apps/website/src/content/docs/components/mui/CircularProgress.md +++ b/apps/website/src/content/docs/components/mui/CircularProgress.md @@ -11,6 +11,8 @@ links: ## StrataKit MUI modifications - The `enableTrackSlot` prop defaults to true. +- Restyled using StrataKit's visual language. +- Includes full `forced-colors` support. ## Examples diff --git a/apps/website/src/content/docs/components/mui/LinearProgress.md b/apps/website/src/content/docs/components/mui/LinearProgress.md index ae159a8dd441..5f6b2b922c04 100644 --- a/apps/website/src/content/docs/components/mui/LinearProgress.md +++ b/apps/website/src/content/docs/components/mui/LinearProgress.md @@ -11,6 +11,8 @@ links: ## StrataKit MUI modifications - Added an end marker when the `variant` prop is set to `"determinate"` or `"buffer"`. +- Restyled using StrataKit's visual language. +- Includes full `forced-colors` support. ## Examples From 9cc0a75122952523b0e04f5fe46e55abb333667b Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Fri, 24 Jul 2026 16:56:40 -0400 Subject: [PATCH 24/36] Add error, warning, info, success colors in CSS. --- .../mui/src/~components/MuiCircularProgress.css | 16 ++++++++++++++++ .../mui/src/~components/MuiLinearProgress.css | 16 ++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/packages/mui/src/~components/MuiCircularProgress.css b/packages/mui/src/~components/MuiCircularProgress.css index b432c4d6427e..c649acac9aa1 100644 --- a/packages/mui/src/~components/MuiCircularProgress.css +++ b/packages/mui/src/~components/MuiCircularProgress.css @@ -14,6 +14,22 @@ &:where(.MuiCircularProgress-colorSecondary) { --_MuiCircularProgress-color: var(--stratakit-color-icon-neutral-base); } + + &:where(.MuiCircularProgress-colorError) { + --_MuiCircularProgress-color: var(--stratakit-color-icon-critical-base); + } + + &:where(.MuiCircularProgress-colorWarning) { + --_MuiCircularProgress-color: var(--stratakit-color-icon-attention-base); + } + + &:where(.MuiCircularProgress-colorInfo) { + --_MuiCircularProgress-color: var(--stratakit-color-icon-info-base); + } + + &:where(.MuiCircularProgress-colorSuccess) { + --_MuiCircularProgress-color: var(--stratakit-color-icon-positive-base); + } } :is(.MuiCircularProgress-track, .MuiCircularProgress-circle) { diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index e583d8bce317..7a554922f394 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -24,6 +24,22 @@ --_MuiLinearProgress-color: var(--✨color--secondary); } + &:where(.MuiLinearProgress-colorError) { + --_MuiLinearProgress-color: var(--stratakit-color-icon-critical-base); + } + + &:where(.MuiLinearProgress-colorWarning) { + --_MuiLinearProgress-color: var(--stratakit-color-icon-attention-base); + } + + &:where(.MuiLinearProgress-colorInfo) { + --_MuiLinearProgress-color: var(--stratakit-color-icon-info-base); + } + + &:where(.MuiLinearProgress-colorSuccess) { + --_MuiLinearProgress-color: var(--stratakit-color-icon-positive-base); + } + &:where(.MuiLinearProgress-determinate, .MuiLinearProgress-indeterminate) { &::before { content: ""; From 61ab7efd632faae241e3a936382dfba861a68b69 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Fri, 24 Jul 2026 17:27:37 -0400 Subject: [PATCH 25/36] Change thickness to 5 --- packages/mui/src/~createTheme.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui/src/~createTheme.tsx b/packages/mui/src/~createTheme.tsx index 3eda992cb9b7..3bba6816d316 100644 --- a/packages/mui/src/~createTheme.tsx +++ b/packages/mui/src/~createTheme.tsx @@ -328,7 +328,7 @@ function createTheme(args: CreateThemeArgs) { MuiCircularProgress: { defaultProps: { enableTrackSlot: true, - thickness: 4, + thickness: 5, }, }, MuiContainer: { defaultProps: { component: Role.div } }, From 4401d88b05b311791d818ff7a8e86f72f1362c61 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Fri, 24 Jul 2026 17:45:30 -0400 Subject: [PATCH 26/36] Use accent base color --- packages/mui/src/~components/MuiCircularProgress.css | 2 +- packages/mui/src/~components/MuiLinearProgress.css | 12 ++++-------- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/mui/src/~components/MuiCircularProgress.css b/packages/mui/src/~components/MuiCircularProgress.css index c649acac9aa1..38d6915ced45 100644 --- a/packages/mui/src/~components/MuiCircularProgress.css +++ b/packages/mui/src/~components/MuiCircularProgress.css @@ -8,7 +8,7 @@ --_MuiCircularProgress-fill-thickness: 5px; &:where(.MuiCircularProgress-colorPrimary) { - --_MuiCircularProgress-color: var(--stratakit-color-icon-accent-strong); + --_MuiCircularProgress-color: var(--stratakit-color-icon-accent-base); } &:where(.MuiCircularProgress-colorSecondary) { diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index 7a554922f394..7160184cf665 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -4,24 +4,19 @@ *--------------------------------------------------------------------------------------------*/ .MuiLinearProgress-root { - /* #region Variables */ - --✨color--primary: var(--stratakit-color-icon-accent-strong); - --✨color--secondary: var(--stratakit-color-icon-neutral-base); - --_MuiLinearProgress-track-thickness: 1px; --_MuiLinearProgress-fill-thickness: 5px; - /* #endregion */ background-color: transparent; block-size: var(--_MuiLinearProgress-fill-thickness); border-radius: calc(infinity * 1px); &:where(.MuiLinearProgress-colorPrimary) { - --_MuiLinearProgress-color: var(--✨color--primary); + --_MuiLinearProgress-color: var(--stratakit-color-icon-accent-base); } &:where(.MuiLinearProgress-colorSecondary) { - --_MuiLinearProgress-color: var(--✨color--secondary); + --_MuiLinearProgress-color: var(--stratakit-color-icon-neutral-base); } &:where(.MuiLinearProgress-colorError) { @@ -48,7 +43,7 @@ (var(--_MuiLinearProgress-fill-thickness) - var(--_MuiLinearProgress-track-thickness)) * 0.5 ); - inset-inline: calc(var(--_MuiLinearProgress-fill-thickness) * 0.5); + inset-inline: 0; background-color: var(--_MuiLinearProgress-color); border-radius: inherit; } @@ -63,6 +58,7 @@ aspect-ratio: 1; background-color: var(--_MuiLinearProgress-color); border-radius: inherit; + opacity: 0.2; } } } From aceb5c72d93180459a049e9ec11c2de9ae0cd535 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Mon, 27 Jul 2026 14:17:30 -0400 Subject: [PATCH 27/36] Oops, that wasn't supposed to be there --- packages/mui/src/~components/MuiLinearProgress.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index 7160184cf665..8ca6fffc6070 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -58,7 +58,6 @@ aspect-ratio: 1; background-color: var(--_MuiLinearProgress-color); border-radius: inherit; - opacity: 0.2; } } } From 14e0a8750456778244121a7422711f3c0e2255eb Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Mon, 27 Jul 2026 14:22:03 -0400 Subject: [PATCH 28/36] Use inset-block-start, translate, and block-size instead of inset-block for track height --- packages/mui/src/~components/MuiLinearProgress.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index 8ca6fffc6070..f1da568c3c3a 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -39,11 +39,10 @@ &::before { content: ""; position: absolute; - inset-block: calc( - (var(--_MuiLinearProgress-fill-thickness) - var(--_MuiLinearProgress-track-thickness)) * - 0.5 - ); + block-size: var(--_MuiLinearProgress-track-thickness); + inset-block-start: calc(var(--_MuiLinearProgress-fill-thickness) * 0.5); inset-inline: 0; + translate: 0 -50%; background-color: var(--_MuiLinearProgress-color); border-radius: inherit; } From 77644b2f8a73c0b152753e3dbb5f52fbca2432da Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Mon, 27 Jul 2026 14:23:51 -0400 Subject: [PATCH 29/36] Use strong color only for primary --- packages/mui/src/~components/MuiLinearProgress.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index f1da568c3c3a..1c7a97e01efd 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -12,7 +12,7 @@ border-radius: calc(infinity * 1px); &:where(.MuiLinearProgress-colorPrimary) { - --_MuiLinearProgress-color: var(--stratakit-color-icon-accent-base); + --_MuiLinearProgress-color: var(--stratakit-color-icon-accent-strong); } &:where(.MuiLinearProgress-colorSecondary) { From 9dc22d34046bcfb9bfb59f341c9a4913599c08a5 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Mon, 27 Jul 2026 14:25:26 -0400 Subject: [PATCH 30/36] Use strong color only for primary (circular) --- packages/mui/src/~components/MuiCircularProgress.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui/src/~components/MuiCircularProgress.css b/packages/mui/src/~components/MuiCircularProgress.css index 38d6915ced45..c649acac9aa1 100644 --- a/packages/mui/src/~components/MuiCircularProgress.css +++ b/packages/mui/src/~components/MuiCircularProgress.css @@ -8,7 +8,7 @@ --_MuiCircularProgress-fill-thickness: 5px; &:where(.MuiCircularProgress-colorPrimary) { - --_MuiCircularProgress-color: var(--stratakit-color-icon-accent-base); + --_MuiCircularProgress-color: var(--stratakit-color-icon-accent-strong); } &:where(.MuiCircularProgress-colorSecondary) { From 55621f64156391c2ada89f254c58443f46d5ff7b Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Mon, 27 Jul 2026 14:31:07 -0400 Subject: [PATCH 31/36] Clean up buffer dashed line --- packages/mui/src/~components/MuiLinearProgress.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index 1c7a97e01efd..82a2a2391ca6 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -76,9 +76,5 @@ } .MuiLinearProgress-dashed { - background-color: transparent; - background-image: unset; - background-size: unset; - block-size: unset; - inset-block: 1px; + display: none; /* We're not using the animated dashed line */ } From 0af89fe47ffbaf03071552295c0b14406943d7cc Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Mon, 27 Jul 2026 14:35:24 -0400 Subject: [PATCH 32/36] Use inset-block-start and block-size instead of inset-block for progress-bar2 when variant=buffer height --- packages/mui/src/~components/MuiLinearProgress.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index 82a2a2391ca6..c8f688f27ce3 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -68,7 +68,8 @@ .MuiLinearProgress-bar2 { :where(.MuiLinearProgress-root.MuiLinearProgress-buffer) & { - inset-block: calc( + block-size: var(--_MuiLinearProgress-track-thickness); + inset-block-start: calc( (var(--_MuiLinearProgress-fill-thickness) - var(--_MuiLinearProgress-track-thickness)) * 0.5 ); From a976f2e11d3bd53c1823bb475022b2495bb174e1 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Mon, 27 Jul 2026 15:06:39 -0400 Subject: [PATCH 33/36] Update packages/mui/src/~components/MuiLinearProgress.css Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com> --- packages/mui/src/~components/MuiLinearProgress.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/mui/src/~components/MuiLinearProgress.css b/packages/mui/src/~components/MuiLinearProgress.css index c8f688f27ce3..2d35f5efee58 100644 --- a/packages/mui/src/~components/MuiLinearProgress.css +++ b/packages/mui/src/~components/MuiLinearProgress.css @@ -40,9 +40,11 @@ content: ""; position: absolute; block-size: var(--_MuiLinearProgress-track-thickness); - inset-block-start: calc(var(--_MuiLinearProgress-fill-thickness) * 0.5); + inset-block-start: calc( + (var(--_MuiLinearProgress-fill-thickness) - var(--_MuiLinearProgress-track-thickness)) * + 0.5 + ); inset-inline: 0; - translate: 0 -50%; background-color: var(--_MuiLinearProgress-color); border-radius: inherit; } From d8dfa20e6428e4dfa583549e100595ef75c30a9a Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Mon, 27 Jul 2026 15:20:54 -0400 Subject: [PATCH 34/36] min-width on linear progress docs demos Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com> --- .../src/content/docs/components/mui/LinearProgress.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/website/src/content/docs/components/mui/LinearProgress.md b/apps/website/src/content/docs/components/mui/LinearProgress.md index 5f6b2b922c04..05d883629b80 100644 --- a/apps/website/src/content/docs/components/mui/LinearProgress.md +++ b/apps/website/src/content/docs/components/mui/LinearProgress.md @@ -6,7 +6,7 @@ links: apiReference: https://mui.com/material-ui/api/linear-progress/ --- -::example{src="mui/LinearProgress.default"} +::example{src="mui/LinearProgress.default" min-width="300px"} ## StrataKit MUI modifications @@ -21,16 +21,16 @@ links: - **Primary:** The default. Use when indicating the primary loading state on a page. - **Secondary:** Use when indicating a secondary loading state or when multiple loading states are shown at once. -::example{src="mui/LinearProgress.colors"} +::example{src="mui/LinearProgress.colors" min-width="300px"} ### Determinate Set the `variant` prop to `"determinate"` when the completion percentage is known. -::example{src="mui/LinearProgress.determinate"} +::example{src="mui/LinearProgress.determinate" min-width="300px"} ### Buffer Set the `variant` prop to `"buffer"` when progress and buffered work are tracked separately. -::example{src="mui/LinearProgress.buffer"} +::example{src="mui/LinearProgress.buffer" min-width="300px"} From 4262a77cddfa26fbdde8366d47b455dcb5d4e1d4 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Tue, 28 Jul 2026 17:00:22 -0400 Subject: [PATCH 35/36] Update jsdocs for CircularProgress --- packages/mui/src/types.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/mui/src/types.ts b/packages/mui/src/types.ts index 4b04dd1d6498..bc6bf563bf97 100644 --- a/packages/mui/src/types.ts +++ b/packages/mui/src/types.ts @@ -255,6 +255,24 @@ declare module "@mui/material/Chip" { } } +declare module "@mui/material/CircularProgress" { + interface CircularProgressOwnProps { + /** + * The default value with `@stratakit/mui` is `true`. + * + * @default true + */ + enableTrackSlot?: boolean; + + /** + * The default thickness with `@stratakit/mui` is `5`. + * + * @default 5 + */ + thickness?: number; + } +} + declare module "@mui/material/Dialog" { interface DialogProps extends Pick { /** @deprecated Use `render` prop instead. */ From 7ae305c32ecad2940c44ed5ef6cf0fbac94b5fb8 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Thu, 30 Jul 2026 09:32:03 -0400 Subject: [PATCH 36/36] Initial commit --- .changeset/full-mails-follow.md | 5 +++++ .../src/content/docs/components/mui/LinearProgress.md | 1 + packages/mui/src/types.ts | 7 +++++++ 3 files changed, 13 insertions(+) create mode 100644 .changeset/full-mails-follow.md diff --git a/.changeset/full-mails-follow.md b/.changeset/full-mails-follow.md new file mode 100644 index 000000000000..3fdb0f7531b6 --- /dev/null +++ b/.changeset/full-mails-follow.md @@ -0,0 +1,5 @@ +--- +"@stratakit/mui": patch +--- + +Removed the following values from the `color` prop of `LinearProgress`: `"info"`, and `"inherit"`. diff --git a/apps/website/src/content/docs/components/mui/LinearProgress.md b/apps/website/src/content/docs/components/mui/LinearProgress.md index 05d883629b80..d3e4f8763bce 100644 --- a/apps/website/src/content/docs/components/mui/LinearProgress.md +++ b/apps/website/src/content/docs/components/mui/LinearProgress.md @@ -10,6 +10,7 @@ links: ## StrataKit MUI modifications +- The `color` prop does not support `"inherit"` or `"info"`. - Added an end marker when the `variant` prop is set to `"determinate"` or `"buffer"`. - Restyled using StrataKit's visual language. - Includes full `forced-colors` support. diff --git a/packages/mui/src/types.ts b/packages/mui/src/types.ts index bc6bf563bf97..abbbcc998ed2 100644 --- a/packages/mui/src/types.ts +++ b/packages/mui/src/types.ts @@ -255,6 +255,13 @@ declare module "@mui/material/Chip" { } } +declare module "@mui/material/LinearProgress" { + interface LinearProgressPropsColorOverrides { + inherit: false; + info: false; + } +} + declare module "@mui/material/CircularProgress" { interface CircularProgressOwnProps { /**