feat(decnet_web/theme-lab): scaffold dev-gated /theme-lab route
Adds VITE_DECNET_DEVELOPER build-time gate: when unset, the isDeveloperMode() helper collapses to a constant false and Vite tree-shakes both the lazy import and the conditional <Route> out of the prod bundle. ThemeLab is currently a header stub; subsequent tasks fill it with the design-system primitive zoo plus a Dark/Light toggle for live token tuning. Route is intentionally absent from ROUTE_LABELS / sidebar — direct URL only.
This commit is contained in:
21
decnet_web/src/components/ThemeLab/ThemeLab.css
Normal file
21
decnet_web/src/components/ThemeLab/ThemeLab.css
Normal file
@@ -0,0 +1,21 @@
|
||||
/* ThemeLab — lab-page-specific layout only.
|
||||
* Colours come from index.css tokens; no hex literals here. */
|
||||
|
||||
.theme-lab {
|
||||
padding: var(--space-8);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.theme-lab .page-header h1 {
|
||||
font-size: var(--fs-page);
|
||||
letter-spacing: var(--ls-title);
|
||||
color: var(--accent-color);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.theme-lab-subtitle {
|
||||
font-size: var(--fs-mini);
|
||||
letter-spacing: var(--ls-label);
|
||||
opacity: 0.6;
|
||||
}
|
||||
23
decnet_web/src/components/ThemeLab/ThemeLab.tsx
Normal file
23
decnet_web/src/components/ThemeLab/ThemeLab.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import './ThemeLab.css';
|
||||
|
||||
/* Kitchen-sink theme lab.
|
||||
*
|
||||
* Dev-only page (gated upstream in App.tsx via isDeveloperMode()).
|
||||
* Subsequent tasks fill this in with every design-system primitive
|
||||
* and a Dark/Light toggle. For now: header stub so the route + gate
|
||||
* can land in isolation. */
|
||||
const ThemeLab: React.FC = () => {
|
||||
return (
|
||||
<div className="theme-lab" data-testid="theme-lab">
|
||||
<header className="page-header">
|
||||
<h1>THEME LAB</h1>
|
||||
<p className="theme-lab-subtitle">
|
||||
dev only · primitive zoo for theme regression
|
||||
</p>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThemeLab;
|
||||
@@ -0,0 +1,12 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import ThemeLab from '../ThemeLab';
|
||||
|
||||
describe('ThemeLab', () => {
|
||||
it('renders the page header stub', () => {
|
||||
render(<ThemeLab />);
|
||||
expect(screen.getByTestId('theme-lab')).toBeInTheDocument();
|
||||
expect(screen.getByText(/THEME LAB/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/dev only/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user