टोकन और कॉन्फ़िगरेशन लेयर बनाना

/* tokens/primitives.css */
:root {
  /* Color primitives */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-900: #1e3a8a;

  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-500: #6b7280;
  --color-gray-900: #111827;

  --color-white: #ffffff;
  --color-black: #000000;

  /* Spacing primitives */
  --space-1: 0.25rem;
  --space-4: 1rem;
  --space-8: 2rem;
}

/* tokens/semantic.css */
:root {
  /* Brand colors */
  --color-primary:       var(--color-blue-600);
  --color-primary-hover: var(--color-blue-700);
  --color-primary-light: var(--color-blue-50);

  /* Surface colors */
  --color-surface:         var(--color-white);
  --color-surface-elevated: var(--color-gray-50);

  /* Text colors */
  --color-text-primary:   var(--color-gray-900);
  --color-text-secondary: var(--color-gray-500);

  /* Border colors */
  --color-border: var(--color-gray-100);
}

/* tokens/semantic.css (dark mode overrides) */
:root {
  --color-surface: #ffffff;
  --color-text-primary: #111827;
  --color-border: #f3f4f6;
}

.dark {
  --color-surface: #111827;        /* was white */
  --color-text-primary: #f9fafb;   /* was dark gray */
  --color-border: #1f2937;         /* was light gray */
  --color-surface-elevated: #1f2937;
  /* --color-primary unchanged: blue works in both modes */
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: 'var(--color-primary)',
          hover: 'var(--color-primary-hover)',
          light: 'var(--color-primary-light)',
        },
        surface: 'var(--color-surface)',
        'text-primary': 'var(--color-text-primary)',
        'text-secondary': 'var(--color-text-secondary)',
        border: 'var(--color-border)',
      },
    },
  },
};

<!-- Token-based Tailwind classes look just like built-in ones -->
<div class="bg-surface border border-border rounded-xl p-6">
  <h2 class="text-text-primary font-semibold">Card Title</h2>
  <p class="mt-2 text-text-secondary text-sm">Card description</p>
  <button class="mt-4 rounded-lg bg-primary px-4 py-2 font-semibold text-white
                 hover:bg-primary-hover transition">
    Primary Action
  </button>
</div>

/* tokens/semantic.css */
:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Cal Sans', var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

// tailwind.config.js
theme: {
  extend: {
    fontFamily: {
      sans: ['var(--font-sans)'],
      display: ['var(--font-display)'],
      mono: ['var(--font-mono)'],
    },
    fontSize: {
      display: ['3.75rem', { lineHeight: '1.1', fontWeight: '700' }],
      caption: ['0.75rem', { lineHeight: '1.5' }],
    },
  },
},

// tailwind.config.js
theme: {
  extend: {
    borderRadius: {
      card:  '0.75rem',   // 12px — used by Card, Dialog
      input: '0.5rem',    // 8px  — used by Input, Select
      badge: '9999px',    // pill — used by Badge, Tag
      button: '0.5rem',   // 8px  — used by all Button variants
    },
    spacing: {
      18: '4.5rem',
      22: '5.5rem',
      128: '32rem',
    },
  },
},

// tailwind.config.js
theme: {
  extend: {
    boxShadow: {
      card:     '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
      elevated: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
      focus:    '0 0 0 3px var(--color-primary-light)',
    },
  },
},

<!-- Use semantic shadow names -->
<div class="shadow-card hover:shadow-elevated transition-shadow">

// scripts/validate-tokens.js
const fs = require('fs');
const semanticCss = fs.readFileSync('tokens/semantic.css', 'utf8');
const primitiveCss = fs.readFileSync('tokens/primitives.css', 'utf8');

// Extract all var() references in semantic.css
const refs = [...semanticCss.matchAll(/var\(([^)]+)\)/g)].map(m => m[1].trim());

// Check each ref exists in primitives.css
const missing = refs.filter(ref => !primitiveCss.includes(ref + ':'));
if (missing.length > 0) {
  console.error('Undefined primitive tokens:', missing);
  process.exit(1);
}
console.log('All tokens valid.');

// playwright/dark-mode.spec.ts
import { test, expect } from '@playwright/test';

test('tokens switch correctly in dark mode', async ({ page }) => {
  await page.goto('/tokens-preview');

  // Light mode screenshot
  await expect(page).toHaveScreenshot('tokens-light.png');

  // Enable dark mode
  await page.evaluate(() =>
    document.documentElement.classList.add('dark')
  );

  // Dark mode screenshot
  await expect(page).toHaveScreenshot('tokens-dark.png');
});