@efficiency-point/design-system 0.3.0 → 0.4.1

package/README.md

@@ -31,9 +31,38 @@ export function Example() {
 
 ## Темизация
 
-Палитра по умолчанию — Calm Teal: primary #16756d; brand ссылается на primary. Особый сливовый акцент secondary #76528b (hover #634575, active #533963, surface #f3eef7) предназначен для редких специальных действий. Нейтральные и семантические оттенки согласованы с teal; success, warning и error сохраняют отдельные смысловые цвета.
+Доступны две полные палитры: **Signal** (по умолчанию) и **Teal** (исходная тема версии 0.3.0). Signal использует зелёный primary #007b45, жёлтый secondary #f6c500 с тёмным текстом, нейтральные серые поверхности, синие информационные и красные ошибочные состояния. Геометрия, типографика и API существующих компонентов не меняются.
 
-Информационный акцент: --color-info #087d71, текст #11665d, фон #e8f4f1. Цвета переопределяются публичными CSS-токенами; --color-background ссылается на --color-surface. Светлый --color-accent-on-dark #5ed5c8 используется на тёмной панели видеоплеера.
+В Teal сохранены исходные значения: primary #16756d; brand ссылается на primary. Сливовый secondary #76528b (hover #634575, active #533963, surface #f3eef7) предназначен для специальных действий. Для сохранения прежнего отображения при обновлении задайте `<html data-ds-theme="teal">` **до первой отрисовки**.
+
+`styles.css` содержит обе темы. Атрибут `data-ds-theme="teal"` или `data-ds-theme="signal"` на `html` переключает всю палитру, включая порталы. Локальный атрибут поддерживает сравнение обычных компонентов; порталы наследуют тему документа. Переопределения потребителя через поздний `:root` сохраняют приоритет.
+
+### Переключатель и сохранение
+
+```tsx
+import { useState } from 'react';
+import { applyDSTheme, DSThemeSwitcher, getStoredDSTheme } from '@efficiency-point/design-system';
+import '@efficiency-point/design-system/styles.css';
+
+// В клиентской точке входа, до createRoot().render().
+applyDSTheme(getStoredDSTheme());
+
+export function ThemePicker() {
+    const [theme, setTheme] = useState(getStoredDSTheme);
+    return <DSThemeSwitcher value={theme} onChange={(next) => {
+        applyDSTheme(next);
+        setTheme(next);
+    }} />;
+}
+```
+
+`DSThemeSwitcher` — controlled-компонент (`value`, `onChange`, необязательные `compact` и `disabled`). Меню управляется клавиатурой: Tab, стрелки, Space, Escape. `compact` скрывает подпись, сохраняя доступное имя и подсказку. `applyDSTheme` применяет тему к `document.documentElement` и сохраняет её под ключом `efficiency-point.design-system.theme`; `getStoredDSTheme` возвращает Signal при отсутствии/невалидности значения или блокировке storage. Импорт библиотеки сам не обращается к DOM и не меняет storage. При SSR задавайте начальный атрибут на сервере либо восстанавливайте выбор ранним клиентским скриптом до отображения страницы.
+
+В Storybook переключатель в верхней панели синхронизирован с **Design System → Foundations → Themes → Предпросмотр тем** и примером самого переключателя. Выбор сохраняется после перезагрузки, применяется в Canvas/Docs и синхронизируется между вкладками. Сравнение двух палитр на странице предпросмотра остаётся фиксированным.
+
+Регрессия тем: после `npm run build` запустите `node tests/theme-browser.mjs`. Проверяются исходные токены Teal, состояния кнопок, полнота Signal, переопределения потребителя и forced-colors. Для проверки переключателя, localStorage, вкладок, Docs и mobile соберите и запустите Storybook, задайте `STORYBOOK_URL` (по умолчанию `http://127.0.0.1:6093`) и выполните `node tests/theme-storybook.mjs`.
+
+Информационный акцент Teal: --color-info #087d71, текст #11665d, фон #e8f4f1. Цвета переопределяются публичными CSS-токенами; --color-background ссылается на --color-surface. Светлый --color-accent-on-dark #5ed5c8 используется на тёмной панели видеоплеера. В Signal видеоплеер использует нейтральную тёмную палитру и жёлтый акцент. Цвета backdrop и тени также вынесены в токены.
 
 Компоненты используют CSS custom properties из `tokens.css`. Их можно переопределить после импорта библиотечного CSS:
 

package/dist/components/DSThemeSwitcher/DSThemeSwitcher.d.ts

@@ -0,0 +1,9 @@
+import { DSTheme } from './theme';
+export type DSThemeSwitcherProps = {
+    value: DSTheme;
+    onChange: (theme: DSTheme) => void;
+    compact?: boolean;
+    disabled?: boolean;
+};
+export declare const DSThemeSwitcher: ({ value, onChange, compact, disabled }: DSThemeSwitcherProps) => import("react").JSX.Element;
+//# sourceMappingURL=DSThemeSwitcher.d.ts.map

package/dist/components/DSThemeSwitcher/DSThemeSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSThemeSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/DSThemeSwitcher/DSThemeSwitcher.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,KAAK,OAAO,EAAE,MAAM,SAAS,CAAC;AAGvD,MAAM,MAAM,oBAAoB,GAAG;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,wCAAwD,oBAAoB,gCAoE3G,CAAC"}

package/dist/components/DSThemeSwitcher/theme.d.ts

@@ -0,0 +1,9 @@
+export type DSTheme = 'teal' | 'signal';
+export declare const DS_THEME_STORAGE_KEY = "efficiency-point.design-system.theme";
+export declare const DS_THEME_NAMES: Record<DSTheme, string>;
+export declare const isDSTheme: (value: unknown) => value is DSTheme;
+/** Safe to call during SSR and when browser storage is unavailable. */
+export declare const getStoredDSTheme: () => DSTheme;
+/** Apply to the document so portals inherit the same theme. No import-time side effects. */
+export declare const applyDSTheme: (theme: DSTheme) => void;
+//# sourceMappingURL=theme.d.ts.map

package/dist/components/DSThemeSwitcher/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/components/DSThemeSwitcher/theme.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExC,eAAO,MAAM,oBAAoB,yCAAyC,CAAC;AAC3E,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAsC,CAAC;AAE1F,eAAO,MAAM,SAAS,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,OAAiD,CAAC;AAEtG,uEAAuE;AACvE,eAAO,MAAM,gBAAgB,QAAO,OAOnC,CAAC;AAEF,4FAA4F;AAC5F,eAAO,MAAM,YAAY,GAAI,OAAO,OAAO,KAAG,IAO7C,CAAC"}