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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/README.md +21 -18
  2. package/dist/cjs/components/ChildThemeProvider/ChildThemeProvider.js +3 -3
  3. package/dist/cjs/components/RootThemeProvider/RootThemeProvider.d.ts +1 -1
  4. package/dist/cjs/components/RootThemeProvider/RootThemeProvider.js +4 -4
  5. package/dist/cjs/constants/appearance.d.ts +26 -15
  6. package/dist/cjs/constants/appearance.js +27 -16
  7. package/dist/cjs/hooks/useApplyCustomTheme.d.ts +1 -1
  8. package/dist/cjs/hooks/useApplyCustomTheme.js +1 -1
  9. package/dist/cjs/hooks/useThemeClassnames.d.ts +1 -1
  10. package/dist/cjs/hooks/useThemeClassnames.js +1 -1
  11. package/dist/cjs/ssr.d.ts +2 -2
  12. package/dist/cjs/ssr.js +2 -2
  13. package/dist/cjs/store/globalStore.js +1 -1
  14. package/dist/cjs/types/appearance.d.ts +8 -5
  15. package/dist/cjs/utils/customTheme/buildBrandPaletteCss.d.ts +1 -1
  16. package/dist/cjs/utils/customTheme/buildBrandPaletteCss.js +3 -3
  17. package/dist/cjs/utils/customTheme/constants.d.ts +13 -13
  18. package/dist/cjs/utils/customTheme/constants.js +20 -20
  19. package/dist/cjs/utils/customTheme/generateBrandPalette.d.ts +1 -1
  20. package/dist/cjs/utils/customTheme/generateBrandPalette.js +1 -1
  21. package/dist/cjs/utils/getThemeClassnames.d.ts +5 -2
  22. package/dist/cjs/utils/getThemeClassnames.js +8 -7
  23. package/dist/cjs/utils/mergeAppearance.js +1 -1
  24. package/dist/esm/components/ChildThemeProvider/ChildThemeProvider.js +3 -3
  25. package/dist/esm/components/RootThemeProvider/RootThemeProvider.d.ts +1 -1
  26. package/dist/esm/components/RootThemeProvider/RootThemeProvider.js +4 -4
  27. package/dist/esm/constants/appearance.d.ts +26 -15
  28. package/dist/esm/constants/appearance.js +26 -15
  29. package/dist/esm/hooks/useApplyCustomTheme.d.ts +1 -1
  30. package/dist/esm/hooks/useApplyCustomTheme.js +1 -1
  31. package/dist/esm/hooks/useThemeClassnames.d.ts +1 -1
  32. package/dist/esm/hooks/useThemeClassnames.js +1 -1
  33. package/dist/esm/ssr.d.ts +2 -2
  34. package/dist/esm/ssr.js +1 -1
  35. package/dist/esm/store/globalStore.js +1 -1
  36. package/dist/esm/types/appearance.d.ts +8 -5
  37. package/dist/esm/utils/customTheme/buildBrandPaletteCss.d.ts +1 -1
  38. package/dist/esm/utils/customTheme/buildBrandPaletteCss.js +3 -3
  39. package/dist/esm/utils/customTheme/constants.d.ts +13 -13
  40. package/dist/esm/utils/customTheme/constants.js +20 -20
  41. package/dist/esm/utils/customTheme/generateBrandPalette.d.ts +1 -1
  42. package/dist/esm/utils/customTheme/generateBrandPalette.js +1 -1
  43. package/dist/esm/utils/getThemeClassnames.d.ts +5 -2
  44. package/dist/esm/utils/getThemeClassnames.js +8 -7
  45. package/dist/esm/utils/mergeAppearance.js +1 -1
  46. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  47. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  48. package/package.json +2 -2
  49. package/src/components/ChildThemeProvider/ChildThemeProvider.tsx +3 -3
  50. package/src/components/RootThemeProvider/RootThemeProvider.tsx +4 -4
  51. package/src/constants/appearance.ts +26 -15
  52. package/src/hooks/useApplyCustomTheme.ts +1 -1
  53. package/src/hooks/useThemeClassnames.ts +1 -1
  54. package/src/ssr.ts +2 -2
  55. package/src/store/globalStore.ts +1 -1
  56. package/src/types/appearance.ts +9 -6
  57. package/src/utils/customTheme/buildBrandPaletteCss.ts +3 -3
  58. package/src/utils/customTheme/constants.ts +20 -20
  59. package/src/utils/customTheme/generateBrandPalette.ts +1 -1
  60. package/src/utils/getThemeClassnames.ts +8 -7
  61. package/src/utils/mergeAppearance.ts +1 -1
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  `@cloud-ru/ds-theme` — Провайдер оформления — оси (цветовая схема, бренд, плотность, акрил) живут в контексте, полный набор sn-* классов эмитится на DOM-границе.
4
4
 
5
- `@cloud-ru/ds-theme` управляет оформлением дизайн-системы. **Оси оформления живут в React-контексте, а полный набор CSS-классов `sn-*` эмитится на DOM-границу.** `RootThemeProvider` ставится один раз в корне и держит оси (`colorScheme`, `brand`, `brandRole`, `density`, `acrylic`), эмитя из них полный набор `sn-*` на `rootRef` (обычно `<html>`). Локальные переопределения в поддереве делает `ChildThemeProvider`, а компонент, фиксирующий ось у себя, — хук `useThemeClassnames`.
5
+ `@cloud-ru/ds-theme` управляет оформлением дизайн-системы. **Оси оформления живут в React-контексте, а полный набор CSS-классов `sn-*` эмитится на DOM-границу.** `RootThemeProvider` ставится один раз в корне и держит оси (`colorScheme`, `brand`, `platform`, `density`, `acrylic`), эмитя из них полный набор `sn-*` на `rootRef` (обычно `<html>`). Локальные переопределения в поддереве делает `ChildThemeProvider`, а компонент, фиксирующий ось у себя, — хук `useThemeClassnames`.
6
6
 
7
7
  Кроме предустановленных брендов `@cloud-ru/ds-theme` умеет собрать бренд-палитру из **одного seed-цвета** (white-label): из него генерируется полная шкала тонов `--sn-brand-color-primary-*`, и весь семантический слой каскадит из неё — см. секцию «Кастомный бренд-цвет».
8
8
 
@@ -51,10 +51,13 @@ import { BRAND, Brand, ChildThemeProvider } from '@cloud-ru/ds-theme';
51
51
  import { Flex } from '@cloud-ru/ds-uikit-product-flex';
52
52
  import { useState } from 'react';
53
53
 
