no-hardcoded-color

Enforce the exclusive use of design tokens as values for colors within the codebase.

📋 This rule is enabled in plugin:@pandacss/all.

📋 This rule is enabled in plugin:@pandacss/recommended.

Rule details

❌ Examples of incorrect code:

import { css } from './panda/css';

const styles = css({ color: '#FEE2E2' });

import { css } from './panda/css';

function App(){
  return <div className={css({ background: 'rgb(134, 239, 172)' })} />;
};

import { Circle } from './panda/jsx';

function App(){
  return <Circle _hover={{  borderColor: 'hsl(220deg, 14%, 96%)' }} />;
}

✔️ Examples of correct code:

import { css } from './panda/css';

const styles = css({ color: 'red.100' });

import { css } from './panda/css';

const styles = css({ color: 'red.100/30' });

import { css } from './panda/css';

function App(){
  return <div className={css({ background: 'green.300' })} />;
};

import { Circle } from './panda/jsx';

function App(){
  return <Circle _hover={{  borderColor: 'gray.100' }} />;
}

❌ Examples of incorrect code with [{"noOpacity":true}] options:

import { css } from './panda/css';

const styles = css({ color: 'red.100/30' });