Один флагманский сайт и множество подсайтов вокруг него. Визуальный язык общий — различается набор и порядок блоков на страницах и, при необходимости, акцентный цвет и логотип.
Палитра, типографика, отступы, компоненты (шапка, карточки, подвал) — одни на все сайты.
Каждый подсайт собирает нужные блоки в своём наборе и порядке.
Один атрибут data-subsite переопределяет акцентный цвет.
Меняется только --c-accent / --c-link. Всё остальное — синий бренд.
Флагман использует все блоки. Подсайт берёт «Основной шаблон» (шапка · боковое меню раздела · контент · подвал) и добавляет нужное.
Импортируйте tokens.css глобально. Тему подсайта задаёт атрибут на корне.
// app/layout.tsx
import "@/styles/tokens.css";
export default function RootLayout({ children }) {
return (
<html lang="ru" data-subsite="clinic"> {/* подсайт: clinic | science | library */}
<body>{children}</body>
</html>
);
}
/* tokens.css */
[data-subsite="clinic"] { --c-accent: rgb(48,176,199); --c-link: rgb(48,176,199); }
[data-subsite="science"] { --c-accent: rgb(88,86,214); --c-link: rgb(88,86,214); }
/* компонент читает семантический токен, а не литерал */
.button-primary { background: var(--c-accent); color: #fff; }
Правило: компоненты ссылаются на семантические токены (--c-accent, --c-text, --c-link), а не на конкретные --c-sky. Тогда смена темы — одна строка.