Chakra UI v.3 Custom Theme Not Applying in React App

I'm trying to change the focus outline color and set custom fonts using a custom Chakra UI theme in my React app, but neither the focus outline color nor the fonts are being applied as expected. Specifically, I want the input element to have a custom outline color when focused/selected, but it’s not happening.

Here's how I define my custom theme (theme.ts):

import { createSystem, defaultConfig } from "@chakra-ui/react";

export const system = createSystem(defaultConfig, {
  theme: {
    tokens: {
      fonts: {
        heading: { value: `'Bebas Neue', sans-serif` },
        body: { value: `'Poppins', sans-serif` },
      },
      shadows: {
        outline: {value: "0 0 0 3px rgba(225, 92, 66, 0.5)"}
      }
    },
  },
});
export default system;

And this is how I wrap my app (Provider.tsx):

import { ChakraProvider } from "@chakra-ui/react";
import { system } from "./theme";

export function Provider({ children }) {
  return <ChakraProvider value={system}>{children}</ChakraProvider>;
}

Finally, I use it in index.tsx:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "./components/ui/provider";

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>
);

My App.tsx:

import { Input, Heading } from '@chakra-ui/react';

function App() {
  return (
        <div>
            <Heading>Hello</Heading>
            <Input></Input>
        </div>
  );
}

export default App;

Solution

There are two things here. First, the way you use shadows mentioned in above code applies only if you use outline with shadow, as shown below:

App.tsx

import { Box } from "@chakra-ui/react";

function App() {
  return (
    <Box shadow="outline" p={5} borderRadius="md">

    </Box>
  );
}

export default App;

But if you want to add outline to your input then you need to use recipes according to the documentation.

import { createSystem, defaultConfig } from "@chakra-ui/react";

export const system = createSystem(defaultConfig, {
  theme: {
    tokens: {
      fonts: {
        heading: { value: `'Bebas Neue', sans-serif` },
        body: { value: `'Poppins', sans-serif` },
      },
      shadows: {
        outline: { value: "0 0 0 3px rgba(225, 92, 66, 0.5)" },
      },
    },
    recipes: {
      input: {
        base: {
          _focus: {
            boxShadow: "outline", // Use the same outline shadow
          },
        },
      },
    },
  },
});
export default system;

App.tsx should look like this:

import { Box, Input } from "@chakra-ui/react";

function App() {
  return (
    <Box shadow="outline" p={5} borderRadius="md">
      <Input placeholder="Enter text..." />
    </Box>
  );
}

export default App;