@cloud-ru/ds-theme 1.1.0 → 1.1.1-preview-d50a3da1.0

package/dist/cjs/utils/getThemeClassnames.js

@@ -2,19 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getThemeClassnameList = getThemeClassnameList;
 exports.getThemeClassnames = getThemeClassnames;
+const appearance_1 = require("../constants/appearance");
 /**
  * Чистая функция: собирает **полный** набор `sn-*` классов из осей оформления списком токенов.
  * Полный набор обязателен на каждой DOM-границе — токены `@cloud-ru/figma-variables` не
  * переопределяются по одной оси через CSS-каскад (см. providers-standard.md). Базовые слои
- * (`sn-base-styles`, `sn-figmaStyles`, `sn-components`) и материал (`sn-yes`/`sn-no`)
- * — всегда; `density`/`colorScheme`/`brand`/`brandRole` — если заданы.
+ * (`sn-base-styles`, `sn-figmaStyles`, `sn-components`), материал (`sn-yes`/`sn-no`) и платформа
+ * — всегда; `density`/`colorScheme`/`brand` — если заданы.
+ *
+ * Платформа эмитится всегда (по умолчанию `webDesktop`): плотность ссылается на её переменные и
+ * вычисляется на том же элементе, поэтому класс платформы должен стоять рядом с классом плотности.
  *
  * Списочная форма — источник истины для `getThemeClassnames` (строка через `join`) и для
  * `element.classList.add(...)`, которому нужны отдельные токены без промежуточного `split`.
  */
 function getThemeClassnameList(appearance = {}) {
-    const { density, colorScheme, brand, brandRole, acrylic } = appearance;
-    const classes = ['sn-base-styles', 'sn-figmaStyles', 'sn-components', acrylic ? 'sn-yes' : 'sn-no'];
+    const { density, colorScheme, brand, platform = appearance_1.PLATFORM.WebDesktop, acrylic } = appearance;
+    const classes = ['sn-base-styles', 'sn-figmaStyles', 'sn-components', acrylic ? 'sn-yes' : 'sn-no', `sn-${platform}`];
     if (density) {
         classes.push(`sn-${density}`);
     }
@@ -24,9 +28,6 @@ function getThemeClassnameList(appearance = {}) {
     if (brand) {
         classes.push(`sn-${brand}`);
     }
-    if (brandRole) {
-        classes.push(`sn-${brandRole}`);
-    }
     return classes;
 }
 /**

package/dist/cjs/utils/mergeAppearance.js

@@ -10,7 +10,7 @@ function mergeAppearance(parent, overrides) {
     return {
         colorScheme: overrides.colorScheme ?? parent.colorScheme,
         brand: overrides.brand ?? parent.brand,
-        brandRole: overrides.brandRole ?? parent.brandRole,
+        platform: overrides.platform ?? parent.platform,
         density: overrides.density ?? parent.density,
         acrylic: overrides.acrylic ?? parent.acrylic,
     };

package/dist/esm/components/ChildThemeProvider/ChildThemeProvider.js

@@ -12,11 +12,11 @@ import { ThemeScope } from '../ThemeScope/index.js';
  */
 export function ChildThemeProvider({ value, rootRef, className, children }) {
     const { appearance: parent } = useThemeAppearance();
-    const { colorScheme, brand, brandRole, density, acrylic } = value;
+    const { colorScheme, brand, platform, density, acrylic } = value;
     const childStore = useMemo(() => staticStore({
-        appearance: mergeAppearance(parent, { colorScheme, brand, brandRole, density, acrylic }),
+        appearance: mergeAppearance(parent, { colorScheme, brand, platform, density, acrylic }),
         setAppearance: undefined,
-    }), [parent, colorScheme, brand, brandRole, density, acrylic]);
+    }), [parent, colorScheme, brand, platform, density, acrylic]);
     return (_jsx(ThemeAppearanceStoreProvider, { store: childStore, children: _jsx(ThemeScope, { rootRef: rootRef, className: className, children: children }) }));
 }
 ChildThemeProvider.displayName = 'ChildThemeProvider';

package/dist/esm/components/RootThemeProvider/RootThemeProvider.d.ts

