Is destructive-foreground variable actually used?

[fenprace]

This is the variable list copied from manual installation guide#Configure styles section:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

This one is from Theming#List of variables, the destructive-foreground is missing.

  :root {
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
-   --destructive-foreground: ???
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
  }

I didn't find any usage of destructive-foreground. I wonder is it used somewhere? Or it is reserved for later use? Is it safe to omit in configuration, or the theming article should be updated?

[krishparmar22242]

Great catch on the documentation inconsistency! It’s easy to assume it’s a leftover variable, but --destructive-foreground is definitely used and is essential for accessibility.

Here is exactly where it is used and why you shouldn't omit it:

1. The "Destructive" Button Variant

The most common usage is in the Button component. If you look at your components/ui/button.tsx, you will see the destructive variant defined like this:

destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",

• bg-destructive uses the --destructive variable for the background.
• text-destructive-foreground uses the --destructive-foreground variable for the text color.

2. Other Component Variants

It is also used in other components that signify danger or "warning" states:

• Badge: The destructive variant uses it for the text color.
• Alert: If you use a destructive alert, the text and icon colors rely on this variable to remain readable against the red background.

3. Why the values in your snippet look "wrong"

In the CSS block you pasted, you noticed:

• --destructive: oklch(0.577 0.245 27.325); (A red color)
• --destructive-foreground: oklch(0.577 0.245 27.325); (The exact same red color)

This is actually a typo in that specific manual guide snippet. If the background and the foreground are the same color, the text on your "Delete" buttons will be invisible.

• The Fix: Usually, --destructive-foreground should be a very light color (like white or a very pale red) to ensure contrast. In oklch, it should look more like oklch(0.985 0 0).

Summary for your configuration:

• Is it safe to omit? No. If you omit it, Tailwind won't be able to resolve the text-destructive-foreground class, and your destructive buttons will likely fall back to the default black text, which is unreadable on a dark red background.
• Is it a documentation bug? Yes. The "Theming" article should definitely include it, as it is part of the core "foreground/background" pairing system shadcn uses for all semantic colors.

If this explanation helps you fix your theme and clarifies the variable usage, please consider marking this as the accepted answer so it can help other developers avoid the same confusion!