Merge branch 'mantinedev:master' into master

mantinedev · Sep 21, 2023 · 374bf19 · 374bf19
2 parents a5c6222 + 41d11ee
commit 374bf19
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/docs/pages/guides/redwood.mdx b/docs/pages/guides/redwood.mdx
@@ -9,7 +9,7 @@ export default Layout(MDX_DATA.Redwood);
 
 ## Generate new application
 
-Follow [Redwood getting started guide](https://remix.run/) guide to
+Follow [Redwood getting started guide](https://redwoodjs.com/docs/quick-start) guide to
 create new Redwood application:
 
 ```bash

diff --git a/docs/pages/theming/colors.mdx b/docs/pages/theming/colors.mdx
@@ -202,3 +202,19 @@ function Demo() {
 ## Default colors
 
 <ThemeColors />
+
+## Add custom colors types
+
+TypeScript will only autocomplete Mantine's default colors when accessing the theme. To add your custom colors to the MantineColor type, you can use TypeScript module declaration.
+
+```ts
+import { DefaultMantineColor, MantineColorsTuple } from '@mantine/core';
+
+type ExtendedCustomColors = 'primaryColorName' | 'secondaryColorName' | DefaultMantineColor;
+
+declare module '@mantine/core' {
+  export interface MantineThemeColorsOverride {
+    colors: Record<ExtendedCustomColors, MantineColorsTuple>;
+  }
+}
+```
diff --git a/src/mantine-core/src/core/MantineProvider/theme.types.ts b/src/mantine-core/src/core/MantineProvider/theme.types.ts
@@ -201,7 +201,7 @@ export type DefaultMantineColor =
   | 'teal'
   | (string & {});
 
-export type MantineThemeColorsOverride = {};
+export interface MantineThemeColorsOverride {}
 
 export type MantineThemeColors = MantineThemeColorsOverride extends {
   colors: Record<infer CustomColors, MantineColorsTuple>;