@@ -35,7 +35,7 @@ export type RootThemeProviderProps = {
 };
 /**
  * Корневой провайдер оформления. Ставится один раз в корне приложения: задаёт контекст осей
- * (`colorScheme`/`brand`/`brandRole`/`density`/`acrylic`) и эмитит полный набор `sn-*` на корень
+ * (`colorScheme`/`brand`/`platform`/`density`/`acrylic`) и эмитит полный набор `sn-*` на корень
  * (`rootRef`) либо на собственный wrapper. Объект контекста — глобальный синглтон (`Symbol.for`),
  * поэтому провайдер работает даже при нескольких версиях пакета в разных микрофронтах, а потребитель
  * читает ближайший провайдер. Локальные переопределения осей в поддереве — через `ChildThemeProvider`.

package/dist/esm/components/RootThemeProvider/RootThemeProvider.js

@@ -5,7 +5,7 @@ import { ThemeAppearanceStoreProvider, } from '../../context/appearanceContext.j
 import { ThemeScope } from '../ThemeScope/index.js';
 /**
  * Корневой провайдер оформления. Ставится один раз в корне приложения: задаёт контекст осей
- * (`colorScheme`/`brand`/`brandRole`/`density`/`acrylic`) и эмитит полный набор `sn-*` на корень
+ * (`colorScheme`/`brand`/`platform`/`density`/`acrylic`) и эмитит полный набор `sn-*` на корень
  * (`rootRef`) либо на собственный wrapper. Объект контекста — глобальный синглтон (`Symbol.for`),
  * поэтому провайдер работает даже при нескольких версиях пакета в разных микрофронтах, а потребитель
  * читает ближайший провайдер. Локальные переопределения осей в поддереве — через `ChildThemeProvider`.
@@ -14,14 +14,14 @@ import { ThemeScope } from '../ThemeScope/index.js';
  * результат передаётся в `value.colorScheme`. Не путать со старым `ThemeProvider` (themeMap/changeTheme).
  */
 export function RootThemeProvider({ value, store, rootRef, className, brandColor, nonce, children, }) {
-    const { colorScheme, brand, brandRole, density, acrylic } = value ?? {};
+    const { colorScheme, brand, platform, density, acrylic } = value ?? {};
     // Мемо по значениям осей (не по идентичности объекта `value`): иначе литерал `value={{…}}` у
     // потребителя пересоздавал бы стор на каждом рендере. Сеттер в static-режиме не нужен — значением
     // владеет сам потребитель через проп `value`.
     const staticThemeStore = useMemo(() => staticStore({
-        appearance: { colorScheme, brand, brandRole, density, acrylic },
+        appearance: { colorScheme, brand, platform, density, acrylic },
         setAppearance: undefined,
-    }), [colorScheme, brand, brandRole, density, acrylic]);
+    }), [colorScheme, brand, platform, density, acrylic]);
     return (_jsx(ThemeAppearanceStoreProvider, { store: store ?? staticThemeStore, children: _jsx(ThemeScope, { rootRef: rootRef, className: className, brandColor: brandColor, nonce: nonce, children: children }) }));
 }
 RootThemeProvider.displayName = 'RootThemeProvider';

package/dist/esm/constants/appearance.d.ts

@@ -4,20 +4,31 @@ export declare const DENSITY: {
     readonly Compact: "compact";
     readonly Spacious: "spacious";
 };
