Material 3 · dark · volt _src/tokens.py
--md-ref-palette-primary91--md-sys-color-primary--md-comp-filled-button-container-colorsite/_src/tokens.pyЗмінити токенpython3 site/_src/build.pyЗібрати → assets/css/tokens.css + ця сторінкаsite.cssКомпоненти беруть лише md-comp / md-sysui.jsВласні компоненти замість нативних0%8%10%12%16%primary91 · #CBF45EГоловна дія, акцентneutral4 · #08100DТекст на primaryprimary22 · #2A3A00Вибранеprimary96 · #E3FF92Текст на вибраномуsecondary80 · #55D8E7Дані, наживоsecondary20 · #00363CТекст на secondarysecondary22 · #003B41Інформаціяsecondary93 · #B3F6FFТекст на інформаціїtertiary77 · #E9B65EУвага, демоneutral4 · #08100DТекст на tertiaryerror70 · #FF8A7AПомилкаerror10 · #3C0800Текст на помилціerror15 · #550000Тло помилкиneutral4 · #08100DСторінкаneutral3 · #050D09Найнижчеneutral7 · #121715Панелі, карткиneutral11 · #1A1F1DБлоки в панеліneutral15 · #222725Меню, вибранеneutral19 · #2A2F2DДіалогиneutral94 · #E9EFEDОсновний текстneutral-variant65 · #94A19BДругорядний текстneutral-variant56 · #7D8983Підписи, межі при наведенніneutral-variant18 · #242E2AМежіneutral-variant12 · #17221DТонкі розділювачіcharge57 · #1396ABЗарядdischarge62 · #7EA22EРозряд#C9F25C#57D9E8#E7B45C#FF8A7A#121715#93A09A#1A99AE#80A430Накопичувачі енергії
Гібридний інвертор і батарея LiFePO₄ 51,2 В тримають дім 8–12 годин. Монтаж за один день, гарантія 10 років.
Моноблок · у наявності
Моноблок 10 кВт·год 128 400 ₴display-large
sans · 700 · 46px–104px / .94Енергія
display-medium
sans · 700 · 40px–84px / .96Резерв 24/7
display-small
sans · 700 · 32px–62px / 1Каталог обладнання
headline-large
sans · 700 · 28px–44px / 1.05Як це працює
headline-medium
sans · 700 · 26px / 1.15Ваша система
headline-small
sans · 600 · 22px / 1.25Перевірка до постачання
title-large
sans · 600 · 19px / 1.3Резерв на 8 годин
title-medium
sans · 600 · 16px / 1.4Моноблок 10 кВт·год
title-small
sans · 600 · 14px / 1.35Гарантія 10 років
body-large
sans · 300 · 17px / 1.6Ціни з ПДВ і наявність.
body-medium
sans · 400 · 14.5px / 1.5Гібридний інвертор, батарея 51,2 В.
body-small
sans · 400 · 13px / 1.5Доставка по Україні за 2–5 днів.
label-large
sans · 600 · 15px / 1Підібрати систему
label-medium
sans · 500 · 13.5px / 1.2Більша ємність
label-small
sans · 500 · 11.5px / 1.3Оновлено сьогодні
overline
mono · 500 · 11.5px / 1.2НАЯВНІСТЬ · 12 ШТ
mono-medium
mono · 500 · 13px / 1.451,2 В · 314 А·год
mono-small
mono · 400 · 11.5px / 1.3500:00 · 06:00 · 12:00 · 18:00
number
mono · 500 · 28px / 1.1128 400 ₴ · 15,36 kWh
number-small
mono · 600 · 20px / 1.158,4 год
610121822∞surfaceСторінкаsurface-container-lowПанельsurface-container-highМенюsurface-container-highestДіалогeasing-standard.2,0,0,1easing-emphasized-decelerate.05,.7,.1,1easing-emphasized-accelerate.3,0,.8,.15duration-short150 msduration-medium250 msduration-long450 ms.btn.btn--volt| Токен компонента | Береться з | Значення |
|---|---|---|
--md-comp-filled-button-container-color | --md-sys-color-primary | primary91 · #CBF45E |
--md-comp-filled-button-label-text-color | --md-sys-color-on-primary | neutral4 · #08100D |
--md-comp-filled-button-container-height | 54px | |
--md-comp-filled-button-container-height-small | 42px | |
--md-comp-filled-button-container-shape-small | 11px | |
--md-comp-filled-button-container-shape | 14px | |
--md-comp-filled-button-label-text-font | --md-sys-typescale-label-large | |
.btn.btn--ghost| Токен компонента | Береться з | Значення |
|---|---|---|
--md-comp-outlined-button-outline-color | --md-sys-color-outline-variant | neutral-variant18 · #242E2A |
--md-comp-outlined-button-hover-outline-color | --md-sys-color-on-surface-variant | neutral-variant65 · #94A19B |
--md-comp-outlined-button-label-text-color | --md-sys-color-on-surface | neutral94 · #E9EFED |
--md-comp-outlined-button-container-shape | 14px | |
.icon-btn| Токен компонента | Береться з | Значення |
|---|---|---|
--md-comp-icon-button-container-color | --md-sys-color-surface-container-high | neutral15 · #222725 |
--md-comp-icon-button-icon-color | --md-sys-color-on-surface | neutral94 · #E9EFED |
--md-comp-icon-button-container-size | 38px | |
--md-comp-icon-button-container-shape | 11px | |
.chip[aria-pressed]| Токен компонента | Береться з | Значення |
|---|---|---|
--md-comp-filter-chip-outline-color | --md-sys-color-outline-variant | neutral-variant18 · #242E2A |
--md-comp-filter-chip-label-text-color | --md-sys-color-on-surface-variant | neutral-variant65 · #94A19B |
--md-comp-filter-chip-selected-container-color | --md-sys-color-primary | primary91 · #CBF45E |
--md-comp-filter-chip-selected-label-text-color | --md-sys-color-on-primary | neutral4 · #08100D |
--md-comp-filter-chip-container-height | 36px | |
--md-comp-filter-chip-container-shape | --md-sys-shape-corner-full | |
.seg| Токен компонента | Береться з | Значення |
|---|---|---|
--md-comp-segmented-button-container-color | --md-sys-color-surface | neutral4 · #08100D |
--md-comp-segmented-button-outline-color | --md-sys-color-outline-faint | neutral-variant12 · #17221D |
--md-comp-segmented-button-selected-container-color | --md-sys-color-surface-container-high | neutral15 · #222725 |
--md-comp-segmented-button-selected-outline-color | --md-sys-color-primary | primary91 · #CBF45E |
--md-comp-segmented-button-label-text-color | --md-sys-color-on-surface-variant | neutral-variant65 · #94A19B |
--md-comp-segmented-button-container-shape | --md-sys-shape-corner-medium | |
.input · .textarea| Токен компонента | Береться з | Значення |
|---|---|---|
--md-comp-text-field-container-color | --md-sys-color-surface | neutral4 · #08100D |
--md-comp-text-field-outline-color | --md-sys-color-outline-variant | neutral-variant18 · #242E2A |
--md-comp-text-field-focus-outline-color | --md-sys-color-primary | primary91 · #CBF45E |
--md-comp-text-field-input-text-color | --md-sys-color-on-surface | neutral94 · #E9EFED |
--md-comp-text-field-placeholder-color | --md-sys-color-outline | neutral-variant56 · #7D8983 |
--md-comp-text-field-container-height | 48px | |
--md-comp-text-field-container-shape | --md-sys-shape-corner-medium | |
.select > select → ui.js| Токен компонента | Береться з | Значення |
|---|---|---|
--md-comp-menu-container-color | --md-sys-color-surface-container-high | neutral15 · #222725 |
--md-comp-menu-container-elevation | --md-sys-elevation-2 | |
--md-comp-menu-container-shape | --md-sys-shape-corner-large | |
--md-comp-menu-item-height | 44px | |
--md-comp-menu-item-shape | --md-sys-shape-corner-small | |
--md-comp-menu-selected-item-container-color | --md-sys-color-primary-container | primary22 · #2A3A00 |
--md-comp-menu-selected-item-label-text-color | --md-sys-color-on-primary-container | primary96 · #E3FF92 |
--md-comp-menu-item-label-text-font | --md-sys-typescale-label-medium | |
input[type=range]| Токен компонента | Береться з | Значення |
|---|---|---|
--md-comp-slider-active-track-color | --md-sys-color-primary | primary91 · #CBF45E |
--md-comp-slider-inactive-track-color | --md-sys-color-outline-variant | neutral-variant18 · #242E2A |
--md-comp-slider-handle-color | --md-sys-color-primary | primary91 · #CBF45E |
--md-comp-slider-track-height | 4px | |
--md-comp-slider-handle-size | 18px | |
.stock · .badge · .demo · .pill