@pgcorp/ui-kit 0.7.0 → 0.7.1
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.
- package/README.md +18 -0
- package/docs/theming.md +58 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -255,6 +255,24 @@ Components consume semantic custom properties. Consumers override documented
|
|
|
255
255
|
tokens on the root theme container and do not depend on internal CSS classes or
|
|
256
256
|
template structure.
|
|
257
257
|
|
|
258
|
+
Floating surfaces teleport to `document.body`. If the host application uses an
|
|
259
|
+
overlay scale above the UI-kit defaults, align the public layer tokens on
|
|
260
|
+
`:root`, preserving `--s-layer-floating < --s-layer-toast <
|
|
261
|
+
--s-layer-overlay-backdrop`:
|
|
262
|
+
|
|
263
|
+
```css
|
|
264
|
+
:root {
|
|
265
|
+
--host-overlay-surface: 2400;
|
|
266
|
+
--s-layer-floating: calc(var(--host-overlay-surface) + 10);
|
|
267
|
+
--s-layer-toast: calc(var(--host-overlay-surface) + 20);
|
|
268
|
+
--s-layer-overlay-backdrop: calc(var(--host-overlay-surface) + 100);
|
|
269
|
+
}
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
`--host-overlay-surface` belongs to the host application. The complete layer
|
|
273
|
+
integration contract and verification checklist are published in
|
|
274
|
+
`docs/theming.md` inside the npm package.
|
|
275
|
+
|
|
258
276
|
## Публичный контракт / Public contract
|
|
259
277
|
|
|
260
278
|
`package.json#exports` — источник истины для импортов. Публичный контракт
|
package/docs/theming.md
CHANGED
|
@@ -17,6 +17,35 @@ applyThemeIdToDocument(document, 'classic-light')
|
|
|
17
17
|
theme-контейнере. Не стилизуйте внутренний DOM компонентов через `:deep`,
|
|
18
18
|
private selectors или зависимость от структуры template.
|
|
19
19
|
|
|
20
|
+
### Интеграция шкалы слоёв host-приложения
|
|
21
|
+
|
|
22
|
+
Floating surfaces (`STooltip`, меню, select и popover) телепортируются в
|
|
23
|
+
`document.body`, поэтому их layer tokens разрешаются в корневом scope документа,
|
|
24
|
+
а не во вложенном контейнере компонента. Базовая шкала UI-kit сохраняет порядок
|
|
25
|
+
`floating < toast < overlay-backdrop`:
|
|
26
|
+
|
|
27
|
+
- `--s-layer-floating: 40` — tooltip, menu, select и popover;
|
|
28
|
+
- `--s-layer-toast: 50` — уведомления;
|
|
29
|
+
- `--s-layer-overlay-backdrop: 11000` — backdrop первого modal/drawer;
|
|
30
|
+
- `--s-layer-overlay-surface` вычисляется из backdrop и surface offset.
|
|
31
|
+
|
|
32
|
+
Если host-приложение использует другую систему overlay-слоёв, задайте UI-kit
|
|
33
|
+
tokens на `:root` относительно наибольшего top-level слоя host. Не меняйте
|
|
34
|
+
`z-index` внутренних элементов компонентов и не привязывайтесь к их CSS-классам.
|
|
35
|
+
|
|
36
|
+
```css
|
|
37
|
+
:root {
|
|
38
|
+
--host-overlay-surface: 2400;
|
|
39
|
+
--s-layer-floating: calc(var(--host-overlay-surface) + 10);
|
|
40
|
+
--s-layer-toast: calc(var(--host-overlay-surface) + 20);
|
|
41
|
+
--s-layer-overlay-backdrop: calc(var(--host-overlay-surface) + 100);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Значение `--host-overlay-surface` в примере является контрактом host-приложения,
|
|
46
|
+
а не фиксированным значением UI-kit. После интеграции проверьте tooltip/menu,
|
|
47
|
+
toast и modal/drawer внутри и снаружи host overlay.
|
|
48
|
+
|
|
20
49
|
## English
|
|
21
50
|
|
|
22
51
|
`tokens.css` contains primitive and semantic tokens. `style.css` includes tokens,
|
|
@@ -33,3 +62,32 @@ applyThemeIdToDocument(document, 'classic-light')
|
|
|
33
62
|
Override documented CSS custom properties on the root theme container only. Do
|
|
34
63
|
not style component internals through `:deep`, private selectors, or template
|
|
35
64
|
structure dependencies.
|
|
65
|
+
|
|
66
|
+
### Host application layer-scale integration
|
|
67
|
+
|
|
68
|
+
Floating surfaces (`STooltip`, menus, selects, and popovers) teleport to
|
|
69
|
+
`document.body`. Their layer tokens therefore resolve in the document root scope,
|
|
70
|
+
not in a nested component container. The default UI-kit scale preserves
|
|
71
|
+
`floating < toast < overlay-backdrop`:
|
|
72
|
+
|
|
73
|
+
- `--s-layer-floating: 40` — tooltips, menus, selects, and popovers;
|
|
74
|
+
- `--s-layer-toast: 50` — notifications;
|
|
75
|
+
- `--s-layer-overlay-backdrop: 11000` — the first modal/drawer backdrop;
|
|
76
|
+
- `--s-layer-overlay-surface` is derived from the backdrop and surface offset.
|
|
77
|
+
|
|
78
|
+
When the host application uses another overlay scale, define the UI-kit tokens
|
|
79
|
+
on `:root` relative to the highest top-level host layer. Do not change component
|
|
80
|
+
internal `z-index` values or depend on internal CSS classes.
|
|
81
|
+
|
|
82
|
+
```css
|
|
83
|
+
:root {
|
|
84
|
+
--host-overlay-surface: 2400;
|
|
85
|
+
--s-layer-floating: calc(var(--host-overlay-surface) + 10);
|
|
86
|
+
--s-layer-toast: calc(var(--host-overlay-surface) + 20);
|
|
87
|
+
--s-layer-overlay-backdrop: calc(var(--host-overlay-surface) + 100);
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
The `--host-overlay-surface` value is a host-application contract, not a fixed
|
|
92
|
+
UI-kit value. Verify tooltip/menu, toast, and modal/drawer behavior both inside
|
|
93
|
+
and outside host overlays after integration.
|