-/** Бренд. Класс `sn-brandA` / `sn-brandB` / `sn-brandC` / `sn-brandD` / `sn-brandE` / `sn-brandF`. */
-export declare const BRAND: {
-    readonly A: "brandA";
-    readonly B: "brandB";
-    readonly C: "brandC";
-    readonly D: "brandD";
-    readonly E: "brandE";
-    readonly F: "brandF";
+/**
+ * Платформа — набор размеров, типографики и отступов, из которого плотность берёт свои значения.
+ * Класс `sn-webDesktop` / `sn-webMobile`.
+ */
+export declare const PLATFORM: {
+    readonly WebDesktop: "webDesktop";
+    readonly WebMobile: "webMobile";
 };
-/** Роль бренда (палитра). Класс `sn-main` / `sn-alter` … */
-export declare const BRAND_ROLE: {
-    readonly Main: "main";
-    readonly Alter: "alter";
-    readonly Alter2: "alter2";
-    readonly Alter3: "alter3";
-    readonly Alter4: "alter4";
+/**
+ * Бренд. Класс `sn-<значение>`. Семейства HR-портала и сайта представлены финальными цветовыми
+ * вариантами: родительские слои `hrPortal`/`site` нужны только в Figma.
+ */
+export declare const BRAND: {
+    readonly CloudConsole: "cloudConsole";
+    readonly GigaId: "giga-id";
+    readonly Gitverse: "gitverse";
+    readonly SnackUI: "snackUI";
+    readonly HrBlue: "hrBlue";
+    readonly HrGraphite: "hrGraphite";
+    readonly HrGreen: "hrGreen";
+    readonly HrPurple: "hrPurple";
+    readonly HrYellow: "hrYellow";
+    readonly SiteBlue: "siteBlue";
+    readonly SiteGraphite: "siteGraphite";
+    readonly SiteGreen: "siteGreen";
+    readonly SitePurple: "sitePurple";
+    readonly SiteYellow: "siteYellow";
 };

package/dist/esm/constants/appearance.js

@@ -6,20 +6,31 @@ export const DENSITY = {
     Compact: 'compact',
     Spacious: 'spacious',
 };
-/** Бренд. Класс `sn-brandA` / `sn-brandB` / `sn-brandC` / `sn-brandD` / `sn-brandE` / `sn-brandF`. */
-export const BRAND = {
-    A: 'brandA',
-    B: 'brandB',
-    C: 'brandC',
-    D: 'brandD',
-    E: 'brandE',
-    F: 'brandF',
+/**
+ * Платформа — набор размеров, типографики и отступов, из которого плотность берёт свои значения.
+ * Класс `sn-webDesktop` / `sn-webMobile`.
+ */
+export const PLATFORM = {
+    WebDesktop: 'webDesktop',
+    WebMobile: 'webMobile',
 };
-/** Роль бренда (палитра). Класс `sn-main` / `sn-alter` … */
-export const BRAND_ROLE = {
-    Main: 'main',
-    Alter: 'alter',
-    Alter2: 'alter2',
-    Alter3: 'alter3',
-    Alter4: 'alter4',
+/**
+ * Бренд. Класс `sn-<значение>`. Семейства HR-портала и сайта представлены финальными цветовыми
+ * вариантами: родительские слои `hrPortal`/`site` нужны только в Figma.
+ */
+export const BRAND = {
+    CloudConsole: 'cloudConsole',
+    GigaId: 'giga-id',
+    Gitverse: 'gitverse',
+    SnackUI: 'snackUI',
+    HrBlue: 'hrBlue',
+    HrGraphite: 'hrGraphite',
+    HrGreen: 'hrGreen',
+    HrPurple: 'hrPurple',
+    HrYellow: 'hrYellow',
+    SiteBlue: 'siteBlue',
+    SiteGraphite: 'siteGraphite',
+    SiteGreen: 'siteGreen',
+    SitePurple: 'sitePurple',
+    SiteYellow: 'siteYellow',
 };

package/dist/esm/hooks/useApplyCustomTheme.d.ts

@@ -14,7 +14,7 @@ export type UseApplyCustomThemeProps = {
 };
 /**
  * Применяет кастомный бренд-цвет: генерирует из `color` бренд-палитру и инжектит `<style>`,
- * переопределяющий её на бренд-классах (`.sn-brandA/B/C/D/E/F`), а не inline на одном элементе — поэтому
+ * переопределяющий её на бренд-классах (`.sn-cloudConsole`, `.sn-hrBlue` …), а не inline на одном элементе — поэтому
  * цвет переживает переэмиты `sn-*` вложенными компонентами и доходит до порталов. Семантический слой
  * каскадит из палитры, красятся обе схемы.
  *

package/dist/esm/hooks/useApplyCustomTheme.js

@@ -3,7 +3,7 @@ import { buildBrandPaletteCss } from '../utils/customTheme/index.js';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
 /**
  * Применяет кастомный бренд-цвет: генерирует из `color` бренд-палитру и инжектит `<style>`,
- * переопределяющий её на бренд-классах (`.sn-brandA/B/C/D/E/F`), а не inline на одном элементе — поэтому
+ * переопределяющий её на бренд-классах (`.sn-cloudConsole`, `.sn-hrBlue` …), а не inline на одном элементе — поэтому
  * цвет переживает переэмиты `sn-*` вложенными компонентами и доходит до порталов. Семантический слой
  * каскадит из палитры, красятся обе схемы.
  *

package/dist/esm/hooks/useThemeClassnames.d.ts

@@ -4,7 +4,7 @@ import { ThemeAppearance } from '../types/appearance.js';
  * цепочка `ChildThemeProvider`) ⊕ переданные `overrides`. Навешивается на DOM-границу компонента,
  * который хочет переопределить ось (например, мобильная обёртка с `density: 'comfort'`).
  *
- * Поскольку набор включает текущий `colorScheme`/`brand`/`brandRole` из контекста, такая обёртка —
+ * Поскольку набор включает текущий `colorScheme`/`brand` из контекста, такая обёртка —
  * самосогласованный scope и трекает переключение темы. Без провайдера в дереве оформление пустое,
  * и поведение совпадает со старым `getThemeClassnames({ density })`.
  */

package/dist/esm/hooks/useThemeClassnames.js

@@ -5,7 +5,7 @@ import { getThemeClassnames } from '../utils/getThemeClassnames.js';
  * цепочка `ChildThemeProvider`) ⊕ переданные `overrides`. Навешивается на DOM-границу компонента,
  * который хочет переопределить ось (например, мобильная обёртка с `density: 'comfort'`).
  *
- * Поскольку набор включает текущий `colorScheme`/`brand`/`brandRole` из контекста, такая обёртка —
+ * Поскольку набор включает текущий `colorScheme`/`brand` из контекста, такая обёртка —
  * самосогласованный scope и трекает переключение темы. Без провайдера в дереве оформление пустое,
  * и поведение совпадает со старым `getThemeClassnames({ density })`.
  */

package/dist/esm/ssr.d.ts

@@ -1,6 +1,6 @@
-export { BRAND, BRAND_ROLE, DENSITY } from './constants/appearance.js';
+export { BRAND, DENSITY, PLATFORM } from './constants/appearance.js';
 export { COLOR_SCHEME, THEME_OVERRIDE, THEME_OVERRIDE_STORAGE_KEY } from './constants/colorScheme.js';
-export type { Brand, BrandRole, Density, ThemeAppearance } from './types/appearance.js';
+export type { Brand, Density, Platform, ThemeAppearance } from './types/appearance.js';
 export type { ColorScheme, ThemeOverride } from './types/colorScheme.js';
 export { mergeAppearance } from './utils/mergeAppearance.js';
 export { getThemeClassnameList, getThemeClassnames } from './utils/getThemeClassnames.js';

package/dist/esm/ssr.js

@@ -1,6 +1,6 @@
 // SSR-безопасный субпуть `@cloud-ru/ds-theme/ssr`: только чистые символы (без React-контекста/хуков),
 // чтобы импорт в React Server Components не тянул `createContext`. Зеркало `@cloud-ru/ds-adaptive/ssr`.
-export { BRAND, BRAND_ROLE, DENSITY } from './constants/appearance.js';
+export { BRAND, DENSITY, PLATFORM } from './constants/appearance.js';
 export { COLOR_SCHEME, THEME_OVERRIDE, THEME_OVERRIDE_STORAGE_KEY } from './constants/colorScheme.js';
 export { mergeAppearance } from './utils/mergeAppearance.js';
 export { getThemeClassnameList, getThemeClassnames } from './utils/getThemeClassnames.js';

package/dist/esm/store/globalStore.js

@@ -6,7 +6,7 @@ const REGISTRY_KEY = Symbol.for(THEME_KEYS.store);
 // между запросами), поэтому серверный рендер всегда отдаёт дефолт; реальные классы на SSR ставит
 // строка на `<html>` (см. providers-standard.md).
 const SERVER_VALUE = { appearance: {}, setAppearance: undefined };
-const APPEARANCE_KEYS = ['colorScheme', 'brand', 'brandRole', 'density', 'acrylic'];
+const APPEARANCE_KEYS = ['colorScheme', 'brand', 'platform', 'density', 'acrylic'];
 function isSameAppearance(a, b) {
     return APPEARANCE_KEYS.every(key => a[key] === b[key]);
 }

package/dist/esm/types/appearance.d.ts

@@ -1,8 +1,8 @@
-import { BRAND, BRAND_ROLE, DENSITY } from '../constants/appearance.js';
+import { BRAND, DENSITY, PLATFORM } from '../constants/appearance.js';
 import { ColorScheme } from './colorScheme.js';
 export type Density = (typeof DENSITY)[keyof typeof DENSITY];
+export type Platform = (typeof PLATFORM)[keyof typeof PLATFORM];
 export type Brand = (typeof BRAND)[keyof typeof BRAND];
-export type BrandRole = (typeof BRAND_ROLE)[keyof typeof BRAND_ROLE];
 /**
  * Набор осей оформления, которые определяют полный набор `sn-*` классов на DOM-границе. Любая
  * незаданная ось наследуется от вышестоящего провайдера (слияние в `ChildThemeProvider`) — но на сам
@@ -12,10 +12,13 @@ export type BrandRole = (typeof BRAND_ROLE)[keyof typeof BRAND_ROLE];
 export type ThemeAppearance = {
     /** Цветовая схема — `sn-light` / `sn-dark`. */
     colorScheme?: ColorScheme;
-    /** Бренд — `sn-brandA` … */
+    /** Бренд — `sn-cloudConsole` / `sn-hrBlue` … */
     brand?: Brand;
-    /** Роль бренда (палитра) — `sn-main` … */
-    brandRole?: BrandRole;
+    /**
+     * Платформа — `sn-webDesktop` / `sn-webMobile`. Без значения — `webDesktop`. Раскладку `@cloud-ru/ds-adaptive`
+     * тема не читает: потребитель передаёт согласованные значения и в `AdaptiveProvider`, и сюда.
+     */
+    platform?: Platform;
     /** Плотность — `sn-comfort` / `sn-compact` / `sn-spacious`. */
     density?: Density;
     /** Акрил (blur-материал) — `sn-yes` при `true`, иначе `sn-no`. */

package/dist/esm/utils/customTheme/buildBrandPaletteCss.d.ts

@@ -1,7 +1,7 @@
 /**
  * Собирает текст CSS-правила, переопределяющего бренд-палитру из seed-цвета на бренд-классах.
  *
- * - Без `scope` — глобально (`:is(.sn-brandA,…){…}`), для white-label в корне приложения: побеждает
+ * - Без `scope` — глобально (`:is(.sn-cloudConsole,…){…}`), для white-label в корне приложения: побеждает
  *   по source order на всех бренд-классах страницы, включая порталы.
  * - Со `scope` (CSS-селектор корня поддерева) — ограничивает область потомками и самим корнем; выше
  *   токенной специфичности, поэтому порядок не важен.

package/dist/esm/utils/customTheme/buildBrandPaletteCss.js

@@ -1,18 +1,18 @@
 import { BRAND } from '../../constants/appearance.js';
 import { buildBrandPaletteVars } from './buildBrandPaletteVars.js';
-// Правило нацелено на сами бренд-классы (`.sn-brandA/B/C/D/E/F`), а не на один элемент inline: компоненты,
+// Правило нацелено на сами бренд-классы (`.sn-cloudConsole`, `.sn-hrBlue` …), а не на один элемент inline: компоненты,
 // переэмитящие набор `sn-*` на своих обёртках (Table/Stepper/Alert через `useThemeClassnames`), заново
 // объявляют `--sn-brand-color-primary-*` из класса бренда — inline на предке они перекрыли бы, правило
 // на том же бренд-классе — нет.
 // Один seed переопределяет сразу все бренд-классы (потребитель не знает, в какой бренд-слот завернётся
-// его поддерево). TODO FF-8813: возможность задавать seed индивидуально для каждого бренда (brandA/B/C/D/E/F).
+// его поддерево). TODO FF-8813: возможность задавать seed индивидуально для каждого бренда.
 const BRAND_CLASS_SELECTOR = `:is(${Object.values(BRAND)
     .map(brand => `.sn-${brand}`)
     .join(',')})`;
 /**
  * Собирает текст CSS-правила, переопределяющего бренд-палитру из seed-цвета на бренд-классах.
  *
- * - Без `scope` — глобально (`:is(.sn-brandA,…){…}`), для white-label в корне приложения: побеждает
+ * - Без `scope` — глобально (`:is(.sn-cloudConsole,…){…}`), для white-label в корне приложения: побеждает
  *   по source order на всех бренд-классах страницы, включая порталы.
  * - Со `scope` (CSS-селектор корня поддерева) — ограничивает область потомками и самим корнем; выше
  *   токенной специфичности, поэтому порядок не важен.

package/dist/esm/utils/customTheme/constants.d.ts

@@ -1,27 +1,27 @@
-/** Тон акцента (`--sn-brand-color-primary-55`) — им становится сам seed-цвет. */
-export declare const PRIMARY_ACCENT_TONE = "55";
-/** Near-white тон для текста на акценте (совпадает с дефолтом `onAccentLight` бренда `brandA`). */
+/** Тон акцента (`--sn-brand-color-primary-50`) — им становится сам seed-цвет. */
+export declare const PRIMARY_ACCENT_TONE = "50";
+/** Near-white тон для текста на акценте (совпадает с дефолтом `onAccentLight` бренда `cloudConsole`). */
 export declare const NEAR_WHITE_TONE = "99";
-/** Near-dark тон для текста на акценте (совпадает с дефолтом `onAccentDark` бренда `brandA`). */
-export declare const NEAR_DARK_TONE = "5";
+/** Near-dark тон для текста на акценте (совпадает с дефолтом `onAccentDark` бренда `cloudConsole`). */
+export declare const NEAR_DARK_TONE = "05";
 /** Все числовые тоны палитры `--sn-brand-color-primary-<tone>`. */
-export declare const BRAND_PRIMARY_TONES: readonly ["5", "10", "15", "25", "45", "55", "60", "65", "80", "90", "95", "99"];
+export declare const BRAND_PRIMARY_TONES: readonly ["05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "99"];
 export type BrandPrimaryTone = (typeof BRAND_PRIMARY_TONES)[number];
-/** Опорные hex тонов бренда `brandA` — источник `L`/`C` для генерации по любому seed-цвету. */
+/** Опорные hex тонов бренда `cloudConsole` — источник `L`/`C` для генерации по любому seed-цвету. */
 export declare const BASE_BRAND_PALETTE: Record<BrandPrimaryTone, string>;
 /** Префикс CSS-переменных бренд-палитры. */
 export declare const BRAND_PRIMARY_VAR_PREFIX = "--sn-brand-color-primary-";
-/** Alpha-суффикс для `--sn-brand-color-primary-transparent` (совпадает с дефолтом `#389f7424` бренда `brandA`). */
-export declare const TRANSPARENT_ALPHA_SUFFIX = "24";
+/** Alpha-суффикс для `--sn-brand-color-primary-transparent` (дефолт `#389f741a` бренда cloudConsole). */
+export declare const TRANSPARENT_ALPHA_SUFFIX = "1a";
 /**
  * Тинты акцента для activated-состояний (`--sn-brand-color-state-activated-*-background`) — это
- * акцентный тон с alpha. Суффиксы совпадают с дефолтами brandA (`#389f7426/59/73`). Без них
+ * акцентный тон с alpha. Суффиксы — дефолты cloudConsole (`#389f741a/33/4d`). Без них
  * activated-заливки (выбранная строка таблицы, active-состояния) не следуют за кастомным бренд-цветом.
  */
 export declare const ACTIVATED_ALPHA_SUFFIX: {
-    readonly default: "26";
-    readonly hovered: "59";
-    readonly pressed: "73";
+    readonly default: "1a";
+    readonly hovered: "33";
+    readonly pressed: "4d";
 };
 /** Имена CSS-переменных activated-заливок. */
 export declare const BRAND_ACTIVATED_VAR: {

package/dist/esm/utils/customTheme/constants.js

@@ -1,24 +1,24 @@
 // Опорная палитра и тон-константы для генерации кастомного бренд-цвета. Тоновый набор и дефолтные
-// hex совпадают с `--sn-brand-color-primary-<tone>` бренда `brandA` из `@cloud-ru/figma-variables`:
+// hex совпадают с `--sn-brand-color-primary-<tone>` бренда `cloudConsole` из `@cloud-ru/figma-variables`:
 // генератор держит `L`/`C` этих тонов и поворачивает hue к seed-цвету потребителя.
-/** Тон акцента (`--sn-brand-color-primary-55`) — им становится сам seed-цвет. */
-export const PRIMARY_ACCENT_TONE = '55';
-/** Near-white тон для текста на акценте (совпадает с дефолтом `onAccentLight` бренда `brandA`). */
+/** Тон акцента (`--sn-brand-color-primary-50`) — им становится сам seed-цвет. */
+export const PRIMARY_ACCENT_TONE = '50';
+/** Near-white тон для текста на акценте (совпадает с дефолтом `onAccentLight` бренда `cloudConsole`). */
 export const NEAR_WHITE_TONE = '99';
-/** Near-dark тон для текста на акценте (совпадает с дефолтом `onAccentDark` бренда `brandA`). */
-export const NEAR_DARK_TONE = '5';
+/** Near-dark тон для текста на акценте (совпадает с дефолтом `onAccentDark` бренда `cloudConsole`). */
+export const NEAR_DARK_TONE = '05';
 /** Все числовые тоны палитры `--sn-brand-color-primary-<tone>`. */
-export const BRAND_PRIMARY_TONES = ['5', '10', '15', '25', '45', '55', '60', '65', '80', '90', '95', '99'];
-/** Опорные hex тонов бренда `brandA` — источник `L`/`C` для генерации по любому seed-цвету. */
+export const BRAND_PRIMARY_TONES = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95', '99'];
+/** Опорные hex тонов бренда `cloudConsole` — источник `L`/`C` для генерации по любому seed-цвету. */
 export const BASE_BRAND_PALETTE = {
-    '5': '#21372f',
+    '05': '#21372f',
     '10': '#243e35',
-    '15': '#2b483c',
-    '25': '#2c5e49',
-    '45': '#22775b',
-    '55': '#389f74',
+    '20': '#2b483c',
+    '30': '#2c5e49',
+    '40': '#22775b',
+    '50': '#389f74',
     '60': '#5ebb91',
-    '65': '#85ceaa',
+    '70': '#85ceaa',
     '80': '#caeadb',
     '90': '#edf7f1',
     '95': '#f5fdf8',
@@ -26,17 +26,17 @@ export const BASE_BRAND_PALETTE = {
 };
 /** Префикс CSS-переменных бренд-палитры. */
 export const BRAND_PRIMARY_VAR_PREFIX = '--sn-brand-color-primary-';
-/** Alpha-суффикс для `--sn-brand-color-primary-transparent` (совпадает с дефолтом `#389f7424` бренда `brandA`). */
-export const TRANSPARENT_ALPHA_SUFFIX = '24';
+/** Alpha-суффикс для `--sn-brand-color-primary-transparent` (дефолт `#389f741a` бренда cloudConsole). */
+export const TRANSPARENT_ALPHA_SUFFIX = '1a';
 /**
  * Тинты акцента для activated-состояний (`--sn-brand-color-state-activated-*-background`) — это
- * акцентный тон с alpha. Суффиксы совпадают с дефолтами brandA (`#389f7426/59/73`). Без них
+ * акцентный тон с alpha. Суффиксы — дефолты cloudConsole (`#389f741a/33/4d`). Без них
  * activated-заливки (выбранная строка таблицы, active-состояния) не следуют за кастомным бренд-цветом.
  */
 export const ACTIVATED_ALPHA_SUFFIX = {
-    default: '26',
-    hovered: '59',
-    pressed: '73',
+    default: '1a',
+    hovered: '33',
+    pressed: '4d',
 };
 /** Имена CSS-переменных activated-заливок. */
 export const BRAND_ACTIVATED_VAR = {

package/dist/esm/utils/customTheme/generateBrandPalette.d.ts

@@ -3,7 +3,7 @@ import { BrandPrimaryTone } from './constants.js';
 export type BrandPalette = Record<BrandPrimaryTone, string>;
 /**
  * Строит бренд-палитру из одного seed-цвета: берёт `L`/`C` каждого опорного тона `BASE_BRAND_PALETTE`
- * и поворачивает hue к hue seed-цвета (OKLCH). Тон акцента (`55`) становится самим seed-цветом.
+ * и поворачивает hue к hue seed-цвета (OKLCH). Тон акцента (`50`) становится самим seed-цветом.
  * Так один цвет потребителя перекрашивает всю шкалу `--sn-brand-color-primary-<tone>`, сохраняя
  * светлоту/насыщенность DS-палитры. Невалидный hex → `null`.
  */

package/dist/esm/utils/customTheme/generateBrandPalette.js

@@ -2,7 +2,7 @@ import { hex2color, lch2color } from './color/index.js';
 import { BASE_BRAND_PALETTE, BRAND_PRIMARY_TONES, PRIMARY_ACCENT_TONE } from './constants.js';
 /**
  * Строит бренд-палитру из одного seed-цвета: берёт `L`/`C` каждого опорного тона `BASE_BRAND_PALETTE`
- * и поворачивает hue к hue seed-цвета (OKLCH). Тон акцента (`55`) становится самим seed-цветом.
+ * и поворачивает hue к hue seed-цвета (OKLCH). Тон акцента (`50`) становится самим seed-цветом.
  * Так один цвет потребителя перекрашивает всю шкалу `--sn-brand-color-primary-<tone>`, сохраняя
  * светлоту/насыщенность DS-палитры. Невалидный hex → `null`.
  */

package/dist/esm/utils/getThemeClassnames.d.ts

@@ -3,8 +3,11 @@ import { ThemeAppearance } from '../types/appearance.js';
  * Чистая функция: собирает **полный** набор `sn-*` классов из осей оформления списком токенов.
  * Полный набор обязателен на каждой DOM-границе — токены `@cloud-ru/figma-variables` не
  * переопределяются по одной оси через CSS-каскад (см. providers-standard.md). Базовые слои
- * (`sn-base-styles`, `sn-figmaStyles`, `sn-components`) и материал (`sn-yes`/`sn-no`)
- * — всегда; `density`/`colorScheme`/`brand`/`brandRole` — если заданы.
+ * (`sn-base-styles`, `sn-figmaStyles`, `sn-components`), материал (`sn-yes`/`sn-no`) и платформа
+ * — всегда; `density`/`colorScheme`/`brand` — если заданы.
+ *
+ * Платформа эмитится всегда (по умолчанию `webDesktop`): плотность ссылается на её переменные и
+ * вычисляется на том же элементе, поэтому класс платформы должен стоять рядом с классом плотности.
  *
  * Списочная форма — источник истины для `getThemeClassnames` (строка через `join`) и для
  * `element.classList.add(...)`, которому нужны отдельные токены без промежуточного `split`.

package/dist/esm/utils/getThemeClassnames.js

@@ -1,16 +1,20 @@
+import { PLATFORM } from '../constants/appearance.js';
 /**
  * Чистая функция: собирает **полный** набор `sn-*` классов из осей оформления списком токенов.
  * Полный набор обязателен на каждой DOM-границе — токены `@cloud-ru/figma-variables` не
  * переопределяются по одной оси через CSS-каскад (см. providers-standard.md). Базовые слои
- * (`sn-base-styles`, `sn-figmaStyles`, `sn-components`) и материал (`sn-yes`/`sn-no`)
- * — всегда; `density`/`colorScheme`/`brand`/`brandRole` — если заданы.
+ * (`sn-base-styles`, `sn-figmaStyles`, `sn-components`), материал (`sn-yes`/`sn-no`) и платформа
+ * — всегда; `density`/`colorScheme`/`brand` — если заданы.
+ *
+ * Платформа эмитится всегда (по умолчанию `webDesktop`): плотность ссылается на её переменные и
+ * вычисляется на том же элементе, поэтому класс платформы должен стоять рядом с классом плотности.
  *
  * Списочная форма — источник истины для `getThemeClassnames` (строка через `join`) и для
  * `element.classList.add(...)`, которому нужны отдельные токены без промежуточного `split`.
  */
 export function getThemeClassnameList(appearance = {}) {
-    const { density, colorScheme, brand, brandRole, acrylic } = appearance;
-    const classes = ['sn-base-styles', 'sn-figmaStyles', 'sn-components', acrylic ? 'sn-yes' : 'sn-no'];
+    const { density, colorScheme, brand, platform = PLATFORM.WebDesktop, acrylic } = appearance;
+    const classes = ['sn-base-styles', 'sn-figmaStyles', 'sn-components', acrylic ? 'sn-yes' : 'sn-no', `sn-${platform}`];
     if (density) {
         classes.push(`sn-${density}`);
     }
@@ -20,9 +24,6 @@ export function getThemeClassnameList(appearance = {}) {
     if (brand) {
         classes.push(`sn-${brand}`);
     }
-    if (brandRole) {
-        classes.push(`sn-${brandRole}`);
-    }
     return classes;
 }
 /**

package/dist/esm/utils/mergeAppearance.js

@@ -7,7 +7,7 @@ export function mergeAppearance(parent, overrides) {
     return {
         colorScheme: overrides.colorScheme ?? parent.colorScheme,
         brand: overrides.brand ?? parent.brand,
-        brandRole: overrides.brandRole ?? parent.brandRole,
+        platform: overrides.platform ?? parent.platform,
         density: overrides.density ?? parent.density,
         acrylic: overrides.acrylic ?? parent.acrylic,
     };