@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/src/hooks/useThemeClassnames.ts CHANGED
@@ -7,7 +7,7 @@ import { getThemeClassnames } from '../utils/getThemeClassnames';
7
7
  * цепочка `ChildThemeProvider`) ⊕ переданные `overrides`. Навешивается на DOM-границу компонента,
8
8
  * который хочет переопределить ось (например, мобильная обёртка с `density: 'comfort'`).
9
9
  *
10
- * Поскольку набор включает текущий `colorScheme`/`brand`/`brandRole` из контекста, такая обёртка —
10
+ * Поскольку набор включает текущий `colorScheme`/`brand` из контекста, такая обёртка —
11
11
  * самосогласованный scope и трекает переключение темы. Без провайдера в дереве оформление пустое,
12
12
  * и поведение совпадает со старым `getThemeClassnames({ density })`.
13
13
  */
package/src/ssr.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  // SSR-безопасный субпуть `@cloud-ru/ds-theme/ssr`: только чистые символы (без React-контекста/хуков),
2
2
  // чтобы импорт в React Server Components не тянул `createContext`. Зеркало `@cloud-ru/ds-adaptive/ssr`.
3
3
 
4
- export { BRAND, BRAND_ROLE, DENSITY } from './constants/appearance';
4
+ export { BRAND, DENSITY, PLATFORM } from './constants/appearance';
5
5
  export { COLOR_SCHEME, THEME_OVERRIDE, THEME_OVERRIDE_STORAGE_KEY } from './constants/colorScheme';
6
- export type { Brand, BrandRole, Density, ThemeAppearance } from './types/appearance';
6
+ export type { Brand, Density, Platform, ThemeAppearance } from './types/appearance';
7
7
  export type { ColorScheme, ThemeOverride } from './types/colorScheme';
8
8
  export { mergeAppearance } from './utils/mergeAppearance';
9
9
  export { getThemeClassnameList, getThemeClassnames } from './utils/getThemeClassnames';
package/src/store/globalStore.ts CHANGED
@@ -22,7 +22,7 @@ type Registry = { [REGISTRY_KEY]?: GlobalThemeStore };
22
22
  // строка на `<html>` (см. providers-standard.md).
23
23
  const SERVER_VALUE: ThemeAppearanceContextValue = { appearance: {}, setAppearance: undefined };
24
24
 
25
- const APPEARANCE_KEYS: (keyof ThemeAppearance)[] = ['colorScheme', 'brand', 'brandRole', 'density', 'acrylic'];
25
+ const APPEARANCE_KEYS: (keyof ThemeAppearance)[] = ['colorScheme', 'brand', 'platform', 'density', 'acrylic'];
26
26
 
