anti
34c778277a
37 bare rgba(0, 255, 65, ...) literals across 10 component CSS files were forcing matrix-green to bleed into light mode no matter what data-theme=light overrode in :root. They're now mapped onto existing tokens by alpha bucket (0.025-0.05 -> --matrix-tint-5, 0.08-0.10 -> --matrix-tint-10, 0.18-0.30 -> --matrix-tint-30, 0.4 -> --fg-4, 0.5-0.6 -> --fg-3, 0.7-0.8 -> --fg-2). Adds --warn (#e0a040), --amber (alias of --warn), --crit (#e74c3c), and their tint-10 variants to :root, with ink-friendly light-mode overrides. Sweeps bare #ffaa00 / #e0a040 / #f59e0b / #ff4d4d / #e74c3c usages in the same files onto the new tokens. Files with var(--token, #fallback) patterns left alone — those were already token-driven and the fallbacks just provide safety. Login.css and inline TSX hex left for the per-page sweep.
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])