54
- const BRAND_ITEMS = Object.values(BRAND).map(value => ({ value, label: value }));
54
+ const BRAND_ITEMS = [BRAND.CloudConsole, BRAND.SnackUI, BRAND.Gitverse, BRAND.HrGreen, BRAND.SiteBlue].map(value => ({
55
+ value,
56
+ label: value,
57
+ }));
55
58
 
56
59
  export function BrandSwitch() {
57
- const [brand, setBrand] = useState<Brand>(BRAND.A);
60
+ const [brand, setBrand] = useState<Brand>(BRAND.CloudConsole);
58
61
 
59
62
  return (
60
63
  <Flex direction='column' gap='2m' align='flex-start'>
@@ -183,23 +186,23 @@ export function LocalDensity() {
183
186
 
184
187
  #### Related types
185
188
 
186
- - `Brand` = `"brandA"` \| `"brandB"` \| `"brandC"` \| `"brandD"` \| `"brandE"` \| `"brandF"`
187
-
188
- - `BrandRole` = `"alter"` \| `"alter2"` \| `"alter3"` \| `"alter4"` \| `"main"`
189
+ - `Brand` = `"cloudConsole"` \| `"giga-id"` \| `"gitverse"` \| `"hrBlue"` \| `"hrGraphite"` \| `"hrGreen"` \| `"hrPurple"` \| `"hrYellow"` \| `"siteBlue"` \| `"siteGraphite"` \| `"siteGreen"` \| `"sitePurple"` \| `"siteYellow"` \| `"snackUI"`
189
190
 
190
191
  - `ColorScheme` = `"dark"` \| `"light"`
191
192
 
192
193
  - `Density` = `"comfort"` \| `"compact"` \| `"spacious"`
193
194
 
195
+ - `Platform` = `"webDesktop"` \| `"webMobile"`
196
+
194
197
  **ThemeAppearance**
195
198
 
196
199
  | Prop | Type | Default | Description |
197
200
  |------|------|---------|-------------|
198
201
  | `acrylic` | `boolean \| undefined` | — | Акрил (blur-материал) — `sn-yes` при `true`, иначе `sn-no`. |
199
- | `brand` | `"brandA"` \| `"brandB"` \| `"brandC"` \| `"brandD"` \| `"brandE"` \| `"brandF"` | — | Бренд — `sn-brandA` … |
200
- | `brandRole` | `"alter"` \| `"alter2"` \| `"alter3"` \| `"alter4"` \| `"main"` | — | Роль бренда (палитра) — `sn-main` … |
202
+ | `brand` | `"cloudConsole"` \| `"giga-id"` \| `"gitverse"` \| `"hrBlue"` \| `"hrGraphite"` \| `"hrGreen"` \| `"hrPurple"` \| `"hrYellow"` \| `"siteBlue"` \| `"siteGraphite"` \| `"siteGreen"` \| `"sitePurple"` \| `"siteYellow"` \| `"snackUI"` | — | Бренд — `sn-cloudConsole` / `sn-hrBlue` … |
201
203
  | `colorScheme` | `"dark"` \| `"light"` | — | Цветовая схема — `sn-light` / `sn-dark`. |
202
204
  | `density` | `"comfort"` \| `"compact"` \| `"spacious"` | — | Плотность — `sn-comfort` / `sn-compact` / `sn-spacious`. |
205
+ | `platform` | `"webDesktop"` \| `"webMobile"` | — | Платформа — `sn-webDesktop` / `sn-webMobile`. Без значения — `webDesktop`. Раскладку `@cloud-ru/ds-adaptive` <br/> тема не читает: потребитель передаёт согласованные значения и в `AdaptiveProvider`, и сюда. |
203
206
 
204
207
  **ThemeAppearanceStore**
205
208
 
@@ -222,35 +225,35 @@ export function LocalDensity() {
222
225
 
223
226
  #### Related types
224
227
 
225
- - `Brand` = `"brandA"` \| `"brandB"` \| `"brandC"` \| `"brandD"` \| `"brandE"` \| `"brandF"`
226
-
227
- - `BrandRole` = `"alter"` \| `"alter2"` \| `"alter3"` \| `"alter4"` \| `"main"`
228
+ - `Brand` = `"cloudConsole"` \| `"giga-id"` \| `"gitverse"` \| `"hrBlue"` \| `"hrGraphite"` \| `"hrGreen"` \| `"hrPurple"` \| `"hrYellow"` \| `"siteBlue"` \| `"siteGraphite"` \| `"siteGreen"` \| `"sitePurple"` \| `"siteYellow"` \| `"snackUI"`
228
229
 
229
230
  - `ColorScheme` = `"dark"` \| `"light"`
230
231
 
231
232
  - `Density` = `"comfort"` \| `"compact"` \| `"spacious"`
232
233
 
234
+ - `Platform` = `"webDesktop"` \| `"webMobile"`
235
+
233
236
  **ThemeAppearance**
234
237
 
235
238
  | Prop | Type | Default | Description |
236
239
  |------|------|---------|-------------|
237
240
  | `acrylic` | `boolean \| undefined` | — | Акрил (blur-материал) — `sn-yes` при `true`, иначе `sn-no`. |
238
- | `brand` | `"brandA"` \| `"brandB"` \| `"brandC"` \| `"brandD"` \| `"brandE"` \| `"brandF"` | — | Бренд — `sn-brandA` … |
239
- | `brandRole` | `"alter"` \| `"alter2"` \| `"alter3"` \| `"alter4"` \| `"main"` | — | Роль бренда (палитра) — `sn-main` … |
241
+ | `brand` | `"cloudConsole"` \| `"giga-id"` \| `"gitverse"` \| `"hrBlue"` \| `"hrGraphite"` \| `"hrGreen"` \| `"hrPurple"` \| `"hrYellow"` \| `"siteBlue"` \| `"siteGraphite"` \| `"siteGreen"` \| `"sitePurple"` \| `"siteYellow"` \| `"snackUI"` | — | Бренд — `sn-cloudConsole` / `sn-hrBlue` … |
240
242
  | `colorScheme` | `"dark"` \| `"light"` | — | Цветовая схема — `sn-light` / `sn-dark`. |
241
243
  | `density` | `"comfort"` \| `"compact"` \| `"spacious"` | — | Плотность — `sn-comfort` / `sn-compact` / `sn-spacious`. |
244
+ | `platform` | `"webDesktop"` \| `"webMobile"` | — | Платформа — `sn-webDesktop` / `sn-webMobile`. Без значения — `webDesktop`. Раскладку `@cloud-ru/ds-adaptive` <br/> тема не читает: потребитель передаёт согласованные значения и в `AdaptiveProvider`, и сюда. |
242
245
 
243
246
  ## Смотри также
244
247
 
245
248
  - [Оформление — тема, бренд, плотность](/patterns/theme) — полная модель подключения темы.
246
- - **Adaptive** — раскладка `layoutType` (источник `density` в приложении).
249
+ - **Adaptive** — раскладка `layoutType`, согласованная с платформой темы.
247
250
  - **Locale** — рантайм локализации.
248
251
  - **PortalContext** — корневой DOM-узел для порталов.
249
252
  ## Кастомный бренд-цвет
250
253
 
251
- Помимо предустановленных брендов (`brandA` / `brandB` / `brandC` / `brandD` / `brandE` / `brandF`) `@cloud-ru/ds-theme` собирает бренд-палитру из одного seed-цвета — для white-label под клиента. Из seed генерируется полная шкала тонов `--sn-brand-color-primary-*` (OKLCH: светлота и насыщенность берутся из опорной шкалы, hue поворачивается к seed) плюс activated-тинты; семантический слой `--sn-theme-color-primary-*` каскадит из неё. Поэтому один цвет перекрашивает акцент во всех компонентах — и в светлой, и в тёмной схеме.
254
+ Помимо предустановленных брендов (`cloudConsole`, `giga-id`, `gitverse`, `snackUI`, варианты `hr*` и `site*`) `@cloud-ru/ds-theme` собирает бренд-палитру из одного seed-цвета — для white-label под клиента. Из seed генерируется полная шкала тонов `--sn-brand-color-primary-*` (OKLCH: светлота и насыщенность берутся из опорной шкалы, hue поворачивается к seed) плюс activated-тинты; семантический слой `--sn-theme-color-primary-*` каскадит из неё. Поэтому один цвет перекрашивает акцент во всех компонентах — и в светлой, и в тёмной схеме.
252
255
 
253
- Палитра применяется **CSS-правилом на бренд-классы** (`.sn-brandA/B/C/D/E`), а не inline-переменными на одном элементе. Это принципиально: компоненты, переобъявляющие полный набор `sn-*` на своих внутренних обёртках (Table, Stepper и т.п. через `useThemeClassnames`), заново объявляют бренд-палитру из класса — inline-переменные предка в таких поддеревьях перекрываются, а правило на том же бренд-классе — нет. Два способа применить:
256
+ Палитра применяется **CSS-правилом на бренд-классы** (`.sn-cloudConsole`, `.sn-hrBlue` …), а не inline-переменными на одном элементе. Это принципиально: компоненты, переобъявляющие полный набор `sn-*` на своих внутренних обёртках (Table, Stepper и т.п. через `useThemeClassnames`), заново объявляют бренд-палитру из класса — inline-переменные предка в таких поддеревьях перекрываются, а правило на том же бренд-классе — нет. Два способа применить:
254
257
 
255
258
  - **Декларативно** — проп `brandColor` у `RootThemeProvider`. Добавляет scoped-правило на бренд-классы поддерева провайдера (доходит до вложенных переобъявлений):
256
259
 
@@ -300,7 +303,7 @@ export function CustomBrandColor() {
300
303
 
301
304
  {/* brandColor генерирует палитру `--sn-brand-color-primary-*` из одного seed-цвета — акцент
302
305
  компонентов ниже перекрашивается вслед за выбором. */}
303
- <RootThemeProvider value={{ colorScheme: 'light', brand: 'brandA', brandRole: 'main' }} brandColor={color}>
306
+ <RootThemeProvider value={{ colorScheme: 'light', brand: 'cloudConsole' }} brandColor={color}>
304
307
  <Block>
305
308
  <Flex gap='2m' align='center' wrap>
306
309
  <Button appearance='primary' label='Действие' />
@@ -349,7 +352,7 @@ export function CustomBrandColorHook() {
349
352
  <SegmentControl items={COLOR_ITEMS} value={color} onChange={value => setColor(String(value))} />
350
353
 
351
354
  <div id={SCOPE_ID}>
352
- <RootThemeProvider value={{ colorScheme: 'light', brand: 'brandA', brandRole: 'main' }}>
355
+ <RootThemeProvider value={{ colorScheme: 'light', brand: 'cloudConsole' }}>
353
356
  <Block>
354
357
  <Flex gap='2m' align='center' wrap>
355
358
  <Button appearance='primary' label='Внутри scope' />
package/dist/cjs/components/ChildThemeProvider/ChildThemeProvider.js CHANGED
@@ -15,11 +15,11 @@ const ThemeScope_1 = require("../ThemeScope");
15
15
  */
16
16
  function ChildThemeProvider({ value, rootRef, className, children }) {
17
17
  const { appearance: parent } = (0, appearanceContext_1.useThemeAppearance)();
18
- const { colorScheme, brand, brandRole, density, acrylic } = value;
18
+ const { colorScheme, brand, platform, density, acrylic } = value;
19
19
  const childStore = (0, react_1.useMemo)(() => (0, context_kit_1.staticStore)({
20
- appearance: (0, mergeAppearance_1.mergeAppearance)(parent, { colorScheme, brand, brandRole, density, acrylic }),
20
+ appearance: (0, mergeAppearance_1.mergeAppearance)(parent, { colorScheme, brand, platform, density, acrylic }),
21
21
  setAppearance: undefined,
22
- }), [parent, colorScheme, brand, brandRole, density, acrylic]);
22
+ }), [parent, colorScheme, brand, platform, density, acrylic]);
23
23
  return ((0, jsx_runtime_1.jsx)(appearanceContext_1.ThemeAppearanceStoreProvider, { store: childStore, children: (0, jsx_runtime_1.jsx)(ThemeScope_1.ThemeScope, { rootRef: rootRef, className: className, children: children }) }));
24
24
  }
25
25
  ChildThemeProvider.displayName = 'ChildThemeProvider';
package/dist/cjs/components/RootThemeProvider/RootThemeProvider.d.ts CHANGED
@@ -35,7 +35,7 @@ export type RootThemeProviderProps = {
35
35
  };
36
36
  /**
37
37
  * Корневой провайдер оформления. Ставится один раз в корне приложения: задаёт контекст осей
38
- * (`colorScheme`/`brand`/`brandRole`/`density`/`acrylic`) и эмитит полный набор `sn-*` на корень
38
+ * (`colorScheme`/`brand`/`platform`/`density`/`acrylic`) и эмитит полный набор `sn-*` на корень
39
39
  * (`rootRef`) либо на собственный wrapper. Объект контекста — глобальный синглтон (`Symbol.for`),
40
40
  * поэтому провайдер работает даже при нескольких версиях пакета в разных микрофронтах, а потребитель
41
41
  * читает ближайший провайдер. Локальные переопределения осей в поддереве — через `ChildThemeProvider`.
package/dist/cjs/components/RootThemeProvider/RootThemeProvider.js CHANGED
@@ -8,7 +8,7 @@ const appearanceContext_1 = require("../../context/appearanceContext");
8
8
  const ThemeScope_1 = require("../ThemeScope");
9
9
  /**
10
10
  * Корневой провайдер оформления. Ставится один раз в корне приложения: задаёт контекст осей
11
- * (`colorScheme`/`brand`/`brandRole`/`density`/`acrylic`) и эмитит полный набор `sn-*` на корень
11
+ * (`colorScheme`/`brand`/`platform`/`density`/`acrylic`) и эмитит полный набор `sn-*` на корень
12
12
  * (`rootRef`) либо на собственный wrapper. Объект контекста — глобальный синглтон (`Symbol.for`),
13
13
  * поэтому провайдер работает даже при нескольких версиях пакета в разных микрофронтах, а потребитель
14
14
  * читает ближайший провайдер. Локальные переопределения осей в поддереве — через `ChildThemeProvider`.
@@ -17,14 +17,14 @@ const ThemeScope_1 = require("../ThemeScope");
17
17
  * результат передаётся в `value.colorScheme`. Не путать со старым `ThemeProvider` (themeMap/changeTheme).
18
18
  */
19
19
  function RootThemeProvider({ value, store, rootRef, className, brandColor, nonce, children, }) {
20
- const { colorScheme, brand, brandRole, density, acrylic } = value ?? {};
20
+ const { colorScheme, brand, platform, density, acrylic } = value ?? {};
21
21
  // Мемо по значениям осей (не по идентичности объекта `value`): иначе литерал `value={{…}}` у
22
22
  // потребителя пересоздавал бы стор на каждом рендере. Сеттер в static-режиме не нужен — значением
23
23
  // владеет сам потребитель через проп `value`.
24
24
  const staticThemeStore = (0, react_1.useMemo)(() => (0, context_kit_1.staticStore)({
25
- appearance: { colorScheme, brand, brandRole, density, acrylic },
25
+ appearance: { colorScheme, brand, platform, density, acrylic },
26
26
  setAppearance: undefined,
27
- }), [colorScheme, brand, brandRole, density, acrylic]);
27
+ }), [colorScheme, brand, platform, density, acrylic]);
28
28
  return ((0, jsx_runtime_1.jsx)(appearanceContext_1.ThemeAppearanceStoreProvider, { store: store ?? staticThemeStore, children: (0, jsx_runtime_1.jsx)(ThemeScope_1.ThemeScope, { rootRef: rootRef, className: className, brandColor: brandColor, nonce: nonce, children: children }) }));
29
29
  }
