progress bar color react

[spyroot]

Hi Folks,

based on doc I tried to use a color for progress bar but it does not work. if use default i.e no value it invisible. I think it take default theme color. if I indicate via color="x" based on theme docs. It doesn't work as well. Only way to make it work use style.

I'm not sure is bug or it should not work with react ?

import { useState } from "react";
import { ThemeProvider } from "./theme-provider";
import { ThemePanel, Flex, Button, Box } from "@radix-ui/themes";
import * as Progress from "@radix-ui/react-progress";

export default function App() {
  const [appearance, setAppearance] = useState("dark");
  const [progress, setProgress] = useState(0);

  const toggleTheme = () => setAppearance(appearance === "dark" ? "light" : "dark");

  return (
    <ThemeProvider appearance={appearance}>
      <Flex direction="column" align="center" justify="center" style={{ padding: "2rem" }}>
        <Button onClick={toggleTheme} variant="soft">Toggle Theme</Button>
        <ThemePanel />


        <Box maxWidth="300px">
          <Progress.Root size="1" color="accent"
          value={50} style={{ height: "10px", background: "var(--accent-7)" }}>
            <Progress.Indicator  
    style={{
      width: "50%", 
      height: "100%", 
      backgroundColor: "var(--accent-color)", 
      transition: "width 0.3s ease", 
    }}
/>
          </Progress.Root>
          <Button onClick={() => setProgress((prev) => Math.min(prev + 10, 100))}>Increase Progress</Button>
          </Box>
      </Flex>


    </ThemeProvider>
  );
}