---
title: "no-restricted-theme-tokens"
description: "Reports utilities that use theme tokens that your project reserves, such as the default palette."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# no-restricted-theme-tokens

This rule reports a utility that uses a theme token that your project reserves,
such as the default palette color behind `bg-blue-500`. Use it to make components
use role names such as `bg-action`. The rule is off until you list tokens.

## Configuration

```json
{
  "lint": {
    "rules": {
      "no-restricted-theme-tokens": {
        "severity": "warn",
        "tokens": ["--color-blue-*"]
      }
    }
  }
}
```

## Reported

```tsx
style("bg-blue-500");
```

> no-restricted-theme-tokens: direct use of theme token `--color-blue-500` is forbidden
> 
> Example:1:8

## Fixed

```tsx
style("bg-action");
```

## How to fix

Use the role token that stands for the color, as in the example. The role token
can still refer to the palette in its definition:

```css
@theme {
  --color-action: var(--color-blue-500);
}
```

## Options

`tokens` lists patterns for the reserved custom properties, such as
`--color-blue-*`. Patterns accept `*` and `?`, and they are case-sensitive. The
list must not be empty when the rule is on.

## Rule settings

| Preset | Severity |
| --- | --- |
| `recommended` | off |
| `strict` | off |
| `stylistic` | off |

| Option | Default |
| --- | --- |
| `checkImplementation` | `true` |
| `tokens` | `[]` |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/no-restricted-theme-tokens/index.mdx