30
30
  RootThemeProvider.displayName = 'RootThemeProvider';
package/dist/cjs/constants/appearance.d.ts CHANGED
@@ -4,20 +4,31 @@ export declare const DENSITY: {
4
4
  readonly Compact: "compact";
5
5
  readonly Spacious: "spacious";
6
6
  };
7
- /** Бренд. Класс `sn-brandA` / `sn-brandB` / `sn-brandC` / `sn-brandD` / `sn-brandE` / `sn-brandF`. */
8
- export declare const BRAND: {
9
- readonly A: "brandA";
10
- readonly B: "brandB";
11
- readonly C: "brandC";
12
- readonly D: "brandD";
13
- readonly E: "brandE";
14
- readonly F: "brandF";
7
+ /**
8
+ * Платформа — набор размеров, типографики и отступов, из которого плотность берёт свои значения.
9
+ * Класс `sn-webDesktop` / `sn-webMobile`.
10
+ */
11
+ export declare const PLATFORM: {
12
+ readonly WebDesktop: "webDesktop";
13
+ readonly WebMobile: "webMobile";
15
14
  };
16
- /** Роль бренда (палитра). Класс `sn-main` / `sn-alter` … */
17
- export declare const BRAND_ROLE: {
18
- readonly Main: "main";
19
- readonly Alter: "alter";
20
- readonly Alter2: "alter2";
21
- readonly Alter3: "alter3";
22
- readonly Alter4: "alter4";
15
+ /**
16
+ * Бренд. Класс `sn-<значение>`. Семейства HR-портала и сайта представлены финальными цветовыми
17
+ * вариантами: родительские слои `hrPortal`/`site` нужны только в Figma.
18
+ */
19
+ export declare const BRAND: {
20
+ readonly CloudConsole: "cloudConsole";
21
+ readonly GigaId: "giga-id";
22
+ readonly Gitverse: "gitverse";
23
+ readonly SnackUI: "snackUI";
24
+ readonly HrBlue: "hrBlue";
25
+ readonly HrGraphite: "hrGraphite";
26
+ readonly HrGreen: "hrGreen";
27
+ readonly HrPurple: "hrPurple";
28
+ readonly HrYellow: "hrYellow";
29
+ readonly SiteBlue: "siteBlue";
30
+ readonly SiteGraphite: "siteGraphite";
31
+ readonly SiteGreen: "siteGreen";
32
+ readonly SitePurple: "sitePurple";
33
+ readonly SiteYellow: "siteYellow";
23
34
  };
package/dist/cjs/constants/appearance.js CHANGED
@@ -2,27 +2,38 @@
2
2
  // Оси оформления дизайн-системы, спроецированные на классы `sn-*` из `@cloud-ru/figma-variables`.
3
3
  // Чистый модуль (без React/DOM) — реэкспортируется из `@cloud-ru/ds-theme/ssr` (RSC-safe).
4
4
  Object.defineProperty(exports, "__esModule", { value: true });
5
- exports.BRAND_ROLE = exports.BRAND = exports.DENSITY = void 0;
5
+ exports.BRAND = exports.PLATFORM = exports.DENSITY = void 0;
6
6
  /** Плотность раскладки. Класс `sn-comfort` / `sn-compact` / `sn-spacious`. */
7
7
  exports.DENSITY = {
8
8
  Comfort: 'comfort',
9
9
  Compact: 'compact',
10
10
  Spacious: 'spacious',
11
11
  };
12
- /** Бренд. Класс `sn-brandA` / `sn-brandB` / `sn-brandC` / `sn-brandD` / `sn-brandE` / `sn-brandF`. */
13
- exports.BRAND = {
14
- A: 'brandA',
15
- B: 'brandB',
16
- C: 'brandC',
17
- D: 'brandD',
18
- E: 'brandE',
19
- F: 'brandF',
12
+ /**
13
+ * Платформа — набор размеров, типографики и отступов, из которого плотность берёт свои значения.
14
+ * Класс `sn-webDesktop` / `sn-webMobile`.
15
+ */
16
+ exports.PLATFORM = {
17
+ WebDesktop: 'webDesktop',
18
+ WebMobile: 'webMobile',
20
19
  };
21
- /** Роль бренда (палитра). Класс `sn-main` / `sn-alter` … */
22
- exports.BRAND_ROLE = {
23
- Main: 'main',
24
- Alter: 'alter',
25
- Alter2: 'alter2',
26
- Alter3: 'alter3',
27
- Alter4: 'alter4',
20
+ /**
21
+ * Бренд. Класс `sn-<значение>`. Семейства HR-портала и сайта представлены финальными цветовыми
22
+ * вариантами: родительские слои `hrPortal`/`site` нужны только в Figma.
23
+ */
24
+ exports.BRAND = {
25
+ CloudConsole: 'cloudConsole',
26
+ GigaId: 'giga-id',
27
+ Gitverse: 'gitverse',
28
+ SnackUI: 'snackUI',
29
+ HrBlue: 'hrBlue',
30
+ HrGraphite: 'hrGraphite',
31
+ HrGreen: 'hrGreen',
32
+ HrPurple: 'hrPurple',
33
+ HrYellow: 'hrYellow',
34
+ SiteBlue: 'siteBlue',
35
+ SiteGraphite: 'siteGraphite',
36
+ SiteGreen: 'siteGreen',
37
+ SitePurple: 'sitePurple',
38
+ SiteYellow: 'siteYellow',
28
39
  };
package/dist/cjs/hooks/useApplyCustomTheme.d.ts CHANGED
@@ -14,7 +14,7 @@ export type UseApplyCustomThemeProps = {
14
14
  };
15
15
  /**
16
16
  * Применяет кастомный бренд-цвет: генерирует из `color` бренд-палитру и инжектит `<style>`,
17
- * переопределяющий её на бренд-классах (`.sn-brandA/B/C/D/E/F`), а не inline на одном элементе — поэтому
17
+ * переопределяющий её на бренд-классах (`.sn-cloudConsole`, `.sn-hrBlue` …), а не inline на одном элементе — поэтому
18
18
  * цвет переживает переэмиты `sn-*` вложенными компонентами и доходит до порталов. Семантический слой
19
19
  * каскадит из палитры, красятся обе схемы.
20
20
  *
package/dist/cjs/hooks/useApplyCustomTheme.js CHANGED
@@ -6,7 +6,7 @@ const customTheme_1 = require("../utils/customTheme");
6
6
  const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
7
7
  /**
8
8
  * Применяет кастомный бренд-цвет: генерирует из `color` бренд-палитру и инжектит `<style>`,
9
- * переопределяющий её на бренд-классах (`.sn-brandA/B/C/D/E/F`), а не inline на одном элементе — поэтому
9
+ * переопределяющий её на бренд-классах (`.sn-cloudConsole`, `.sn-hrBlue` …), а не inline на одном элементе — поэтому
10
10
  * цвет переживает переэмиты `sn-*` вложенными компонентами и доходит до порталов. Семантический слой
11
11
  * каскадит из палитры, красятся обе схемы.
12
12
  *
package/dist/cjs/hooks/useThemeClassnames.d.ts CHANGED
@@ -4,7 +4,7 @@ import { ThemeAppearance } from '../types/appearance';
4
4
  * цепочка `ChildThemeProvider`) ⊕ переданные `overrides`. Навешивается на DOM-границу компонента,
5
5
  * который хочет переопределить ось (например, мобильная обёртка с `density: 'comfort'`).
6
6
  *
7
- * Поскольку набор включает текущий `colorScheme`/`brand`/`brandRole` из контекста, такая обёртка —
7
+ * Поскольку набор включает текущий `colorScheme`/`brand` из контекста, такая обёртка —
8
8
  * самосогласованный scope и трекает переключение темы. Без провайдера в дереве оформление пустое,
9
9
  * и поведение совпадает со старым `getThemeClassnames({ density })`.
10
10
  */
package/dist/cjs/hooks/useThemeClassnames.js CHANGED
@@ -8,7 +8,7 @@ const getThemeClassnames_1 = require("../utils/getThemeClassnames");
8
8
  * цепочка `ChildThemeProvider`) ⊕ переданные `overrides`. Навешивается на DOM-границу компонента,
9
9
  * который хочет переопределить ось (например, мобильная обёртка с `density: 'comfort'`).
10
10
  *
11
- * Поскольку набор включает текущий `colorScheme`/`brand`/`brandRole` из контекста, такая обёртка —
11
+ * Поскольку набор включает текущий `colorScheme`/`brand` из контекста, такая обёртка —
12
12
  * самосогласованный scope и трекает переключение темы. Без провайдера в дереве оформление пустое,
13
13
  * и поведение совпадает со старым `getThemeClassnames({ density })`.
14
14
  */
package/dist/cjs/ssr.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- export { BRAND, BRAND_ROLE, DENSITY } from './constants/appearance';
1
+ export { BRAND, DENSITY, PLATFORM } from './constants/appearance';
2
2
  export { COLOR_SCHEME, THEME_OVERRIDE, THEME_OVERRIDE_STORAGE_KEY } from './constants/colorScheme';
3
- export type { Brand, BrandRole, Density, ThemeAppearance } from './types/appearance';
3
+ export type { Brand, Density, Platform, ThemeAppearance } from './types/appearance';
4
4
  export type { ColorScheme, ThemeOverride } from './types/colorScheme';
5
5
  export { mergeAppearance } from './utils/mergeAppearance';
6
6
  export { getThemeClassnameList, getThemeClassnames } from './utils/getThemeClassnames';
package/dist/cjs/ssr.js CHANGED
@@ -2,11 +2,11 @@
2
2
  // SSR-безопасный субпуть `@cloud-ru/ds-theme/ssr`: только чистые символы (без React-контекста/хуков),
3
3
  // чтобы импорт в React Server Components не тянул `createContext`. Зеркало `@cloud-ru/ds-adaptive/ssr`.
4
4
  Object.defineProperty(exports, "__esModule", { value: true });
5
- exports.PRIMARY_ACCENT_TONE = exports.BRAND_PRIMARY_VAR_PREFIX = exports.BRAND_PRIMARY_TONES = exports.BASE_BRAND_PALETTE = exports.buildBrandPaletteCss = exports.buildBrandPaletteVars = exports.generateBrandPalette = exports.getThemeBootstrapScript = exports.getThemeOverrideFromHeaders = exports.getColorSchemeFromHeaders = exports.resolveColorScheme = exports.getThemeClassnames = exports.getThemeClassnameList = exports.mergeAppearance = exports.THEME_OVERRIDE_STORAGE_KEY = exports.THEME_OVERRIDE = exports.COLOR_SCHEME = exports.DENSITY = exports.BRAND_ROLE = exports.BRAND = void 0;
5
+ exports.PRIMARY_ACCENT_TONE = exports.BRAND_PRIMARY_VAR_PREFIX = exports.BRAND_PRIMARY_TONES = exports.BASE_BRAND_PALETTE = exports.buildBrandPaletteCss = exports.buildBrandPaletteVars = exports.generateBrandPalette = exports.getThemeBootstrapScript = exports.getThemeOverrideFromHeaders = exports.getColorSchemeFromHeaders = exports.resolveColorScheme = exports.getThemeClassnames = exports.getThemeClassnameList = exports.mergeAppearance = exports.THEME_OVERRIDE_STORAGE_KEY = exports.THEME_OVERRIDE = exports.COLOR_SCHEME = exports.PLATFORM = exports.DENSITY = exports.BRAND = void 0;
6
6
  var appearance_1 = require("./constants/appearance");
7
7
  Object.defineProperty(exports, "BRAND", { enumerable: true, get: function () { return appearance_1.BRAND; } });
8
- Object.defineProperty(exports, "BRAND_ROLE", { enumerable: true, get: function () { return appearance_1.BRAND_ROLE; } });
9
8
  Object.defineProperty(exports, "DENSITY", { enumerable: true, get: function () { return appearance_1.DENSITY; } });
9
+ Object.defineProperty(exports, "PLATFORM", { enumerable: true, get: function () { return appearance_1.PLATFORM; } });
10
10
  var colorScheme_1 = require("./constants/colorScheme");
11
11
  Object.defineProperty(exports, "COLOR_SCHEME", { enumerable: true, get: function () { return colorScheme_1.COLOR_SCHEME; } });
12
12
  Object.defineProperty(exports, "THEME_OVERRIDE", { enumerable: true, get: function () { return colorScheme_1.THEME_OVERRIDE; } });
package/dist/cjs/store/globalStore.js CHANGED
@@ -9,7 +9,7 @@ const REGISTRY_KEY = Symbol.for(keys_1.THEME_KEYS.store);
9
9
  // между запросами), поэтому серверный рендер всегда отдаёт дефолт; реальные классы на SSR ставит
10
10
  // строка на `<html>` (см. providers-standard.md).
11
11
  const SERVER_VALUE = { appearance: {}, setAppearance: undefined };
12
- const APPEARANCE_KEYS = ['colorScheme', 'brand', 'brandRole', 'density', 'acrylic'];
12
+ const APPEARANCE_KEYS = ['colorScheme', 'brand', 'platform', 'density', 'acrylic'];
13
13
  function isSameAppearance(a, b) {
14
14
  return APPEARANCE_KEYS.every(key => a[key] === b[key]);
15
15
  }
package/dist/cjs/types/appearance.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- import { BRAND, BRAND_ROLE, DENSITY } from '../constants/appearance';
1
+ import { BRAND, DENSITY, PLATFORM } from '../constants/appearance';
2
2
  import { ColorScheme } from './colorScheme';
3
3
  export type Density = (typeof DENSITY)[keyof typeof DENSITY];
4
+ export type Platform = (typeof PLATFORM)[keyof typeof PLATFORM];
4
5
  export type Brand = (typeof BRAND)[keyof typeof BRAND];
5
- export type BrandRole = (typeof BRAND_ROLE)[keyof typeof BRAND_ROLE];
6
6
  /**
7
7
  * Набор осей оформления, которые определяют полный набор `sn-*` классов на DOM-границе. Любая
8
8
  * незаданная ось наследуется от вышестоящего провайдера (слияние в `ChildThemeProvider`) — но на сам
@@ -12,10 +12,13 @@ export type BrandRole = (typeof BRAND_ROLE)[keyof typeof BRAND_ROLE];
12
12
  export type ThemeAppearance = {
13
13
  /** Цветовая схема — `sn-light` / `sn-dark`. */
14
14
  colorScheme?: ColorScheme;
15
- /** Бренд — `sn-brandA` … */
15
+ /** Бренд — `sn-cloudConsole` / `sn-hrBlue` … */
16
16
  brand?: Brand;
17
- /** Роль бренда (палитра) — `sn-main` … */
18
- brandRole?: BrandRole;
17
+ /**
18
+ * Платформа — `sn-webDesktop` / `sn-webMobile`. Без значения — `webDesktop`. Раскладку `@cloud-ru/ds-adaptive`
19
+ * тема не читает: потребитель передаёт согласованные значения и в `AdaptiveProvider`, и сюда.
20
+ */
21
+ platform?: Platform;
19
22
  /** Плотность — `sn-comfort` / `sn-compact` / `sn-spacious`. */
20
23
  density?: Density;
21
24
  /** Акрил (blur-материал) — `sn-yes` при `true`, иначе `sn-no`. */
package/dist/cjs/utils/customTheme/buildBrandPaletteCss.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Собирает текст CSS-правила, переопределяющего бренд-палитру из seed-цвета на бренд-классах.
3
3
  *
4
- * - Без `scope` — глобально (`:is(.sn-brandA,…){…}`), для white-label в корне приложения: побеждает
4
+ * - Без `scope` — глобально (`:is(.sn-cloudConsole,…){…}`), для white-label в корне приложения: побеждает
5
5
  * по source order на всех бренд-классах страницы, включая порталы.
6
6
  * - Со `scope` (CSS-селектор корня поддерева) — ограничивает область потомками и самим корнем; выше
7
7
  * токенной специфичности, поэтому порядок не важен.
package/dist/cjs/utils/customTheme/buildBrandPaletteCss.js CHANGED
@@ -3,19 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.buildBrandPaletteCss = buildBrandPaletteCss;
4
4
  const appearance_1 = require("../../constants/appearance");
5
5
  const buildBrandPaletteVars_1 = require("./buildBrandPaletteVars");
6
- // Правило нацелено на сами бренд-классы (`.sn-brandA/B/C/D/E/F`), а не на один элемент inline: компоненты,
6
+ // Правило нацелено на сами бренд-классы (`.sn-cloudConsole`, `.sn-hrBlue` …), а не на один элемент inline: компоненты,
7
7
  // переэмитящие набор `sn-*` на своих обёртках (Table/Stepper/Alert через `useThemeClassnames`), заново
8
8
  // объявляют `--sn-brand-color-primary-*` из класса бренда — inline на предке они перекрыли бы, правило
9
9
  // на том же бренд-классе — нет.
10
10
  // Один seed переопределяет сразу все бренд-классы (потребитель не знает, в какой бренд-слот завернётся
11
- // его поддерево). TODO FF-8813: возможность задавать seed индивидуально для каждого бренда (brandA/B/C/D/E/F).
11
+ // его поддерево). TODO FF-8813: возможность задавать seed индивидуально для каждого бренда.
12
12
  const BRAND_CLASS_SELECTOR = `:is(${Object.values(appearance_1.BRAND)
13
13
  .map(brand => `.sn-${brand}`)
14
14
  .join(',')})`;
15
15
  /**
16
16
  * Собирает текст CSS-правила, переопределяющего бренд-палитру из seed-цвета на бренд-классах.
17
17
  *
18
- * - Без `scope` — глобально (`:is(.sn-brandA,…){…}`), для white-label в корне приложения: побеждает
18
+ * - Без `scope` — глобально (`:is(.sn-cloudConsole,…){…}`), для white-label в корне приложения: побеждает
19
19
  * по source order на всех бренд-классах страницы, включая порталы.
20
20
  * - Со `scope` (CSS-селектор корня поддерева) — ограничивает область потомками и самим корнем; выше
21
21
  * токенной специфичности, поэтому порядок не важен.
package/dist/cjs/utils/customTheme/constants.d.ts CHANGED
@@ -1,27 +1,27 @@
1
- /** Тон акцента (`--sn-brand-color-primary-55`) — им становится сам seed-цвет. */
2
- export declare const PRIMARY_ACCENT_TONE = "55";
3
- /** Near-white тон для текста на акценте (совпадает с дефолтом `onAccentLight` бренда `brandA`). */
1
+ /** Тон акцента (`--sn-brand-color-primary-50`) — им становится сам seed-цвет. */
2
+ export declare const PRIMARY_ACCENT_TONE = "50";
3
+ /** Near-white тон для текста на акценте (совпадает с дефолтом `onAccentLight` бренда `cloudConsole`). */
4
4
  export declare const NEAR_WHITE_TONE = "99";
5
- /** Near-dark тон для текста на акценте (совпадает с дефолтом `onAccentDark` бренда `brandA`). */
6
- export declare const NEAR_DARK_TONE = "5";
5
+ /** Near-dark тон для текста на акценте (совпадает с дефолтом `onAccentDark` бренда `cloudConsole`). */
6
+ export declare const NEAR_DARK_TONE = "05";
7
7
  /** Все числовые тоны палитры `--sn-brand-color-primary-<tone>`. */
8
- export declare const BRAND_PRIMARY_TONES: readonly ["5", "10", "15", "25", "45", "55", "60", "65", "80", "90", "95", "99"];
8
+ export declare const BRAND_PRIMARY_TONES: readonly ["05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "99"];
9
9
  export type BrandPrimaryTone = (typeof BRAND_PRIMARY_TONES)[number];
10
- /** Опорные hex тонов бренда `brandA` — источник `L`/`C` для генерации по любому seed-цвету. */
10
+ /** Опорные hex тонов бренда `cloudConsole` — источник `L`/`C` для генерации по любому seed-цвету. */
11
11
  export declare const BASE_BRAND_PALETTE: Record<BrandPrimaryTone, string>;
12
12
  /** Префикс CSS-переменных бренд-палитры. */
13
13
  export declare const BRAND_PRIMARY_VAR_PREFIX = "--sn-brand-color-primary-";
14
- /** Alpha-суффикс для `--sn-brand-color-primary-transparent` (совпадает с дефолтом `#389f7424` бренда `brandA`). */
15
- export declare const TRANSPARENT_ALPHA_SUFFIX = "24";
14
+ /** Alpha-суффикс для `--sn-brand-color-primary-transparent` (дефолт `#389f741a` бренда cloudConsole). */
15
+ export declare const TRANSPARENT_ALPHA_SUFFIX = "1a";
16
16
  /**
17
17
  * Тинты акцента для activated-состояний (`--sn-brand-color-state-activated-*-background`) — это
18
- * акцентный тон с alpha. Суффиксы совпадают с дефолтами brandA (`#389f7426/59/73`). Без них
18
+ * акцентный тон с alpha. Суффиксы — дефолты cloudConsole (`#389f741a/33/4d`). Без них
19
19
  * activated-заливки (выбранная строка таблицы, active-состояния) не следуют за кастомным бренд-цветом.
20
20
  */
21
21
  export declare const ACTIVATED_ALPHA_SUFFIX: {
22
- readonly default: "26";
23
- readonly hovered: "59";
24
- readonly pressed: "73";
22
+ readonly default: "1a";
23
+ readonly hovered: "33";
24
+ readonly pressed: "4d";
25
25
  };
26
26
  /** Имена CSS-переменных activated-заливок. */
27
27
  export declare const BRAND_ACTIVATED_VAR: {
package/dist/cjs/utils/customTheme/constants.js CHANGED
@@ -1,27 +1,27 @@
1
1
  "use strict";
2
2
  // Опорная палитра и тон-константы для генерации кастомного бренд-цвета. Тоновый набор и дефолтные
3
- // hex совпадают с `--sn-brand-color-primary-<tone>` бренда `brandA` из `@cloud-ru/figma-variables`:
3
+ // hex совпадают с `--sn-brand-color-primary-<tone>` бренда `cloudConsole` из `@cloud-ru/figma-variables`:
4
4
  // генератор держит `L`/`C` этих тонов и поворачивает hue к seed-цвету потребителя.
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.BRAND_ACTIVATED_VAR = exports.ACTIVATED_ALPHA_SUFFIX = exports.TRANSPARENT_ALPHA_SUFFIX = exports.BRAND_PRIMARY_VAR_PREFIX = exports.BASE_BRAND_PALETTE = exports.BRAND_PRIMARY_TONES = exports.NEAR_DARK_TONE = exports.NEAR_WHITE_TONE = exports.PRIMARY_ACCENT_TONE = void 0;
7
- /** Тон акцента (`--sn-brand-color-primary-55`) — им становится сам seed-цвет. */
8
- exports.PRIMARY_ACCENT_TONE = '55';
9
- /** Near-white тон для текста на акценте (совпадает с дефолтом `onAccentLight` бренда `brandA`). */
7
+ /** Тон акцента (`--sn-brand-color-primary-50`) — им становится сам seed-цвет. */
8
+ exports.PRIMARY_ACCENT_TONE = '50';
9
+ /** Near-white тон для текста на акценте (совпадает с дефолтом `onAccentLight` бренда `cloudConsole`). */
10
10
  exports.NEAR_WHITE_TONE = '99';
11
- /** Near-dark тон для текста на акценте (совпадает с дефолтом `onAccentDark` бренда `brandA`). */
12
- exports.NEAR_DARK_TONE = '5';
11
+ /** Near-dark тон для текста на акценте (совпадает с дефолтом `onAccentDark` бренда `cloudConsole`). */
12
+ exports.NEAR_DARK_TONE = '05';
13
13
  /** Все числовые тоны палитры `--sn-brand-color-primary-<tone>`. */
14
- exports.BRAND_PRIMARY_TONES = ['5', '10', '15', '25', '45', '55', '60', '65', '80', '90', '95', '99'];
15
- /** Опорные hex тонов бренда `brandA` — источник `L`/`C` для генерации по любому seed-цвету. */
14
+ exports.BRAND_PRIMARY_TONES = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95', '99'];
15
+ /** Опорные hex тонов бренда `cloudConsole` — источник `L`/`C` для генерации по любому seed-цвету. */
16
16
  exports.BASE_BRAND_PALETTE = {
17
- '5': '#21372f',
17
+ '05': '#21372f',
18
18
  '10': '#243e35',
19
- '15': '#2b483c',
20
- '25': '#2c5e49',
21
- '45': '#22775b',
22
- '55': '#389f74',
19
+ '20': '#2b483c',
20
+ '30': '#2c5e49',
21
+ '40': '#22775b',
22
+ '50': '#389f74',
23
23
  '60': '#5ebb91',
24
- '65': '#85ceaa',
24
+ '70': '#85ceaa',
25
25
  '80': '#caeadb',
26
26
  '90': '#edf7f1',
27
27
  '95': '#f5fdf8',
@@ -29,17 +29,17 @@ exports.BASE_BRAND_PALETTE = {
29
29
  };
30
30
  /** Префикс CSS-переменных бренд-палитры. */
31
31
  exports.BRAND_PRIMARY_VAR_PREFIX = '--sn-brand-color-primary-';
32
- /** Alpha-суффикс для `--sn-brand-color-primary-transparent` (совпадает с дефолтом `#389f7424` бренда `brandA`). */
33
- exports.TRANSPARENT_ALPHA_SUFFIX = '24';
32
+ /** Alpha-суффикс для `--sn-brand-color-primary-transparent` (дефолт `#389f741a` бренда cloudConsole). */
33
+ exports.TRANSPARENT_ALPHA_SUFFIX = '1a';
34
34
  /**
35
35
  * Тинты акцента для activated-состояний (`--sn-brand-color-state-activated-*-background`) — это
36
- * акцентный тон с alpha. Суффиксы совпадают с дефолтами brandA (`#389f7426/59/73`). Без них
36
+ * акцентный тон с alpha. Суффиксы — дефолты cloudConsole (`#389f741a/33/4d`). Без них
37
37
  * activated-заливки (выбранная строка таблицы, active-состояния) не следуют за кастомным бренд-цветом.
38
38
  */
39
39
  exports.ACTIVATED_ALPHA_SUFFIX = {
40
- default: '26',
41
- hovered: '59',
42
- pressed: '73',
40
+ default: '1a',
41
+ hovered: '33',
42
+ pressed: '4d',
43
43
  };
44
44
  /** Имена CSS-переменных activated-заливок. */
45
45
  exports.BRAND_ACTIVATED_VAR = {
package/dist/cjs/utils/customTheme/generateBrandPalette.d.ts CHANGED
@@ -3,7 +3,7 @@ import { BrandPrimaryTone } from './constants';
3
3
  export type BrandPalette = Record<BrandPrimaryTone, string>;
4
4
  /**
5
5
  * Строит бренд-палитру из одного seed-цвета: берёт `L`/`C` каждого опорного тона `BASE_BRAND_PALETTE`
6
- * и поворачивает hue к hue seed-цвета (OKLCH). Тон акцента (`55`) становится самим seed-цветом.
6
+ * и поворачивает hue к hue seed-цвета (OKLCH). Тон акцента (`50`) становится самим seed-цветом.
7
7
  * Так один цвет потребителя перекрашивает всю шкалу `--sn-brand-color-primary-<tone>`, сохраняя
8
8
  * светлоту/насыщенность DS-палитры. Невалидный hex → `null`.
9
9
  */
package/dist/cjs/utils/customTheme/generateBrandPalette.js CHANGED
@@ -5,7 +5,7 @@ const color_1 = require("./color");
5
5
  const constants_1 = require("./constants");
6
6
  /**
7
7
  * Строит бренд-палитру из одного seed-цвета: берёт `L`/`C` каждого опорного тона `BASE_BRAND_PALETTE`
8
- * и поворачивает hue к hue seed-цвета (OKLCH). Тон акцента (`55`) становится самим seed-цветом.
8
+ * и поворачивает hue к hue seed-цвета (OKLCH). Тон акцента (`50`) становится самим seed-цветом.
9
9
  * Так один цвет потребителя перекрашивает всю шкалу `--sn-brand-color-primary-<tone>`, сохраняя
10
10
  * светлоту/насыщенность DS-палитры. Невалидный hex → `null`.
11
11
  */
package/dist/cjs/utils/getThemeClassnames.d.ts CHANGED
@@ -3,8 +3,11 @@ import { ThemeAppearance } from '../types/appearance';
3
3
  * Чистая функция: собирает **полный** набор `sn-*` классов из осей оформления списком токенов.
4
4
  * Полный набор обязателен на каждой DOM-границе — токены `@cloud-ru/figma-variables` не
5
5
  * переопределяются по одной оси через CSS-каскад (см. providers-standard.md). Базовые слои
6
- * (`sn-base-styles`, `sn-figmaStyles`, `sn-components`) и материал (`sn-yes`/`sn-no`)
7
- * — всегда; `density`/`colorScheme`/`brand`/`brandRole` — если заданы.
6
+ * (`sn-base-styles`, `sn-figmaStyles`, `sn-components`), материал (`sn-yes`/`sn-no`) и платформа
7
+ * — всегда; `density`/`colorScheme`/`brand` — если заданы.
8
+ *
9
+ * Платформа эмитится всегда (по умолчанию `webDesktop`): плотность ссылается на её переменные и
10
+ * вычисляется на том же элементе, поэтому класс платформы должен стоять рядом с классом плотности.
8
11
  *
9
12
  * Списочная форма — источник истины для `getThemeClassnames` (строка через `join`) и для
10
13
  * `element.classList.add(...)`, которому нужны отдельные токены без промежуточного `split`.