[docs] Add focus ring styles docs

docs/src/docs/changelog/5-7-0.mdx

@@ -7,6 +7,14 @@ release: https://github.com/mantinedev/mantine/releases/tag/5.7.0
 date: 'October 20th, 2022'
 ---
 
+import { ThemeDemos } from '@mantine/demos';
+
+## Focus ring styles on theme
+
+You can now customize focus ring styles for all components in [MantineProvider](https://mantine.dev/theming/mantine-provider/):
+
+<Demo data={ThemeDemos.focusRingStyles} />
+
 ## Responsive Header and Footer height
 
 [Header and Footer](https://mantine.dev/core/app-shell/) components now support responsive height:

docs/src/docs/theming/theme-object.mdx

@@ -23,6 +23,13 @@ interface MantineTheme {
   // never – focus ring is always hidden (not recommended)
   focusRing: 'auto' | 'always' | 'never';
 
+  // Change focus ring styles
+  focusRingStyles: {
+    styles(theme: MantineThemeBase): CSSObject;
+    resetStyles(theme: MantineThemeBase): CSSObject;
+    inputStyles(theme: MantineThemeBase): CSSObject;
+  };
+
   // Determines whether motion based animations should be disabled for
   // users who prefer to reduce motion in their OS settings
   respectReducedMotion: boolean;
@@ -180,6 +187,14 @@ learn how to setup dark theme in your application.
 
 <Demo data={ThemeDemos.focusRing} />
 
+### focusRingStyles
+
+`theme.focusRingStyles` allows you to customize focus ring styles that are applied to all `<button />`,
+`<a />` and `<input />` elements that are the part of the component. Note that `theme` object that is
+passed as an argument to `resetStyles`, `styles` and `inputStyles` functions does not have [theme.fn](/theming/functions/).
+
+<Demo data={ThemeDemos.focusRingStyles} />
+
 ### defaultRadius
 
 `theme.defaultRadius` controls default border-radius of all Mantine components ([Button](/core/button/), [TextInput](/core/text-input/), [ThemeIcon](/core/theme-icon/), etc.), default value is `sm`.