@cloud-ru/ds-theme 1.0.0 → 1.0.1-preview-ab6621d3.0

package/README.md

@@ -183,7 +183,7 @@ export function LocalDensity() {
 
 #### Related types
 
-- `Brand` = `"brandA"` \| `"brandB"` \| `"brandC"` \| `"brandD"` \| `"brandE"`
+- `Brand` = `"brandA"` \| `"brandB"` \| `"brandC"` \| `"brandD"` \| `"brandE"` \| `"brandF"`
 
 - `BrandRole` = `"alter"` \| `"alter2"` \| `"alter3"` \| `"alter4"` \| `"main"`
 
@@ -196,7 +196,7 @@ export function LocalDensity() {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `acrylic` | `boolean \| undefined` | — | Акрил (blur-материал) — `sn-yes` при `true`, иначе `sn-no`. |
-| `brand` | `"brandA"` \| `"brandB"` \| `"brandC"` \| `"brandD"` \| `"brandE"` | — | Бренд — `sn-brandA` … |
+| `brand` | `"brandA"` \| `"brandB"` \| `"brandC"` \| `"brandD"` \| `"brandE"` \| `"brandF"` | — | Бренд — `sn-brandA` … |
 | `brandRole` | `"alter"` \| `"alter2"` \| `"alter3"` \| `"alter4"` \| `"main"` | — | Роль бренда (палитра) — `sn-main` … |
 | `colorScheme` | `"dark"` \| `"light"` | — | Цветовая схема — `sn-light` / `sn-dark`. |
 | `density` | `"comfort"` \| `"compact"` \| `"spacious"` | — | Плотность — `sn-comfort` / `sn-compact` / `sn-spacious`. |
@@ -222,7 +222,7 @@ export function LocalDensity() {
 
 #### Related types
 
-- `Brand` = `"brandA"` \| `"brandB"` \| `"brandC"` \| `"brandD"` \| `"brandE"`
+- `Brand` = `"brandA"` \| `"brandB"` \| `"brandC"` \| `"brandD"` \| `"brandE"` \| `"brandF"`
 
 - `BrandRole` = `"alter"` \| `"alter2"` \| `"alter3"` \| `"alter4"` \| `"main"`
 
@@ -235,7 +235,7 @@ export function LocalDensity() {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `acrylic` | `boolean \| undefined` | — | Акрил (blur-материал) — `sn-yes` при `true`, иначе `sn-no`. |
-| `brand` | `"brandA"` \| `"brandB"` \| `"brandC"` \| `"brandD"` \| `"brandE"` | — | Бренд — `sn-brandA` … |
+| `brand` | `"brandA"` \| `"brandB"` \| `"brandC"` \| `"brandD"` \| `"brandE"` \| `"brandF"` | — | Бренд — `sn-brandA` … |
 | `brandRole` | `"alter"` \| `"alter2"` \| `"alter3"` \| `"alter4"` \| `"main"` | — | Роль бренда (палитра) — `sn-main` … |
 | `colorScheme` | `"dark"` \| `"light"` | — | Цветовая схема — `sn-light` / `sn-dark`. |
 | `density` | `"comfort"` \| `"compact"` \| `"spacious"` | — | Плотность — `sn-comfort` / `sn-compact` / `sn-spacious`. |
@@ -248,7 +248,7 @@ export function LocalDensity() {
 - **PortalContext** — корневой DOM-узел для порталов.
 ## Кастомный бренд-цвет
 
-Помимо предустановленных брендов (`brandA` / `brandB` / `brandC` / `brandD` / `brandE`) `@cloud-ru/ds-theme` собирает бренд-палитру из одного seed-цвета — для white-label под клиента. Из seed генерируется полная шкала тонов `--sn-brand-color-primary-*` (OKLCH: светлота и насыщенность берутся из опорной шкалы, hue поворачивается к seed) плюс activated-тинты; семантический слой `--sn-theme-color-primary-*` каскадит из неё. Поэтому один цвет перекрашивает акцент во всех компонентах — и в светлой, и в тёмной схеме.
+Помимо предустановленных брендов (`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-*` каскадит из неё. Поэтому один цвет перекрашивает акцент во всех компонентах — и в светлой, и в тёмной схеме.
 
 Палитра применяется **CSS-правилом на бренд-классы** (`.sn-brandA/B/C/D/E`), а не inline-переменными на одном элементе. Это принципиально: компоненты, переобъявляющие полный набор `sn-*` на своих внутренних обёртках (Table, Stepper и т.п. через `useThemeClassnames`), заново объявляют бренд-палитру из класса — inline-переменные предка в таких поддеревьях перекрываются, а правило на том же бренд-классе — нет. Два способа применить:
 

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

@@ -4,13 +4,14 @@ export declare const DENSITY: {
     readonly Compact: "compact";
     readonly Spacious: "spacious";
 };
-/** Бренд. Класс `sn-brandA` / `sn-brandB` / `sn-brandC` / `sn-brandD` / `sn-brandE`. */
+/** Бренд. Класс `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-main` / `sn-alter` … */
 export declare const BRAND_ROLE: {

package/dist/cjs/constants/appearance.js

@@ -9,13 +9,14 @@ exports.DENSITY = {
     Compact: 'compact',
     Spacious: 'spacious',
 };
-/** Бренд. Класс `sn-brandA` / `sn-brandB` / `sn-brandC` / `sn-brandD` / `sn-brandE`. */
+/** Бренд. Класс `sn-brandA` / `sn-brandB` / `sn-brandC` / `sn-brandD` / `sn-brandE` / `sn-brandF`. */
 exports.BRAND = {
     A: 'brandA',
     B: 'brandB',
     C: 'brandC',
     D: 'brandD',
     E: 'brandE',
+    F: 'brandF',
 };
 /** Роль бренда (палитра). Класс `sn-main` / `sn-alter` … */
 exports.BRAND_ROLE = {

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

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

package/dist/cjs/hooks/useApplyCustomTheme.js

@@ -6,7 +6,7 @@ const customTheme_1 = require("../utils/customTheme");
 const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
 /**
  * Применяет кастомный бренд-цвет: генерирует из `color` бренд-палитру и инжектит `<style>`,
- * переопределяющий её на бренд-классах (`.sn-brandA/B/C/D/E`), а не inline на одном элементе — поэтому
+ * переопределяющий её на бренд-классах (`.sn-brandA/B/C/D/E/F`), а не inline на одном элементе — поэтому
  * цвет переживает переэмиты `sn-*` вложенными компонентами и доходит до порталов. Семантический слой
  * каскадит из палитры, красятся обе схемы.
  *

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

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildBrandPaletteCss = buildBrandPaletteCss;
 const appearance_1 = require("../../constants/appearance");
 const buildBrandPaletteVars_1 = require("./buildBrandPaletteVars");
-// Правило нацелено на сами бренд-классы (`.sn-brandA/B/C/D/E`), а не на один элемент inline: компоненты,
+// Правило нацелено на сами бренд-классы (`.sn-brandA/B/C/D/E/F`), а не на один элемент inline: компоненты,
 // переэмитящие набор `sn-*` на своих обёртках (Table/Stepper/Alert через `useThemeClassnames`), заново
 // объявляют `--sn-brand-color-primary-*` из класса бренда — inline на предке они перекрыли бы, правило
 // на том же бренд-классе — нет.
 // Один seed переопределяет сразу все бренд-классы (потребитель не знает, в какой бренд-слот завернётся
-// его поддерево). TODO FF-8813: возможность задавать seed индивидуально для каждого бренда (brandA/B/C/D/E).
+// его поддерево). TODO FF-8813: возможность задавать seed индивидуально для каждого бренда (brandA/B/C/D/E/F).
 const BRAND_CLASS_SELECTOR = `:is(${Object.values(appearance_1.BRAND)
     .map(brand => `.sn-${brand}`)
     .join(',')})`;

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

@@ -4,13 +4,14 @@ export declare const DENSITY: {
     readonly Compact: "compact";
     readonly Spacious: "spacious";
 };
-/** Бренд. Класс `sn-brandA` / `sn-brandB` / `sn-brandC` / `sn-brandD` / `sn-brandE`. */
+/** Бренд. Класс `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-main` / `sn-alter` … */
 export declare const BRAND_ROLE: {

package/dist/esm/constants/appearance.js

@@ -6,13 +6,14 @@ export const DENSITY = {
     Compact: 'compact',
     Spacious: 'spacious',
 };
-/** Бренд. Класс `sn-brandA` / `sn-brandB` / `sn-brandC` / `sn-brandD` / `sn-brandE`. */
+/** Бренд. Класс `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-main` / `sn-alter` … */
 export const BRAND_ROLE = {

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

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

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

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