27
27
  function isSameAppearance(a: ThemeAppearance, b: ThemeAppearance): boolean {
28
28
  return APPEARANCE_KEYS.every(key => a[key] === b[key]);
package/src/types/appearance.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  // Тип через `(typeof X)[keyof typeof X]` — чтобы не тянуть `@cloud-ru/ds-utils` (RSC-safe, как в colorScheme).
2
2
 
3
- import { BRAND, BRAND_ROLE, DENSITY } from '../constants/appearance';
3
+ import { BRAND, DENSITY, PLATFORM } from '../constants/appearance';
4
4
  import { ColorScheme } from './colorScheme';
5
5
 
6
6
  export type Density = (typeof DENSITY)[keyof typeof DENSITY];
7
7
 
8
- export type Brand = (typeof BRAND)[keyof typeof BRAND];
8
+ export type Platform = (typeof PLATFORM)[keyof typeof PLATFORM];
9
9
 
10
- export type BrandRole = (typeof BRAND_ROLE)[keyof typeof BRAND_ROLE];
10
+ export type Brand = (typeof BRAND)[keyof typeof BRAND];
11
11
 
12
12
  /**
13
13
  * Набор осей оформления, которые определяют полный набор `sn-*` классов на DOM-границе. Любая
@@ -18,10 +18,13 @@ export type BrandRole = (typeof BRAND_ROLE)[keyof typeof BRAND_ROLE];
18
18
  export type ThemeAppearance = {
19
19
  /** Цветовая схема — `sn-light` / `sn-dark`. */
20
20
  colorScheme?: ColorScheme;
21
- /** Бренд — `sn-brandA` … */
21
+ /** Бренд — `sn-cloudConsole` / `sn-hrBlue` … */
22
22
  brand?: Brand;
23
- /** Роль бренда (палитра) — `sn-main` … */
24
- brandRole?: BrandRole;
23
+ /**
24
+ * Платформа — `sn-webDesktop` / `sn-webMobile`. Без значения — `webDesktop`. Раскладку `@cloud-ru/ds-adaptive`
25
+ * тема не читает: потребитель передаёт согласованные значения и в `AdaptiveProvider`, и сюда.
26
+ */
27
+ platform?: Platform;
25
28
  /** Плотность — `sn-comfort` / `sn-compact` / `sn-spacious`. */
26
29
  density?: Density;
27
30
  /** Акрил (blur-материал) — `sn-yes` при `true`, иначе `sn-no`. */
package/src/utils/customTheme/buildBrandPaletteCss.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import { BRAND } from '../../constants/appearance';
2
2
  import { buildBrandPaletteVars } from './buildBrandPaletteVars';
3
3
 
4
- // Правило нацелено на сами бренд-классы (`.sn-brandA/B/C/D/E/F`), а не на один элемент inline: компоненты,
4
+ // Правило нацелено на сами бренд-классы (`.sn-cloudConsole`, `.sn-hrBlue` …), а не на один элемент inline: компоненты,
5
5
  // переэмитящие набор `sn-*` на своих обёртках (Table/Stepper/Alert через `useThemeClassnames`), заново
6
6
  // объявляют `--sn-brand-color-primary-*` из класса бренда — inline на предке они перекрыли бы, правило
7
7
  // на том же бренд-классе — нет.
8
8
  // Один seed переопределяет сразу все бренд-классы (потребитель не знает, в какой бренд-слот завернётся
9
- // его поддерево). TODO FF-8813: возможность задавать seed индивидуально для каждого бренда (brandA/B/C/D/E/F).
9
+ // его поддерево). TODO FF-8813: возможность задавать seed индивидуально для каждого бренда.
10
10
  const BRAND_CLASS_SELECTOR = `:is(${Object.values(BRAND)
11
11
  .map(brand => `.sn-${brand}`)
12
12
  .join(',')})`;
@@ -14,7 +14,7 @@ const BRAND_CLASS_SELECTOR = `:is(${Object.values(BRAND)
14
14
  /**
15
15
  * Собирает текст CSS-правила, переопределяющего бренд-палитру из seed-цвета на бренд-классах.
16
16
  *
17
- * - Без `scope` — глобально (`:is(.sn-brandA,…){…}`), для white-label в корне приложения: побеждает
17
+ * - Без `scope` — глобально (`:is(.sn-cloudConsole,…){…}`), для white-label в корне приложения: побеждает
18
18
  * по source order на всех бренд-классах страницы, включая порталы.
19
19
  * - Со `scope` (CSS-селектор корня поддерева) — ограничивает область потомками и самим корнем; выше
20
20
  * токенной специфичности, поэтому порядок не важен.
package/src/utils/customTheme/constants.ts CHANGED
@@ -1,31 +1,31 @@
1
1
  // Опорная палитра и тон-константы для генерации кастомного бренд-цвета. Тоновый набор и дефолтные
2
- // hex совпадают с `--sn-brand-color-primary-<tone>` бренда `brandA` из `@cloud-ru/figma-variables`:
2
+ // hex совпадают с `--sn-brand-color-primary-<tone>` бренда `cloudConsole` из `@cloud-ru/figma-variables`:
3
3
  // генератор держит `L`/`C` этих тонов и поворачивает hue к seed-цвету потребителя.
4
4
 
5
- /** Тон акцента (`--sn-brand-color-primary-55`) — им становится сам seed-цвет. */
6
- export const PRIMARY_ACCENT_TONE = '55';
5
+ /** Тон акцента (`--sn-brand-color-primary-50`) — им становится сам seed-цвет. */
6
+ export const PRIMARY_ACCENT_TONE = '50';
7
7
 
8
- /** Near-white тон для текста на акценте (совпадает с дефолтом `onAccentLight` бренда `brandA`). */
8
+ /** Near-white тон для текста на акценте (совпадает с дефолтом `onAccentLight` бренда `cloudConsole`). */
9
9
  export const NEAR_WHITE_TONE = '99';
10
10
 
11
- /** Near-dark тон для текста на акценте (совпадает с дефолтом `onAccentDark` бренда `brandA`). */
12
- export const NEAR_DARK_TONE = '5';
11
+ /** Near-dark тон для текста на акценте (совпадает с дефолтом `onAccentDark` бренда `cloudConsole`). */
12
+ export const NEAR_DARK_TONE = '05';
13
13
 
14
14
  /** Все числовые тоны палитры `--sn-brand-color-primary-<tone>`. */
15
- export const BRAND_PRIMARY_TONES = ['5', '10', '15', '25', '45', '55', '60', '65', '80', '90', '95', '99'] as const;
15
+ export const BRAND_PRIMARY_TONES = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95', '99'] as const;
16
16
 
17
17
  export type BrandPrimaryTone = (typeof BRAND_PRIMARY_TONES)[number];
18
18
 
19
- /** Опорные hex тонов бренда `brandA` — источник `L`/`C` для генерации по любому seed-цвету. */
19
+ /** Опорные hex тонов бренда `cloudConsole` — источник `L`/`C` для генерации по любому seed-цвету. */
20
20
  export const BASE_BRAND_PALETTE: Record<BrandPrimaryTone, string> = {
21
- '5': '#21372f',
21
+ '05': '#21372f',
22
22
  '10': '#243e35',
23
- '15': '#2b483c',
24
- '25': '#2c5e49',
25
- '45': '#22775b',
26
- '55': '#389f74',
23
+ '20': '#2b483c',
24
+ '30': '#2c5e49',
25
+ '40': '#22775b',
26
+ '50': '#389f74',
27
27
  '60': '#5ebb91',
28
- '65': '#85ceaa',
28
+ '70': '#85ceaa',
29
29
  '80': '#caeadb',
30
30
  '90': '#edf7f1',
31
31
  '95': '#f5fdf8',
@@ -35,18 +35,18 @@ export const BASE_BRAND_PALETTE: Record<BrandPrimaryTone, string> = {
35
35
  /** Префикс CSS-переменных бренд-палитры. */
36
36
  export const BRAND_PRIMARY_VAR_PREFIX = '--sn-brand-color-primary-';
37
37
 
38
- /** Alpha-суффикс для `--sn-brand-color-primary-transparent` (совпадает с дефолтом `#389f7424` бренда `brandA`). */
39
- export const TRANSPARENT_ALPHA_SUFFIX = '24';
38
+ /** Alpha-суффикс для `--sn-brand-color-primary-transparent` (дефолт `#389f741a` бренда cloudConsole). */
39
+ export const TRANSPARENT_ALPHA_SUFFIX = '1a';
40
40
 
41
41
  /**
42
42
  * Тинты акцента для activated-состояний (`--sn-brand-color-state-activated-*-background`) — это
43
- * акцентный тон с alpha. Суффиксы совпадают с дефолтами brandA (`#389f7426/59/73`). Без них
43
+ * акцентный тон с alpha. Суффиксы — дефолты cloudConsole (`#389f741a/33/4d`). Без них
44
44
  * activated-заливки (выбранная строка таблицы, active-состояния) не следуют за кастомным бренд-цветом.
45
45
  */
46
46
  export const ACTIVATED_ALPHA_SUFFIX = {
47
- default: '26',
48
- hovered: '59',
49
- pressed: '73',
47
+ default: '1a',
48
+ hovered: '33',
49
+ pressed: '4d',
50
50
  } as const;
51
51
 
52
52
  /** Имена CSS-переменных activated-заливок. */
package/src/utils/customTheme/generateBrandPalette.ts CHANGED
@@ -6,7 +6,7 @@ export type BrandPalette = Record<BrandPrimaryTone, string>;
6
6
 
7
7
  /**
8
8
  * Строит бренд-палитру из одного seed-цвета: берёт `L`/`C` каждого опорного тона `BASE_BRAND_PALETTE`
9
- * и поворачивает hue к hue seed-цвета (OKLCH). Тон акцента (`55`) становится самим seed-цветом.
9
+ * и поворачивает hue к hue seed-цвета (OKLCH). Тон акцента (`50`) становится самим seed-цветом.
10
10
  * Так один цвет потребителя перекрашивает всю шкалу `--sn-brand-color-primary-<tone>`, сохраняя
11
11
  * светлоту/насыщенность DS-палитры. Невалидный hex → `null`.
12
12
  */
package/src/utils/getThemeClassnames.ts CHANGED
@@ -1,19 +1,23 @@
1
+ import { PLATFORM } from '../constants/appearance';
1
2
  import { ThemeAppearance } from '../types/appearance';
2
3
 
3
4
  /**
4
5
  * Чистая функция: собирает **полный** набор `sn-*` классов из осей оформления списком токенов.
5
6
  * Полный набор обязателен на каждой DOM-границе — токены `@cloud-ru/figma-variables` не
6
7
  * переопределяются по одной оси через CSS-каскад (см. providers-standard.md). Базовые слои
7
- * (`sn-base-styles`, `sn-figmaStyles`, `sn-components`) и материал (`sn-yes`/`sn-no`)
8
- * — всегда; `density`/`colorScheme`/`brand`/`brandRole` — если заданы.
8
+ * (`sn-base-styles`, `sn-figmaStyles`, `sn-components`), материал (`sn-yes`/`sn-no`) и платформа
9
+ * — всегда; `density`/`colorScheme`/`brand` — если заданы.
10
+ *
11
+ * Платформа эмитится всегда (по умолчанию `webDesktop`): плотность ссылается на её переменные и
12
+ * вычисляется на том же элементе, поэтому класс платформы должен стоять рядом с классом плотности.
9
13
  *
10
14
  * Списочная форма — источник истины для `getThemeClassnames` (строка через `join`) и для
11
15
  * `element.classList.add(...)`, которому нужны отдельные токены без промежуточного `split`.
12
16
  */
13
17
  export function getThemeClassnameList(appearance: ThemeAppearance = {}): string[] {
14
- const { density, colorScheme, brand, brandRole, acrylic } = appearance;
18
+ const { density, colorScheme, brand, platform = PLATFORM.WebDesktop, acrylic } = appearance;
15
19
 
16
- const classes = ['sn-base-styles', 'sn-figmaStyles', 'sn-components', acrylic ? 'sn-yes' : 'sn-no'];
20
+ const classes = ['sn-base-styles', 'sn-figmaStyles', 'sn-components', acrylic ? 'sn-yes' : 'sn-no', `sn-${platform}`];
17
21
 
18
22
  if (density) {
19
23
  classes.push(`sn-${density}`);
@@ -24,9 +28,6 @@ export function getThemeClassnameList(appearance: ThemeAppearance = {}): string[
24
28
  if (brand) {
25
29
  classes.push(`sn-${brand}`);
26
30
  }
27
- if (brandRole) {
28
- classes.push(`sn-${brandRole}`);
29
- }
30
31
 
31
32
  return classes;
32
33
  }
package/src/utils/mergeAppearance.ts CHANGED
@@ -9,7 +9,7 @@ export function mergeAppearance(parent: ThemeAppearance, overrides: Partial<Them
9
9
  return {
10
10
  colorScheme: overrides.colorScheme ?? parent.colorScheme,
11
11
  brand: overrides.brand ?? parent.brand,
12
- brandRole: overrides.brandRole ?? parent.brandRole,
12
+ platform: overrides.platform ?? parent.platform,
13
13
  density: overrides.density ?? parent.density,
14
14
  acrylic: overrides.acrylic ?? parent.acrylic,
15
15
  };