Оформлення віджета: CSS-токени й частини
Для розробників, у коді: токени теми --sa-*, три шари, що їх задають, ::part() для всього іншого, власний CSS і змінні орба, які можна чіпати з CSS сторінки.
Вигляд віджета визначають CSS-змінні на його хост-елементі. Три шари живлять ті самі змінні, і
пріоритет простий: CSS вашої сторінки на #sa-widget > ShukaiConfig.theme сторінки > тема
власника в панелі > вбудовані значення. ShukaiConfig.theme сторінки, якщо задана, замінює тему
власника цілком, а не по одному токену (Конфігурація). Панель —
зручний інтерфейс до того, що ви могли б задати і в CSS.
У панелі: кольори — Віджет → Вигляд → Бренд і кольори (налаштування віджета). Ця сторінка — те саме в CSS і коді.
#sa-widget {
--sa-primary: #e11d48;
--sa-launcher-radius: 16px;
--sa-font: "Inter", sans-serif;
}Задавайте змінні на #sa-widget, а не на :root: all: initial хоста не скидає
користувацьких властивостей, але змінні частин орба за замовчуванням initial і читаються лише з
хоста.
Токени теми
| Група | Токен | За замовчуванням | Що стилізує |
|---|---|---|---|
| палітра | primary |
#4f46e5 |
колір бренду |
on-primary |
#ffffff |
текст на основному кольорі; якщо задати primary без нього, віджет обирає читабельний за яскравістю |
|
accent |
var(--sa-primary) |
другорядна роль (чіпи, підсвічування) | |
on-accent |
var(--sa-on-primary) |
текст на акценті; автоконтраст, як в on-primary |
|
surface |
#ffffff |
бульбашки, картка, поле вводу | |
text |
#1a1a1a |
основний текст | |
| типографіка | font |
-apple-system, Segoe UI, Roboto, sans-serif |
базова гарнітура — підключіть @font-face на сторінці, і вона видима всередині shadow root |
font-size |
16px |
базовий розмір | |
font-button |
var(--sa-font) |
кнопки | |
button-font-size |
13px |
кнопки | |
font-teaser |
var(--sa-font) |
бульбашка-тизер | |
teaser-font-size |
14px |
бульбашка-тизер | |
| кнопка запуску | launcher-bg |
initial (білий) |
заливка кнопки із зображенням |
launcher-color |
initial (--sa-text) |
колір підпису кнопки | |
launcher-size |
56px |
кнопка | |
launcher-radius |
50% |
кути кнопки — одна довжина чи відсоток; два значення або голе число роблять підписану «пігулку» квадратною | |
launcher-icon-size |
24px |
іконка | |
launcher-image-pad |
8px |
відступ навколо зображення | |
launcher-shadow |
0 4px 12px rgba(0,0,0,.2) |
тінь контейнера elevated | |
| форми | bubble-radius |
14px |
бульбашки повідомлень |
chip-radius |
16px |
FAQ-чіпи і чіпи підказок | |
| тизер | teaser-bg |
#ffffff |
привітальна бульбашка |
teaser-color |
#1a1a1a |
її текст | |
teaser-radius |
14px |
її кути |
У ShukaiConfig.theme і в панелі токен пишеться без префікса ({ "launcher-radius": "16px" });
невідомі токени ігноруються, а значення відхиляється, якщо містить ;, {, }, <, >,
зворотний слеш, url(, expression, javascript: чи @import або довше за 200 символів. CSS
сторінки такого обмеження не має — це ваша сторінка.
Змінні орба
Колір тіла орба — voiceOrbColor (або основний), намальований через виведену палітру для
кожного стану. CSS сторінки може задавати, окрім токенів теми:
--sa-orb-<стан>і--sa-orb-<стан>-inkдля дванадцяти станів (idle,listening,thinking,speaking,dormant,acting,consent,happy,confused,muted,offline,raised);- частини персонажа,
--sa-orb-<персонаж>-<частина>(Кнопка запуску і персонажі); Robot 2.0 зберігає старі назви--sa-orb-face,--sa-orb-eye,--sa-orb-mouth; --sa-orb-mark— колір значка?/!і піднятої руки; лише з CSS сторінки, не токен теми.
Ніколи не задавайте змінні *-auto: автоконтраст обчислюється раз при монтуванні з кольорів із
сервера. Якщо перевизначаєте візор чи очі з CSS сторінки, задайте обидва — автоматично підібрана
пара не перераховується для кольору, якого JavaScript не бачить.
::part() для всього, до чого токени не дістають
Кожна частина інтерфейсу віджета має ім’я part, тож сторінка може перестилізувати її звичайним
способом. Правило ::part() сторінки перемагає будь-яке звичайне оголошення всередині shadow root.
#sa-widget::part(companion-bubble) {
box-shadow: none;
}
#sa-widget::part(nav-suggestion) {
border-radius: 4px;
}| Компонент | Частини |
|---|---|
| кнопка запуску й тизер | launcher, teaser-group, teaser, teaser-faqs, teaser-faq |
| компаньйон (док і колонка) | companion, companion-dock, companion-aura, companion-mic, companion-stop, companion-dictation, companion-conversation, companion-contact, companion-close, companion-status, companion-ai-label, companion-hint, companion-consent, companion-more, companion-faqs, companion-faq, companion-language, companion-language-popover |
| бульбашки | companion-bubbles, companion-bubble, companion-bubble-body, companion-bubble-stub, companion-bubble-dismiss |
| картка відповіді | companion-card, companion-card-header, companion-card-log, companion-card-list, companion-card-list-header, companion-card-list-close, companion-card-new, companion-card-history, companion-card-close, companion-card-back |
| потік, історія, передача | companion-stream, companion-history, companion-history-row, companion-history-remove, companion-handoff |
| поле вводу | companion-composer, companion-composer-input, companion-send |
| частини відповіді | nav-suggestions, nav-suggestion, confirm-chips, confirm-accept, confirm-decline, handoff-button, handoff-form, handoff-dismiss, handoff-contact, handoff-comment, handoff-send, handoff-receipt |
| вибір мови | language-chip, language-popover |
Один виняток: на сенсорних пристроях віджет примусово ставить своїм полям 16 px з !important
(щоб iOS не масштабував при фокусі), тож ::part(companion-composer-input) { font-size: 14px }
там програє.
Власний CSS із панелі
Widget.custom_css задається лише через API керування — у панелі поля для нього немає — і
додається останнім усередині shadow root, тож перемагає власні правила віджета за рівних умов.
Він ніколи не торкається сторінки-хоста. Дві речі про нього: правило ::part() сторінки все одно
перемагає, а правила відступів для напрямку справа наліво специфічніші за простий селектор, тож
.sa-bubble { padding: … } ігнорується для арабських та івритських відвідувачів, якщо не написано
як .root[data-dir="rtl"] .sa-bubble (Мови і RTL).