@stratakit/mui 0.1.2 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/LICENSE.md +1 -1
  3. package/README.md +21 -0
  4. package/dist/DEV/Root.js +2 -2
  5. package/dist/DEV/createTheme.js +73 -3
  6. package/dist/DEV/styles.css.js +1 -1
  7. package/dist/Root.js +2 -2
  8. package/dist/createTheme.js +102 -3
  9. package/dist/styles.css.js +1 -1
  10. package/dist/types.d.ts +135 -0
  11. package/package.json +9 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,43 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.2.0
4
+
5
+ ### Potentially breaking changes
6
+
7
+ This release includes a few API changes in MUI components. Make sure to include `@stratakit/mui/types.d.ts` in your project to get the correct types.
8
+
9
+ - [#1157](https://github.com/iTwin/design-system/pull/1157): Updated the default value of `Tooltip`'s `describeChild` prop to `true`.
10
+ - `color` prop:
11
+ - [#1152](https://github.com/iTwin/design-system/pull/1152), [#1158](https://github.com/iTwin/design-system/pull/1158): Removed the following values from the `color` prop of `Button` and `IconButton` components: `"info"`, `"success"`, `"warning"`, and `"inherit"`.
12
+ - [#1183](https://github.com/iTwin/design-system/pull/1183): Removed all values for the `color` prop from form controls (i.e. `Checkbox`, `FormLabel`, `Radio`, `Select`, `Switch` and `TextField` components).
13
+ - [#1161](https://github.com/iTwin/design-system/pull/1161): Removed the following values from `Fab`'s `color` prop: `"info"`, `"success"`, `"warning"`, `"error"`, `"default"`, and `"inherit"`. The default value is now `"primary"`.
14
+ - [#1176](https://github.com/iTwin/design-system/pull/1176): Removed all values from `Slider`'s `color` prop (except the default `"primary"`).
15
+
16
+ - `variant` prop:
17
+ - [#1179](https://github.com/iTwin/design-system/pull/1179): Removed `variant="standard"` from `Alert` and changed the default to `variant="outlined"`.
18
+ - [#1153](https://github.com/iTwin/design-system/pull/1153): Deprecated the `variant` prop in `TextField`.
19
+
20
+ ### Non-breaking changes
21
+
22
+ - [#1139](https://github.com/iTwin/design-system/pull/1139): Removed floating label and re-styled inputs to match the height of buttons.
23
+ - [#1162](https://github.com/iTwin/design-system/pull/1162): Fixed input `outline` and label `color` on focus.
24
+ - [#1170](https://github.com/iTwin/design-system/pull/1170): Updated global color mappings for various components, e.g. `Alert`, `Avatar`, `LinearProgress`, `Skeleton`, `Snackbar`, `TableCell`.
25
+ - [#1171](https://github.com/iTwin/design-system/pull/1171): Fixed `ButtonGroup` default props to use `color="secondary"` and `disableRipple`.
26
+ - [#1180](https://github.com/iTwin/design-system/pull/1180): Fixed `Link` color contrast.
27
+ - [#1178](https://github.com/iTwin/design-system/pull/1178): Fixed `IconButton` color contrast.
28
+ - [#1160](https://github.com/iTwin/design-system/pull/1160): Updated padding for `Dialog` actions.
29
+ - [#1175](https://github.com/iTwin/design-system/pull/1175): Updated padding for `Card` actions.
30
+ - [#1159](https://github.com/iTwin/design-system/pull/1159): Updated colors in `Accordion`, `Card` and `Chip` components.
31
+ - [#1159](https://github.com/iTwin/design-system/pull/1159): Updated `AppBar` component to use neutral colors and no box-shadow.
32
+ - [#1156](https://github.com/iTwin/design-system/pull/1156): Updated `ButtonBase` disabled styles to use `cursor: not-allowed` and not prevent `pointer-events`.
33
+ - Updated dependencies:
34
+ - @stratakit/icons@0.3.0
35
+
36
+ ## 0.1.3
37
+
38
+ - [#1150](https://github.com/iTwin/design-system/pull/1150): Added a new `/types.d.ts` file for augmenting the types from MUI. This file should be included in all projects that rely on `@stratakit/mui`.
39
+ - [#1146](https://github.com/iTwin/design-system/pull/1146): Updated `Button` to use `variant="contained"` by default.
40
+
3
41
  ## 0.1.2
4
42
 
5
43
  - [#1137](https://github.com/iTwin/design-system/pull/1137): Updated `border-radius` of `IconButton` component.
package/LICENSE.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # MIT License
2
2
 
3
- Copyright © 2025 Bentley Systems, Incorporated. All rights reserved.
3
+ Copyright © 2024-2026 Bentley Systems, Incorporated. All rights reserved.
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6
6
 
package/README.md CHANGED
@@ -14,6 +14,7 @@ Additional setup/considerations:
14
14
 
15
15
  - `@stratakit/mui` has a direct dependency on [`@stratakit/foundations`](https://www.npmjs.com/package/@stratakit/foundations) and [`@stratakit/icons`](https://www.npmjs.com/package/@stratakit/icons), the latter of which requires [bundler configuration](https://github.com/iTwin/design-system/tree/main/packages/icons#bundler-configuration) to ensure that `.svg` files are not inlined.
16
16
  - You should ensure that [StrataKit fonts](#fonts) are loaded in your application.
17
+ - [`/types.d.ts`](#typescript) must be included in your project to ensure that the module augmentation for MUI components is picked up by TypeScript.
17
18
  - If you are trying to use this package alongside iTwinUI, you will also need to set up the [theme bridge](https://github.com/iTwin/iTwinUI/wiki/StrataKit-theme-bridge).
18
19
 
19
20
  ## Usage
@@ -78,6 +79,26 @@ Build tools such as [Vite](https://vite.dev/guide/assets.html#importing-asset-as
78
79
  > [!NOTE]
79
80
  > If the `<Root>` component cannot find `InterVariable` as a font in the document, it will automatically add a fallback which uses [Inter’s CDN](https://rsms.me/inter/#faq-cdn). In all cases, we recommend self-hosting to avoid any potential security and reliability issues that may arise from the use of a third-party CDN.
80
81
 
82
+ ## TypeScript
83
+
84
+ `@stratakit/mui` uses [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) to modify the props of certain MUI components (for example, to change default prop values). To ensure that these changes are picked up by TypeScript, you must include the `@stratakit/mui/types.d.ts` file in your project.
85
+
86
+ The preferred way to include `types.d.ts` is to add it to the [`types` array](https://www.typescriptlang.org/tsconfig/#types) in your project's `tsconfig.json`:
87
+
88
+ ```json
89
+ {
90
+ "compilerOptions": {
91
+ "types": ["@stratakit/mui/types.d.ts"]
92
+ }
93
+ }
94
+ ```
95
+
96
+ Alternatively, if your project relies on the implicit inclusion of visible `@types` packages, then you can instead add a reference to `types.d.ts` using a [triple-slash directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html) in a global declaration file in your project (e.g. in `src/env.d.ts`):
97
+
98
+ ```ts
99
+ /// <reference types="@stratakit/mui/types.d.ts" />
100
+ ```
101
+
81
102
  ## Contributing
82
103
 
83
104
  Are you interested in helping StrataKit grow? You can submit feature requests or bugs by creating [issues](https://github.com/iTwin/design-system/issues).
package/dist/DEV/Root.js CHANGED
@@ -15,7 +15,7 @@ import { createTheme } from "./createTheme.js";
15
15
  import css from "./styles.css.js";
16
16
  const theme = createTheme();
17
17
  const packageName = "@stratakit/mui";
18
- const key = `${packageName}@${"0.1.2"}`;
18
+ const key = `${packageName}@${"0.2.0"}`;
19
19
  const Root = React.forwardRef(
20
20
  (props, forwardedRef) => {
21
21
  const { children, colorScheme, ...rest } = props;
@@ -57,7 +57,7 @@ DEV: ColorScheme.displayName = "ColorScheme";
57
57
  function Styles() {
58
58
  const rootContext = useSafeContext(RootContext);
59
59
  if (!rootContext.versions?.has(packageName))
60
- rootContext.versions?.set(packageName, "0.1.2");
60
+ rootContext.versions?.set(packageName, "0.2.0");
61
61
  const { rootNode, loadStyles } = rootContext;
62
62
  React.useInsertionEffect(() => {
63
63
  if (!rootNode || !loadStyles) return;
package/dist/DEV/createTheme.js CHANGED
@@ -15,6 +15,19 @@ import {
15
15
  WarningIcon
16
16
  } from "./Icon.js";
17
17
  function createTheme() {
18
+ const palette = {
19
+ primary: { main: "var(--stratakit-mui-palette-primary-main)" },
20
+ secondary: { main: "var(--stratakit-mui-palette-secondary-main)" },
21
+ error: { main: "var(--stratakit-mui-palette-error-main)" },
22
+ warning: { main: "var(--stratakit-mui-palette-warning-main)" },
23
+ info: { main: "var(--stratakit-mui-palette-info-main)" },
24
+ success: { main: "var(--stratakit-mui-palette-success-main)" },
25
+ grey: Object.fromEntries(
26
+ ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"].map(
27
+ (shade) => [shade, `var(--stratakit-mui-palette-grey-${shade})`]
28
+ )
29
+ )
30
+ };
18
31
  return createMuiTheme({
19
32
  cssVariables: {
20
33
  nativeColor: true,
@@ -22,8 +35,8 @@ function createTheme() {
22
35
  cssVarPrefix: "stratakit-mui"
23
36
  },
24
37
  colorSchemes: {
25
- light: true,
26
- dark: true
38
+ light: { palette },
39
+ dark: { palette }
27
40
  },
28
41
  typography: {
29
42
  fontFamily: "var(--stratakit-font-family-sans)",
@@ -56,6 +69,7 @@ function createTheme() {
56
69
  },
57
70
  MuiAlert: {
58
71
  defaultProps: {
72
+ variant: "outlined",
59
73
  iconMapping: {
60
74
  error: /* @__PURE__ */ jsx(ErrorIcon, {}),
61
75
  info: /* @__PURE__ */ jsx(InfoIcon, {}),
@@ -89,7 +103,15 @@ function createTheme() {
89
103
  },
90
104
  MuiButton: {
91
105
  defaultProps: {
92
- color: "secondary"
106
+ color: "secondary",
107
+ variant: "contained"
108
+ }
109
+ },
110
+ MuiButtonGroup: {
111
+ defaultProps: {
112
+ color: "secondary",
113
+ disableRipple: true
114
+ // ButtonGroup overrides Button's disableRipple so we need to set it here as well
93
115
  }
94
116
  },
95
117
  MuiChip: {
@@ -103,9 +125,52 @@ function createTheme() {
103
125
  // Checkbox doesn't inherit from ButtonBase
104
126
  }
105
127
  },
128
+ MuiInputLabel: {
129
+ defaultProps: {
130
+ shrink: true
131
+ // Removes label animation and masked border from TextField
132
+ }
133
+ },
134
+ MuiFab: {
135
+ defaultProps: {
136
+ color: "primary"
137
+ }
138
+ },
106
139
  MuiLink: {
107
140
  defaultProps: {
108
141
  color: "textPrimary"
142
+ },
143
+ variants: [
144
+ {
145
+ props: { color: "primary" },
146
+ style: { color: "var(--stratakit-color-text-accent-strong)" }
147
+ },
148
+ {
149
+ props: { color: "secondary" },
150
+ style: { color: "var(--stratakit-color-text-neutral-primary)" }
151
+ },
152
+ {
153
+ props: { color: "error" },
154
+ style: { color: "var(--stratakit-color-text-critical-base)" }
155
+ },
156
+ {
157
+ props: { color: "info" },
158
+ style: { color: "var(--stratakit-color-text-info-base)" }
159
+ },
160
+ {
161
+ props: { color: "success" },
162
+ style: { color: "var(--stratakit-color-text-positive-base)" }
163
+ },
164
+ {
165
+ props: { color: "warning" },
166
+ style: { color: "var(--stratakit-color-text-attention-base)" }
167
+ }
168
+ ]
169
+ },
170
+ MuiOutlinedInput: {
171
+ defaultProps: {
172
+ notched: false
173
+ // Removes masked border from Select
109
174
  }
110
175
  },
111
176
  MuiPaginationItem: {
@@ -138,6 +203,11 @@ function createTheme() {
138
203
  // TODO: This should use sort-ascending and sort-descending icons, but that requires disabling MUI's built-in icon rotation.
139
204
  IconComponent: ArrowDownIcon
140
205
  }
206
+ },
207
+ MuiTooltip: {
208
+ defaultProps: {
209
+ describeChild: true
210
+ }
141
211
  }
142
212
  }
143
213
  });
package/dist/DEV/styles.css.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // inline-css:/home/runner/work/design-system/design-system/packages/mui/src/styles.css
2
- var styles_default = String.raw`@layer stratakit{[data-color-scheme],.🥝MuiRoot{--stratakit-mui-palette-background-default:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-divider:var(--stratakit-color-border-page-base);--stratakit-mui-palette-text-primary:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-text-secondary:var(--stratakit-color-text-neutral-secondary);--stratakit-mui-palette-text-disabled:var(--stratakit-color-text-neutral-disabled);--stratakit-mui-palette-primary-main:var(--stratakit-color-bg-accent-base);--stratakit-mui-palette-primary-dark:var(--stratakit-color-bg-accent-faded);--stratakit-mui-palette-primary-light:var(--stratakit-color-bg-accent-muted);--stratakit-mui-palette-primary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-secondary-main:var(--stratakit-color-bg-mono-base);--stratakit-mui-palette-secondary-dark:var(--stratakit-color-bg-mono-faded);--stratakit-mui-palette-secondary-light:var(--stratakit-color-bg-mono-muted);--stratakit-mui-palette-secondary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-action-active:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-action-disabled:var(--stratakit-color-icon-neutral-disabled);--stratakit-mui-palette-action-disabledBackground:var(--stratakit-color-bg-glow-on-surface-disabled);--stratakit-mui-palette-error-main:var(--stratakit-color-bg-critical-base);--stratakit-mui-palette-error-dark:var(--stratakit-color-bg-critical-faded);--stratakit-mui-palette-error-light:var(--stratakit-color-bg-critical-muted);--stratakit-mui-palette-error-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-warning-main:var(--stratakit-color-bg-attention-base);--stratakit-mui-palette-warning-dark:var(--stratakit-color-bg-attention-faded);--stratakit-mui-palette-warning-light:var(--stratakit-color-bg-attention-muted);--stratakit-mui-palette-warning-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-success-main:var(--stratakit-color-bg-positive-base);--stratakit-mui-palette-success-dark:var(--stratakit-color-bg-positive-faded);--stratakit-mui-palette-success-light:var(--stratakit-color-bg-positive-muted);--stratakit-mui-palette-success-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-info-main:var(--stratakit-color-bg-info-base);--stratakit-mui-palette-info-dark:var(--stratakit-color-bg-info-faded);--stratakit-mui-palette-info-light:var(--stratakit-color-bg-info-muted);--stratakit-mui-palette-info-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-grey-50:oklch(85.95% .006 255.48);--stratakit-mui-palette-grey-100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-300:oklch(69.04% .014 255.53);--stratakit-mui-palette-grey-400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-500:oklch(55.22% .018 253.99);--stratakit-mui-palette-grey-600:oklch(48.26% .017 254.7);--stratakit-mui-palette-grey-700:oklch(41.45% .013 256.75);--stratakit-mui-palette-grey-800:oklch(34.4% .011 264.42);--stratakit-mui-palette-grey-900:oklch(26.92% .008 268.32);--stratakit-mui-palette-grey-A100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-A200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-A400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-A700:oklch(41.45% .013 256.75)}.MuiAlert-icon{align-items:center}.MuiButton-root:where(.MuiButton-colorSecondary){--variant-containedBg:var(--stratakit-color-bg-neutral-base);--variant-containedColor:var(--stratakit-color-text-neutral-primary);--variant-outlinedColor:var(--stratakit-color-text-neutral-primary);--variant-textColor:var(--stratakit-color-text-neutral-primary)}.MuiButton-root:where(.MuiButton-colorSecondary):where(:hover){--variant-containedBg:color-mix(in oklch,var(--stratakit-color-bg-neutral-base)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%))}.MuiButton-root:where(.MuiButton-colorPrimary){--variant-outlinedColor:var(--stratakit-color-text-accent-strong);--variant-textColor:var(--stratakit-color-text-accent-strong)}.MuiCheckbox-root:where(.MuiCheckbox-colorPrimary):where(.Mui-checked,.MuiCheckbox-indeterminate):where(:not(.Mui-disabled)){color:var(--stratakit-mui-palette-primary-dark)}.MuiCheckbox-root:where(.Mui-focusVisible){outline:2px solid var(--stratakit-color-border-accent-strong)}.MuiFormLabel-colorPrimary.Mui-focused{color:var(--stratakit-mui-palette-primary-dark)}.MuiIconButton-root{border-radius:4px}.MuiLink-root{text-underline-offset:var(--stratakit-space-x05);font-weight:500;text-decoration-color:currentColor;transition:text-underline-offset .15s ease-out}.MuiLink-root:where(:hover,:focus-visible){text-underline-offset:var(--stratakit-space-x1)}.MuiMenuItem-root:where(.Mui-focusVisible){outline-offset:-2px}.MuiPaper-root{--Paper-overlay:unset!important}.MuiPaper-root:where(.MuiPaper-elevation1){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-base)}.MuiPaper-root:where(.MuiPaper-elevation2,.MuiPaper-elevation3,.MuiPaper-elevation4,.MuiPaper-elevation5,.MuiPaper-elevation6,.MuiPaper-elevation7){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-base)}.MuiPaper-root:where(.MuiPaper-elevation8,.MuiPaper-elevation9,.MuiPaper-elevation10,.MuiPaper-elevation11,.MuiPaper-elevation12,.MuiPaper-elevation13,.MuiPaper-elevation14,.MuiPaper-elevation15,.MuiPaper-elevation16,.MuiPaper-elevation17,.MuiPaper-elevation18,.MuiPaper-elevation19,.MuiPaper-elevation20,.MuiPaper-elevation21,.MuiPaper-elevation22,.MuiPaper-elevation23,.MuiPaper-elevation24){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-level-1)}.MuiTab-root:where(.Mui-selected){color:var(--stratakit-color-text-accent-strong)}.MuiTab-root:where(:focus-visible){outline-offset:-4px}.MuiTabs-indicator{background-color:var(--stratakit-color-border-accent-strong)}.MuiTooltip-tooltip{--stratakit-mui-palette-Tooltip-bg:var(--stratakit-color-bg-elevation-emphasis);box-shadow:var(--stratakit-shadow-control-tooltip-base)}.MuiSwitch-root .MuiSwitch-switchBase:where(.MuiSwitch-colorPrimary):where(.Mui-checked):where(:not(.Mui-disabled)){color:var(--stratakit-mui-palette-primary-dark)}.MuiSwitch-root:where(:has(.MuiSwitch-switchBase.Mui-focusVisible)){outline:2px solid var(--stratakit-color-border-accent-strong)}}@layer mui{:focus-visible:not(#a#b){outline:revert-layer}}`;
2
+ var styles_default = String.raw`@layer stratakit{[data-color-scheme],.🥝MuiRoot{--stratakit-mui-palette-background-default:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-divider:var(--stratakit-color-border-page-base);--stratakit-mui-palette-text-primary:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-text-secondary:var(--stratakit-color-text-neutral-secondary);--stratakit-mui-palette-text-disabled:var(--stratakit-color-text-neutral-disabled);--stratakit-mui-palette-text-icon:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-primary-main:var(--stratakit-color-bg-accent-base);--stratakit-mui-palette-primary-dark:var(--stratakit-color-bg-accent-faded);--stratakit-mui-palette-primary-light:var(--stratakit-color-bg-accent-muted);--stratakit-mui-palette-primary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-secondary-main:var(--stratakit-color-bg-mono-base);--stratakit-mui-palette-secondary-dark:var(--stratakit-color-bg-mono-faded);--stratakit-mui-palette-secondary-light:var(--stratakit-color-bg-mono-muted);--stratakit-mui-palette-secondary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-action-active:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-action-disabled:var(--stratakit-color-icon-neutral-disabled);--stratakit-mui-palette-action-disabledBackground:var(--stratakit-color-bg-glow-on-surface-disabled);--stratakit-mui-palette-error-main:var(--stratakit-color-bg-critical-base);--stratakit-mui-palette-error-dark:var(--stratakit-color-bg-critical-faded);--stratakit-mui-palette-error-light:var(--stratakit-color-bg-critical-muted);--stratakit-mui-palette-error-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-warning-main:var(--stratakit-color-bg-attention-base);--stratakit-mui-palette-warning-dark:var(--stratakit-color-bg-attention-faded);--stratakit-mui-palette-warning-light:var(--stratakit-color-bg-attention-muted);--stratakit-mui-palette-warning-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-success-main:var(--stratakit-color-bg-positive-base);--stratakit-mui-palette-success-dark:var(--stratakit-color-bg-positive-faded);--stratakit-mui-palette-success-light:var(--stratakit-color-bg-positive-muted);--stratakit-mui-palette-success-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-info-main:var(--stratakit-color-bg-info-base);--stratakit-mui-palette-info-dark:var(--stratakit-color-bg-info-faded);--stratakit-mui-palette-info-light:var(--stratakit-color-bg-info-muted);--stratakit-mui-palette-info-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-grey-50:oklch(85.95% .006 255.48);--stratakit-mui-palette-grey-100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-300:oklch(69.04% .014 255.53);--stratakit-mui-palette-grey-400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-500:oklch(55.22% .018 253.99);--stratakit-mui-palette-grey-600:oklch(48.26% .017 254.7);--stratakit-mui-palette-grey-700:oklch(41.45% .013 256.75);--stratakit-mui-palette-grey-800:oklch(34.4% .011 264.42);--stratakit-mui-palette-grey-900:oklch(26.92% .008 268.32);--stratakit-mui-palette-grey-A100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-A200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-A400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-A700:oklch(41.45% .013 256.75);--stratakit-mui-palette-Alert-errorColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-infoColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-successColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-warningColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-errorFilledBg:var(--stratakit-color-bg-critical-transparent);--stratakit-mui-palette-Alert-infoFilledBg:var(--stratakit-color-bg-info-transparent);--stratakit-mui-palette-Alert-successFilledBg:var(--stratakit-color-bg-positive-transparent);--stratakit-mui-palette-Alert-warningFilledBg:var(--stratakit-color-bg-attention-transparent);--stratakit-mui-palette-Alert-errorFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-infoFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-successFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-warningFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-errorIconColor:var(--stratakit-color-icon-critical-base);--stratakit-mui-palette-Alert-infoIconColor:var(--stratakit-color-icon-info-base);--stratakit-mui-palette-Alert-successIconColor:var(--stratakit-color-icon-positive-base);--stratakit-mui-palette-Alert-warningIconColor:var(--stratakit-color-icon-attention-base);--stratakit-mui-palette-AppBar-defaultBg:var(--stratakit-color-bg-page-base);--stratakit-mui-palette-AppBar-darkBg:var(--stratakit-color-bg-page-base);--stratakit-mui-palette-AppBar-darkColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Avatar-defaultBg:var(--stratakit-color-bg-mono-base);--stratakit-mui-palette-Button-inheritContainedBg:var(--stratakit-color-bg-neutral-base);--stratakit-mui-palette-Button-inheritContainedHoverBg:var(--stratakit-color-bg-neutral-base);--stratakit-mui-palette-Chip-defaultBorder:var(--stratakit-color-border-neutral-base);--stratakit-mui-palette-Chip-defaultAvatarColor:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-Chip-defaultIconColor:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-LinearProgress-primaryBg:var(--stratakit-color-bg-accent-muted);--stratakit-mui-palette-LinearProgress-secondaryBg:var(--stratakit-color-border-page-base);--stratakit-mui-palette-LinearProgress-infoBg:var(--stratakit-color-bg-info-muted);--stratakit-mui-palette-LinearProgress-successBg:var(--stratakit-color-bg-positive-muted);--stratakit-mui-palette-LinearProgress-warningBg:var(--stratakit-color-bg-attention-muted);--stratakit-mui-palette-LinearProgress-errorBg:var(--stratakit-color-bg-critical-muted);--stratakit-mui-palette-Skeleton-bg:var(--stratakit-color-bg-glow-on-surface-disabled);--stratakit-mui-palette-SnackbarContent-bg:var(--stratakit-color-bg-elevation-emphasis);--stratakit-mui-palette-SnackbarContent-color:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-StepConnector-border:var(--stratakit-color-border-neutral-muted);--stratakit-mui-palette-StepContent-border:var(--stratakit-color-border-neutral-muted);--stratakit-mui-palette-TableCell-border:var(--stratakit-color-border-neutral-muted);--stratakit-mui-palette-Tooltip-bg:var(--stratakit-color-bg-elevation-emphasis)}.MuiAccordion-root{background-color:#0000}.MuiAlert-icon{align-items:center}:where(.MuiAutocomplete-hasPopupIcon) .MuiAutocomplete-input{padding-inline-end:29px}:where(.MuiAutocomplete-hasClearIcon) .MuiAutocomplete-input{padding-inline-end:53px}.MuiAutocomplete-tag{margin-inline-start:var(--stratakit-space-x1);margin-inline-end:0}.MuiAutocomplete-tag:where(:nth-child(1 of .MuiAutocomplete-tag)){margin-inline-start:var(--stratakit-space-x2)}.MuiAutocomplete-tag:where(:nth-last-child(1 of .MuiAutocomplete-tag)){margin-inline-end:var(--stratakit-space-x2)}.MuiAppBar-root{background-color:var(--stratakit-color-bg-page-base);box-shadow:none;border-block-end:1px solid var(--stratakit-color-border-page-base);color:var(--stratakit-color-text-neutral-primary)}.MuiButtonBase-root:where(.Mui-disabled){cursor:not-allowed;pointer-events:auto;background-color:#0000}.MuiButton-root:where(.MuiButton-colorSecondary){--variant-containedBg:var(--stratakit-color-bg-neutral-base);--variant-containedColor:var(--stratakit-color-text-neutral-primary);--variant-outlinedColor:var(--stratakit-color-text-neutral-primary);--variant-textColor:var(--stratakit-color-text-neutral-primary)}@media (any-hover:hover){.MuiButton-root:where(.MuiButton-colorSecondary):where(:hover){--variant-containedBg:color-mix(in oklch,var(--stratakit-color-bg-neutral-base)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%))}}.MuiButton-root:where(.MuiButton-colorPrimary){--variant-outlinedColor:var(--stratakit-color-text-accent-strong);--variant-textColor:var(--stratakit-color-text-accent-strong)}.MuiButton-root:where(.MuiButton-contained):where(.Mui-disabled){background-color:var(--stratakit-color-bg-glow-on-surface-disabled)}.MuiCard-root{background-color:var(--stratakit-color-bg-elevation-base)}.MuiCardContent-root:where(:has(+.MuiCardActions-root)){padding-block-end:0}.MuiCardActions-root{padding:var(--stratakit-space-x4)}.MuiCheckbox-root:where(.MuiCheckbox-colorPrimary):where(.Mui-checked,.MuiCheckbox-indeterminate):where(:not(.Mui-disabled)){color:var(--stratakit-mui-palette-primary-dark)}.MuiCheckbox-root:where(.Mui-focusVisible){outline:2px solid var(--stratakit-color-border-accent-strong)}.MuiFormControl-root{row-gap:var(--stratakit-space-x1)}.MuiFormLabel-root{font-size:var(--stratakit-font-size-14);color:var(--stratakit-color-text-neutral-secondary);position:relative;transform:none}.MuiChip-root:where(.MuiChip-filledDefault.MuiChip-colorDefault){background-color:var(--stratakit-color-bg-neutral-base);border:1px solid var(--stratakit-color-border-neutral-base)}.MuiDialogActions-root:where(.MuiDialogActions-spacing){padding-block:var(--stratakit-space-x4);padding-inline:var(--stratakit-space-x5)}.MuiIconButton-root{border-radius:4px}.MuiIconButton-root:where(.MuiIconButton-colorPrimary){color:var(--stratakit-color-icon-accent-strong)}.MuiIconButton-root:where(.MuiIconButton-colorSecondary){color:var(--stratakit-color-icon-neutral-primary)}.MuiIconButton-root:where(.MuiIconButton-colorError){color:var(--stratakit-color-icon-critical-base)}.MuiInputBase-root{font:var(--stratakit-mui-font-body2);border:1px solid var(--stratakit-color-border-neutral-base);padding:0}.MuiInputBase-root:where(:focus-within){border-color:var(--stratakit-color-border-accent-strong);outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}.MuiInputBase-root :where(fieldset){display:none}.MuiInputBase-input{align-content:center;min-block-size:36.5px;padding-block:0;padding-inline:14px}.MuiInputBase-input:where(.MuiInputBase-inputMultiline){align-content:baseline;padding-block:8.25px}.MuiInputBase-input:where(.MuiInputBase-inputAdornedStart){padding-inline-start:0}.MuiInputBase-input:where(.MuiInputBase-inputAdornedEnd){padding-inline-end:0}.MuiInputBase-input:where(:focus-visible){outline:none!important}.MuiInputAdornment-root:where(.MuiInputAdornment-positionStart){margin-inline-start:var(--stratakit-space-x2);margin-inline-end:var(--stratakit-space-x1)}.MuiInputAdornment-root:where(.MuiInputAdornment-positionEnd){margin-inline-start:var(--stratakit-space-x1);margin-inline-end:var(--stratakit-space-x2)}.MuiLink-root{text-underline-offset:var(--stratakit-space-x05);font-weight:500;text-decoration-color:currentColor;transition:text-underline-offset .15s ease-out}.MuiLink-root:where(:hover,:focus-visible){text-underline-offset:var(--stratakit-space-x1)}.MuiMenuItem-root:where(.Mui-focusVisible){outline-offset:-2px}.MuiPaper-root{--Paper-overlay:unset!important}.MuiPaper-root:where(.MuiPaper-elevation1){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-base)}.MuiPaper-root:where(.MuiPaper-elevation2,.MuiPaper-elevation3,.MuiPaper-elevation4,.MuiPaper-elevation5,.MuiPaper-elevation6,.MuiPaper-elevation7){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-base)}.MuiPaper-root:where(.MuiPaper-elevation8,.MuiPaper-elevation9,.MuiPaper-elevation10,.MuiPaper-elevation11,.MuiPaper-elevation12,.MuiPaper-elevation13,.MuiPaper-elevation14,.MuiPaper-elevation15,.MuiPaper-elevation16,.MuiPaper-elevation17,.MuiPaper-elevation18,.MuiPaper-elevation19,.MuiPaper-elevation20,.MuiPaper-elevation21,.MuiPaper-elevation22,.MuiPaper-elevation23,.MuiPaper-elevation24){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-level-1)}.MuiTab-root:where(.Mui-selected){color:var(--stratakit-color-text-accent-strong)}.MuiTab-root:where(:focus-visible){outline-offset:-4px}.MuiTabs-indicator{background-color:var(--stratakit-color-border-accent-strong)}.MuiTooltip-tooltip{box-shadow:var(--stratakit-shadow-control-tooltip-base)}.MuiSwitch-root .MuiSwitch-switchBase:where(.MuiSwitch-colorPrimary):where(.Mui-checked):where(:not(.Mui-disabled)){color:var(--stratakit-mui-palette-primary-dark)}.MuiSwitch-root:where(:has(.MuiSwitch-switchBase.Mui-focusVisible)){outline:2px solid var(--stratakit-color-border-accent-strong)}}@layer mui{:focus-visible:not(#a#b){outline:revert-layer}}`;
3
3
 
4
4
  // src/styles.css.ts
5
5
  var styles_css_default = styles_default;
package/dist/Root.js CHANGED
@@ -9,7 +9,7 @@ import { createTheme } from "./createTheme.js";
9
9
  import css from "./styles.css.js";
10
10
  const theme = createTheme();
11
11
  const packageName = "@stratakit/mui";
12
- const key = `${packageName}@${"0.1.2"}`;
12
+ const key = `${packageName}@${"0.2.0"}`;
13
13
  const Root = React.forwardRef((props, forwardedRef) => {
14
14
  const {
15
15
  children,
@@ -77,7 +77,7 @@ function Styles() {
77
77
  const $ = _c(4);
78
78
  const rootContext = useSafeContext(RootContext);
79
79
  if (!rootContext.versions?.has(packageName)) {
80
- rootContext.versions?.set(packageName, "0.1.2");
80
+ rootContext.versions?.set(packageName, "0.2.0");
81
81
  }
82
82
  const {
83
83
  rootNode,
package/dist/createTheme.js CHANGED
@@ -2,6 +2,27 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { createTheme as createMuiTheme } from "@mui/material/styles";
3
3
  import { ArrowDownIcon, CaretsUpDownIcon, ChevronDownIcon, ChevronLeftDoubleIcon, ChevronLeftIcon, ChevronRightDoubleIcon, ChevronRightIcon, DismissIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "./Icon.js";
4
4
  function createTheme() {
5
+ const palette = {
6
+ primary: {
7
+ main: "var(--stratakit-mui-palette-primary-main)"
8
+ },
9
+ secondary: {
10
+ main: "var(--stratakit-mui-palette-secondary-main)"
11
+ },
12
+ error: {
13
+ main: "var(--stratakit-mui-palette-error-main)"
14
+ },
15
+ warning: {
16
+ main: "var(--stratakit-mui-palette-warning-main)"
17
+ },
18
+ info: {
19
+ main: "var(--stratakit-mui-palette-info-main)"
20
+ },
21
+ success: {
22
+ main: "var(--stratakit-mui-palette-success-main)"
23
+ },
24
+ grey: Object.fromEntries(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"].map((shade) => [shade, `var(--stratakit-mui-palette-grey-${shade})`]))
25
+ };
5
26
  return createMuiTheme({
6
27
  cssVariables: {
7
28
  nativeColor: true,
@@ -9,8 +30,12 @@ function createTheme() {
9
30
  cssVarPrefix: "stratakit-mui"
10
31
  },
11
32
  colorSchemes: {
12
- light: true,
13
- dark: true
33
+ light: {
34
+ palette
35
+ },
36
+ dark: {
37
+ palette
38
+ }
14
39
  },
15
40
  typography: {
16
41
  fontFamily: "var(--stratakit-font-family-sans)",
@@ -43,6 +68,7 @@ function createTheme() {
43
68
  },
44
69
  MuiAlert: {
45
70
  defaultProps: {
71
+ variant: "outlined",
46
72
  iconMapping: {
47
73
  error: /* @__PURE__ */ jsx(ErrorIcon, {}),
48
74
  info: /* @__PURE__ */ jsx(InfoIcon, {}),
@@ -76,7 +102,15 @@ function createTheme() {
76
102
  },
77
103
  MuiButton: {
78
104
  defaultProps: {
79
- color: "secondary"
105
+ color: "secondary",
106
+ variant: "contained"
107
+ }
108
+ },
109
+ MuiButtonGroup: {
110
+ defaultProps: {
111
+ color: "secondary",
112
+ disableRipple: true
113
+ // ButtonGroup overrides Button's disableRipple so we need to set it here as well
80
114
  }
81
115
  },
82
116
  MuiChip: {
@@ -90,9 +124,69 @@ function createTheme() {
90
124
  // Checkbox doesn't inherit from ButtonBase
91
125
  }
92
126
  },
127
+ MuiInputLabel: {
128
+ defaultProps: {
129
+ shrink: true
130
+ // Removes label animation and masked border from TextField
131
+ }
132
+ },
133
+ MuiFab: {
134
+ defaultProps: {
135
+ color: "primary"
136
+ }
137
+ },
93
138
  MuiLink: {
94
139
  defaultProps: {
95
140
  color: "textPrimary"
141
+ },
142
+ variants: [{
143
+ props: {
144
+ color: "primary"
145
+ },
146
+ style: {
147
+ color: "var(--stratakit-color-text-accent-strong)"
148
+ }
149
+ }, {
150
+ props: {
151
+ color: "secondary"
152
+ },
153
+ style: {
154
+ color: "var(--stratakit-color-text-neutral-primary)"
155
+ }
156
+ }, {
157
+ props: {
158
+ color: "error"
159
+ },
160
+ style: {
161
+ color: "var(--stratakit-color-text-critical-base)"
162
+ }
163
+ }, {
164
+ props: {
165
+ color: "info"
166
+ },
167
+ style: {
168
+ color: "var(--stratakit-color-text-info-base)"
169
+ }
170
+ }, {
171
+ props: {
172
+ color: "success"
173
+ },
174
+ style: {
175
+ color: "var(--stratakit-color-text-positive-base)"
176
+ }
177
+ }, {
178
+ props: {
179
+ color: "warning"
180
+ },
181
+ style: {
182
+ color: "var(--stratakit-color-text-attention-base)"
183
+ }
184
+ }]
185
+ },
186
+ MuiOutlinedInput: {
187
+ defaultProps: {
188
+ notched: false
189
+ // Removes masked border from Select
96
190
  }
97
191
  },
98
192
  MuiPaginationItem: {
@@ -125,6 +219,11 @@ function createTheme() {
125
219
  // TODO: This should use sort-ascending and sort-descending icons, but that requires disabling MUI's built-in icon rotation.
126
220
  IconComponent: ArrowDownIcon
127
221
  }
222
+ },
223
+ MuiTooltip: {
224
+ defaultProps: {
225
+ describeChild: true
226
+ }
128
227
  }
129
228
  }
130
229
  });
package/dist/styles.css.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // inline-css:/home/runner/work/design-system/design-system/packages/mui/src/styles.css
2
- var styles_default = String.raw`@layer stratakit{[data-color-scheme],.🥝MuiRoot{--stratakit-mui-palette-background-default:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-divider:var(--stratakit-color-border-page-base);--stratakit-mui-palette-text-primary:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-text-secondary:var(--stratakit-color-text-neutral-secondary);--stratakit-mui-palette-text-disabled:var(--stratakit-color-text-neutral-disabled);--stratakit-mui-palette-primary-main:var(--stratakit-color-bg-accent-base);--stratakit-mui-palette-primary-dark:var(--stratakit-color-bg-accent-faded);--stratakit-mui-palette-primary-light:var(--stratakit-color-bg-accent-muted);--stratakit-mui-palette-primary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-secondary-main:var(--stratakit-color-bg-mono-base);--stratakit-mui-palette-secondary-dark:var(--stratakit-color-bg-mono-faded);--stratakit-mui-palette-secondary-light:var(--stratakit-color-bg-mono-muted);--stratakit-mui-palette-secondary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-action-active:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-action-disabled:var(--stratakit-color-icon-neutral-disabled);--stratakit-mui-palette-action-disabledBackground:var(--stratakit-color-bg-glow-on-surface-disabled);--stratakit-mui-palette-error-main:var(--stratakit-color-bg-critical-base);--stratakit-mui-palette-error-dark:var(--stratakit-color-bg-critical-faded);--stratakit-mui-palette-error-light:var(--stratakit-color-bg-critical-muted);--stratakit-mui-palette-error-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-warning-main:var(--stratakit-color-bg-attention-base);--stratakit-mui-palette-warning-dark:var(--stratakit-color-bg-attention-faded);--stratakit-mui-palette-warning-light:var(--stratakit-color-bg-attention-muted);--stratakit-mui-palette-warning-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-success-main:var(--stratakit-color-bg-positive-base);--stratakit-mui-palette-success-dark:var(--stratakit-color-bg-positive-faded);--stratakit-mui-palette-success-light:var(--stratakit-color-bg-positive-muted);--stratakit-mui-palette-success-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-info-main:var(--stratakit-color-bg-info-base);--stratakit-mui-palette-info-dark:var(--stratakit-color-bg-info-faded);--stratakit-mui-palette-info-light:var(--stratakit-color-bg-info-muted);--stratakit-mui-palette-info-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-grey-50:oklch(85.95% .006 255.48);--stratakit-mui-palette-grey-100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-300:oklch(69.04% .014 255.53);--stratakit-mui-palette-grey-400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-500:oklch(55.22% .018 253.99);--stratakit-mui-palette-grey-600:oklch(48.26% .017 254.7);--stratakit-mui-palette-grey-700:oklch(41.45% .013 256.75);--stratakit-mui-palette-grey-800:oklch(34.4% .011 264.42);--stratakit-mui-palette-grey-900:oklch(26.92% .008 268.32);--stratakit-mui-palette-grey-A100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-A200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-A400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-A700:oklch(41.45% .013 256.75)}.MuiAlert-icon{align-items:center}.MuiButton-root:where(.MuiButton-colorSecondary){--variant-containedBg:var(--stratakit-color-bg-neutral-base);--variant-containedColor:var(--stratakit-color-text-neutral-primary);--variant-outlinedColor:var(--stratakit-color-text-neutral-primary);--variant-textColor:var(--stratakit-color-text-neutral-primary)}.MuiButton-root:where(.MuiButton-colorSecondary):where(:hover){--variant-containedBg:color-mix(in oklch,var(--stratakit-color-bg-neutral-base)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%))}.MuiButton-root:where(.MuiButton-colorPrimary){--variant-outlinedColor:var(--stratakit-color-text-accent-strong);--variant-textColor:var(--stratakit-color-text-accent-strong)}.MuiCheckbox-root:where(.MuiCheckbox-colorPrimary):where(.Mui-checked,.MuiCheckbox-indeterminate):where(:not(.Mui-disabled)){color:var(--stratakit-mui-palette-primary-dark)}.MuiCheckbox-root:where(.Mui-focusVisible){outline:2px solid var(--stratakit-color-border-accent-strong)}.MuiFormLabel-colorPrimary.Mui-focused{color:var(--stratakit-mui-palette-primary-dark)}.MuiIconButton-root{border-radius:4px}.MuiLink-root{text-underline-offset:var(--stratakit-space-x05);font-weight:500;text-decoration-color:currentColor;transition:text-underline-offset .15s ease-out}.MuiLink-root:where(:hover,:focus-visible){text-underline-offset:var(--stratakit-space-x1)}.MuiMenuItem-root:where(.Mui-focusVisible){outline-offset:-2px}.MuiPaper-root{--Paper-overlay:unset!important}.MuiPaper-root:where(.MuiPaper-elevation1){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-base)}.MuiPaper-root:where(.MuiPaper-elevation2,.MuiPaper-elevation3,.MuiPaper-elevation4,.MuiPaper-elevation5,.MuiPaper-elevation6,.MuiPaper-elevation7){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-base)}.MuiPaper-root:where(.MuiPaper-elevation8,.MuiPaper-elevation9,.MuiPaper-elevation10,.MuiPaper-elevation11,.MuiPaper-elevation12,.MuiPaper-elevation13,.MuiPaper-elevation14,.MuiPaper-elevation15,.MuiPaper-elevation16,.MuiPaper-elevation17,.MuiPaper-elevation18,.MuiPaper-elevation19,.MuiPaper-elevation20,.MuiPaper-elevation21,.MuiPaper-elevation22,.MuiPaper-elevation23,.MuiPaper-elevation24){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-level-1)}.MuiTab-root:where(.Mui-selected){color:var(--stratakit-color-text-accent-strong)}.MuiTab-root:where(:focus-visible){outline-offset:-4px}.MuiTabs-indicator{background-color:var(--stratakit-color-border-accent-strong)}.MuiTooltip-tooltip{--stratakit-mui-palette-Tooltip-bg:var(--stratakit-color-bg-elevation-emphasis);box-shadow:var(--stratakit-shadow-control-tooltip-base)}.MuiSwitch-root .MuiSwitch-switchBase:where(.MuiSwitch-colorPrimary):where(.Mui-checked):where(:not(.Mui-disabled)){color:var(--stratakit-mui-palette-primary-dark)}.MuiSwitch-root:where(:has(.MuiSwitch-switchBase.Mui-focusVisible)){outline:2px solid var(--stratakit-color-border-accent-strong)}}@layer mui{:focus-visible:not(#a#b){outline:revert-layer}}`;
2
+ var styles_default = String.raw`@layer stratakit{[data-color-scheme],.🥝MuiRoot{--stratakit-mui-palette-background-default:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-divider:var(--stratakit-color-border-page-base);--stratakit-mui-palette-text-primary:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-text-secondary:var(--stratakit-color-text-neutral-secondary);--stratakit-mui-palette-text-disabled:var(--stratakit-color-text-neutral-disabled);--stratakit-mui-palette-text-icon:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-primary-main:var(--stratakit-color-bg-accent-base);--stratakit-mui-palette-primary-dark:var(--stratakit-color-bg-accent-faded);--stratakit-mui-palette-primary-light:var(--stratakit-color-bg-accent-muted);--stratakit-mui-palette-primary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-secondary-main:var(--stratakit-color-bg-mono-base);--stratakit-mui-palette-secondary-dark:var(--stratakit-color-bg-mono-faded);--stratakit-mui-palette-secondary-light:var(--stratakit-color-bg-mono-muted);--stratakit-mui-palette-secondary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-action-active:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-action-disabled:var(--stratakit-color-icon-neutral-disabled);--stratakit-mui-palette-action-disabledBackground:var(--stratakit-color-bg-glow-on-surface-disabled);--stratakit-mui-palette-error-main:var(--stratakit-color-bg-critical-base);--stratakit-mui-palette-error-dark:var(--stratakit-color-bg-critical-faded);--stratakit-mui-palette-error-light:var(--stratakit-color-bg-critical-muted);--stratakit-mui-palette-error-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-warning-main:var(--stratakit-color-bg-attention-base);--stratakit-mui-palette-warning-dark:var(--stratakit-color-bg-attention-faded);--stratakit-mui-palette-warning-light:var(--stratakit-color-bg-attention-muted);--stratakit-mui-palette-warning-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-success-main:var(--stratakit-color-bg-positive-base);--stratakit-mui-palette-success-dark:var(--stratakit-color-bg-positive-faded);--stratakit-mui-palette-success-light:var(--stratakit-color-bg-positive-muted);--stratakit-mui-palette-success-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-info-main:var(--stratakit-color-bg-info-base);--stratakit-mui-palette-info-dark:var(--stratakit-color-bg-info-faded);--stratakit-mui-palette-info-light:var(--stratakit-color-bg-info-muted);--stratakit-mui-palette-info-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-grey-50:oklch(85.95% .006 255.48);--stratakit-mui-palette-grey-100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-300:oklch(69.04% .014 255.53);--stratakit-mui-palette-grey-400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-500:oklch(55.22% .018 253.99);--stratakit-mui-palette-grey-600:oklch(48.26% .017 254.7);--stratakit-mui-palette-grey-700:oklch(41.45% .013 256.75);--stratakit-mui-palette-grey-800:oklch(34.4% .011 264.42);--stratakit-mui-palette-grey-900:oklch(26.92% .008 268.32);--stratakit-mui-palette-grey-A100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-A200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-A400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-A700:oklch(41.45% .013 256.75);--stratakit-mui-palette-Alert-errorColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-infoColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-successColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-warningColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-errorFilledBg:var(--stratakit-color-bg-critical-transparent);--stratakit-mui-palette-Alert-infoFilledBg:var(--stratakit-color-bg-info-transparent);--stratakit-mui-palette-Alert-successFilledBg:var(--stratakit-color-bg-positive-transparent);--stratakit-mui-palette-Alert-warningFilledBg:var(--stratakit-color-bg-attention-transparent);--stratakit-mui-palette-Alert-errorFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-infoFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-successFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-warningFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-errorIconColor:var(--stratakit-color-icon-critical-base);--stratakit-mui-palette-Alert-infoIconColor:var(--stratakit-color-icon-info-base);--stratakit-mui-palette-Alert-successIconColor:var(--stratakit-color-icon-positive-base);--stratakit-mui-palette-Alert-warningIconColor:var(--stratakit-color-icon-attention-base);--stratakit-mui-palette-AppBar-defaultBg:var(--stratakit-color-bg-page-base);--stratakit-mui-palette-AppBar-darkBg:var(--stratakit-color-bg-page-base);--stratakit-mui-palette-AppBar-darkColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Avatar-defaultBg:var(--stratakit-color-bg-mono-base);--stratakit-mui-palette-Button-inheritContainedBg:var(--stratakit-color-bg-neutral-base);--stratakit-mui-palette-Button-inheritContainedHoverBg:var(--stratakit-color-bg-neutral-base);--stratakit-mui-palette-Chip-defaultBorder:var(--stratakit-color-border-neutral-base);--stratakit-mui-palette-Chip-defaultAvatarColor:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-Chip-defaultIconColor:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-LinearProgress-primaryBg:var(--stratakit-color-bg-accent-muted);--stratakit-mui-palette-LinearProgress-secondaryBg:var(--stratakit-color-border-page-base);--stratakit-mui-palette-LinearProgress-infoBg:var(--stratakit-color-bg-info-muted);--stratakit-mui-palette-LinearProgress-successBg:var(--stratakit-color-bg-positive-muted);--stratakit-mui-palette-LinearProgress-warningBg:var(--stratakit-color-bg-attention-muted);--stratakit-mui-palette-LinearProgress-errorBg:var(--stratakit-color-bg-critical-muted);--stratakit-mui-palette-Skeleton-bg:var(--stratakit-color-bg-glow-on-surface-disabled);--stratakit-mui-palette-SnackbarContent-bg:var(--stratakit-color-bg-elevation-emphasis);--stratakit-mui-palette-SnackbarContent-color:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-StepConnector-border:var(--stratakit-color-border-neutral-muted);--stratakit-mui-palette-StepContent-border:var(--stratakit-color-border-neutral-muted);--stratakit-mui-palette-TableCell-border:var(--stratakit-color-border-neutral-muted);--stratakit-mui-palette-Tooltip-bg:var(--stratakit-color-bg-elevation-emphasis)}.MuiAccordion-root{background-color:#0000}.MuiAlert-icon{align-items:center}:where(.MuiAutocomplete-hasPopupIcon) .MuiAutocomplete-input{padding-inline-end:29px}:where(.MuiAutocomplete-hasClearIcon) .MuiAutocomplete-input{padding-inline-end:53px}.MuiAutocomplete-tag{margin-inline-start:var(--stratakit-space-x1);margin-inline-end:0}.MuiAutocomplete-tag:where(:nth-child(1 of .MuiAutocomplete-tag)){margin-inline-start:var(--stratakit-space-x2)}.MuiAutocomplete-tag:where(:nth-last-child(1 of .MuiAutocomplete-tag)){margin-inline-end:var(--stratakit-space-x2)}.MuiAppBar-root{background-color:var(--stratakit-color-bg-page-base);box-shadow:none;border-block-end:1px solid var(--stratakit-color-border-page-base);color:var(--stratakit-color-text-neutral-primary)}.MuiButtonBase-root:where(.Mui-disabled){cursor:not-allowed;pointer-events:auto;background-color:#0000}.MuiButton-root:where(.MuiButton-colorSecondary){--variant-containedBg:var(--stratakit-color-bg-neutral-base);--variant-containedColor:var(--stratakit-color-text-neutral-primary);--variant-outlinedColor:var(--stratakit-color-text-neutral-primary);--variant-textColor:var(--stratakit-color-text-neutral-primary)}@media (any-hover:hover){.MuiButton-root:where(.MuiButton-colorSecondary):where(:hover){--variant-containedBg:color-mix(in oklch,var(--stratakit-color-bg-neutral-base)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%))}}.MuiButton-root:where(.MuiButton-colorPrimary){--variant-outlinedColor:var(--stratakit-color-text-accent-strong);--variant-textColor:var(--stratakit-color-text-accent-strong)}.MuiButton-root:where(.MuiButton-contained):where(.Mui-disabled){background-color:var(--stratakit-color-bg-glow-on-surface-disabled)}.MuiCard-root{background-color:var(--stratakit-color-bg-elevation-base)}.MuiCardContent-root:where(:has(+.MuiCardActions-root)){padding-block-end:0}.MuiCardActions-root{padding:var(--stratakit-space-x4)}.MuiCheckbox-root:where(.MuiCheckbox-colorPrimary):where(.Mui-checked,.MuiCheckbox-indeterminate):where(:not(.Mui-disabled)){color:var(--stratakit-mui-palette-primary-dark)}.MuiCheckbox-root:where(.Mui-focusVisible){outline:2px solid var(--stratakit-color-border-accent-strong)}.MuiFormControl-root{row-gap:var(--stratakit-space-x1)}.MuiFormLabel-root{font-size:var(--stratakit-font-size-14);color:var(--stratakit-color-text-neutral-secondary);position:relative;transform:none}.MuiChip-root:where(.MuiChip-filledDefault.MuiChip-colorDefault){background-color:var(--stratakit-color-bg-neutral-base);border:1px solid var(--stratakit-color-border-neutral-base)}.MuiDialogActions-root:where(.MuiDialogActions-spacing){padding-block:var(--stratakit-space-x4);padding-inline:var(--stratakit-space-x5)}.MuiIconButton-root{border-radius:4px}.MuiIconButton-root:where(.MuiIconButton-colorPrimary){color:var(--stratakit-color-icon-accent-strong)}.MuiIconButton-root:where(.MuiIconButton-colorSecondary){color:var(--stratakit-color-icon-neutral-primary)}.MuiIconButton-root:where(.MuiIconButton-colorError){color:var(--stratakit-color-icon-critical-base)}.MuiInputBase-root{font:var(--stratakit-mui-font-body2);border:1px solid var(--stratakit-color-border-neutral-base);padding:0}.MuiInputBase-root:where(:focus-within){border-color:var(--stratakit-color-border-accent-strong);outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}.MuiInputBase-root :where(fieldset){display:none}.MuiInputBase-input{align-content:center;min-block-size:36.5px;padding-block:0;padding-inline:14px}.MuiInputBase-input:where(.MuiInputBase-inputMultiline){align-content:baseline;padding-block:8.25px}.MuiInputBase-input:where(.MuiInputBase-inputAdornedStart){padding-inline-start:0}.MuiInputBase-input:where(.MuiInputBase-inputAdornedEnd){padding-inline-end:0}.MuiInputBase-input:where(:focus-visible){outline:none!important}.MuiInputAdornment-root:where(.MuiInputAdornment-positionStart){margin-inline-start:var(--stratakit-space-x2);margin-inline-end:var(--stratakit-space-x1)}.MuiInputAdornment-root:where(.MuiInputAdornment-positionEnd){margin-inline-start:var(--stratakit-space-x1);margin-inline-end:var(--stratakit-space-x2)}.MuiLink-root{text-underline-offset:var(--stratakit-space-x05);font-weight:500;text-decoration-color:currentColor;transition:text-underline-offset .15s ease-out}.MuiLink-root:where(:hover,:focus-visible){text-underline-offset:var(--stratakit-space-x1)}.MuiMenuItem-root:where(.Mui-focusVisible){outline-offset:-2px}.MuiPaper-root{--Paper-overlay:unset!important}.MuiPaper-root:where(.MuiPaper-elevation1){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-base)}.MuiPaper-root:where(.MuiPaper-elevation2,.MuiPaper-elevation3,.MuiPaper-elevation4,.MuiPaper-elevation5,.MuiPaper-elevation6,.MuiPaper-elevation7){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-base)}.MuiPaper-root:where(.MuiPaper-elevation8,.MuiPaper-elevation9,.MuiPaper-elevation10,.MuiPaper-elevation11,.MuiPaper-elevation12,.MuiPaper-elevation13,.MuiPaper-elevation14,.MuiPaper-elevation15,.MuiPaper-elevation16,.MuiPaper-elevation17,.MuiPaper-elevation18,.MuiPaper-elevation19,.MuiPaper-elevation20,.MuiPaper-elevation21,.MuiPaper-elevation22,.MuiPaper-elevation23,.MuiPaper-elevation24){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-level-1)}.MuiTab-root:where(.Mui-selected){color:var(--stratakit-color-text-accent-strong)}.MuiTab-root:where(:focus-visible){outline-offset:-4px}.MuiTabs-indicator{background-color:var(--stratakit-color-border-accent-strong)}.MuiTooltip-tooltip{box-shadow:var(--stratakit-shadow-control-tooltip-base)}.MuiSwitch-root .MuiSwitch-switchBase:where(.MuiSwitch-colorPrimary):where(.Mui-checked):where(:not(.Mui-disabled)){color:var(--stratakit-mui-palette-primary-dark)}.MuiSwitch-root:where(:has(.MuiSwitch-switchBase.Mui-focusVisible)){outline:2px solid var(--stratakit-color-border-accent-strong)}}@layer mui{:focus-visible:not(#a#b){outline:revert-layer}}`;
3
3
 
4
4
  // src/styles.css.ts
5
5
  var styles_css_default = styles_default;
package/dist/types.d.ts ADDED
@@ -0,0 +1,135 @@
1
+ import type { TextFieldProps, TextFieldVariants } from "@mui/material";
2
+ import type * as React from "react";
3
+ declare module "@mui/material/Alert" {
4
+ interface AlertPropsVariantOverrides {
5
+ standard: false;
6
+ }
7
+ interface AlertOwnProps {
8
+ /**
9
+ * The default variant with `@stratakit/mui` is `"outlined"`.
10
+ *
11
+ * @default 'outlined'
12
+ */
13
+ variant?: "filled" | "outlined";
14
+ }
15
+ }
16
+ declare module "@mui/material/Button" {
17
+ interface ButtonPropsColorOverrides {
18
+ info: false;
19
+ success: false;
20
+ warning: false;
21
+ inherit: false;
22
+ }
23
+ interface ButtonOwnProps {
24
+ /**
25
+ * The default variant with `@stratakit/mui` is `"contained"`.
26
+ *
27
+ * @default 'contained'
28
+ */
29
+ variant?: "contained" | "outlined" | "text";
30
+ }
31
+ }
32
+ declare module "@mui/material/Checkbox" {
33
+ interface CheckboxPropsColorOverrides {
34
+ secondary: false;
35
+ default: false;
36
+ info: false;
37
+ success: false;
38
+ warning: false;
39
+ error: false;
40
+ }
41
+ }
42
+ declare module "@mui/material/Fab" {
43
+ interface FabPropsColorOverrides {
44
+ info: false;
45
+ success: false;
46
+ warning: false;
47
+ error: false;
48
+ default: false;
49
+ inherit: false;
50
+ }
51
+ interface FabOwnProps {
52
+ /**
53
+ * The default color with `@stratakit/mui` is `"primary"`.
54
+ *
55
+ * @default 'primary'
56
+ */
57
+ color?: "primary" | "secondary";
58
+ }
59
+ }
60
+ declare module "@mui/material/FormLabel" {
61
+ interface FormLabelPropsColorOverrides {
62
+ secondary: false;
63
+ info: false;
64
+ success: false;
65
+ warning: false;
66
+ error: false;
67
+ }
68
+ }
69
+ declare module "@mui/material/IconButton" {
70
+ interface IconButtonPropsColorOverrides {
71
+ info: false;
72
+ success: false;
73
+ warning: false;
74
+ inherit: false;
75
+ }
76
+ }
77
+ declare module "@mui/material/InputBase" {
78
+ interface InputBasePropsColorOverrides {
79
+ secondary: false;
80
+ info: false;
81
+ success: false;
82
+ warning: false;
83
+ error: false;
84
+ }
85
+ }
86
+ declare module "@mui/material/Radio" {
87
+ interface RadioPropsColorOverrides {
88
+ secondary: false;
89
+ default: false;
90
+ info: false;
91
+ success: false;
92
+ warning: false;
93
+ error: false;
94
+ }
95
+ }
96
+ declare module "@mui/material/Slider" {
97
+ interface SliderPropsColorOverrides {
98
+ secondary: false;
99
+ info: false;
100
+ success: false;
101
+ warning: false;
102
+ error: false;
103
+ }
104
+ }
105
+ declare module "@mui/material/Switch" {
106
+ interface SwitchPropsColorOverrides {
107
+ secondary: false;
108
+ default: false;
109
+ info: false;
110
+ success: false;
111
+ warning: false;
112
+ error: false;
113
+ }
114
+ }
115
+ declare module "@mui/material/TextField" {
116
+ interface TextFieldPropsColorOverrides {
117
+ secondary: false;
118
+ info: false;
119
+ success: false;
120
+ warning: false;
121
+ error: false;
122
+ }
123
+ export default function TextField(props: {
124
+ /** @deprecated DO NOT USE */ variant?: TextFieldVariants;
125
+ } & Omit<TextFieldProps, "variant">): React.JSX.Element;
126
+ }
127
+ declare module "@mui/material/Tooltip" {
128
+ interface TooltipOwnProps {
129
+ /**
130
+ * The default value with `@stratakit/mui` is `true`.
131
+ * Use `describeChild={false}` if you want to label the child element.
132
+ */
133
+ describeChild?: boolean;
134
+ }
135
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stratakit/mui",
3
3
  "type": "module",
4
- "version": "0.1.2",
4
+ "version": "0.2.0",
5
5
  "license": "MIT",
6
6
  "sideEffects": false,
7
7
  "types": "./dist/index.d.ts",
@@ -12,6 +12,11 @@
12
12
  "development": "./dist/DEV/index.js",
13
13
  "default": "./dist/index.js"
14
14
  },
15
+ "./types.d.ts": {
16
+ "@stratakit/source": "./src/types.d.ts",
17
+ "types": "./dist/types.d.ts",
18
+ "default": "./dist/types.d.ts"
19
+ },
15
20
  "./package.json": "./package.json"
16
21
  },
17
22
  "files": [
@@ -41,7 +46,7 @@
41
46
  ],
42
47
  "dependencies": {
43
48
  "@stratakit/foundations": "^0.4.5",
44
- "@stratakit/icons": "^0.2.2",
49
+ "@stratakit/icons": "^0.3.0",
45
50
  "classnames": "^2.5.1",
46
51
  "react-compiler-runtime": "^1.0.0"
47
52
  },
@@ -49,8 +54,8 @@
49
54
  "@types/react": "^19.2.7",
50
55
  "@types/react-dom": "^19.2.3",
51
56
  "esbuild": "^0.27.0",
52
- "react": "^19.2.1",
53
- "react-dom": "^19.2.1",
57
+ "react": "^19.2.3",
58
+ "react-dom": "^19.2.3",
54
59
  "typescript": "~5.9.3"
55
60
  },
56
61
  "peerDependencies": {