@stratakit/mui 0.1.1 → 0.1.3

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 (10) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.md +21 -0
  3. package/dist/DEV/Root.js +2 -2
  4. package/dist/DEV/createTheme.js +17 -3
  5. package/dist/DEV/styles.css.js +1 -1
  6. package/dist/Root.js +2 -2
  7. package/dist/createTheme.js +29 -3
  8. package/dist/styles.css.js +1 -1
  9. package/dist/types.d.ts +11 -0
  10. package/package.json +8 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.1.3
4
+
5
+ - [#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`.
6
+ - [#1146](https://github.com/iTwin/design-system/pull/1146): Updated `Button` to use `variant="contained"` by default.
7
+
8
+ ## 0.1.2
9
+
10
+ - [#1137](https://github.com/iTwin/design-system/pull/1137): Updated `border-radius` of `IconButton` component.
11
+
3
12
  ## 0.1.1
4
13
 
5
14
  - [#1131](https://github.com/iTwin/design-system/pull/1131): Fixed the values for **warning** palette.
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.1"}`;
18
+ const key = `${packageName}@${"0.1.3"}`;
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.1");
60
+ rootContext.versions?.set(packageName, "0.1.3");
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)",
@@ -89,7 +102,8 @@ function createTheme() {
89
102
  },
90
103
  MuiButton: {
91
104
  defaultProps: {
92
- color: "secondary"
105
+ color: "secondary",
106
+ variant: "contained"
93
107
  }
94
108
  },
95
109
  MuiChip: {
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)}.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)}}`;
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}}`;
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.1"}`;
12
+ const key = `${packageName}@${"0.1.3"}`;
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.1");
80
+ rootContext.versions?.set(packageName, "0.1.3");
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)",
@@ -76,7 +101,8 @@ function createTheme() {
76
101
  },
77
102
  MuiButton: {
78
103
  defaultProps: {
79
- color: "secondary"
104
+ color: "secondary",
105
+ variant: "contained"
80
106
  }
81
107
  },
82
108
  MuiChip: {
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)}.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)}}`;
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}}`;
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,11 @@
1
+ import "@mui/material/Button";
2
+ declare module "@mui/material/Button" {
3
+ interface ButtonOwnProps {
4
+ /**
5
+ * The default variant with `@stratakit/mui` is `"contained"`.
6
+ *
7
+ * @default 'contained'
8
+ */
9
+ variant?: "contained" | "outlined" | "text";
10
+ }
11
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stratakit/mui",
3
3
  "type": "module",
4
- "version": "0.1.1",
4
+ "version": "0.1.3",
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": [
@@ -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": {