Logos KitUI kit
The wallet's look (Tray) as QML components for Basecamp apps.
sdk/qml/LogosKitUi/ sits next to LogosKit/ and gives your app the same
look as the wallet. It's optional.
import "LogosKitUi"
Card {
ColumnLayout {
Txt { text: "Balance"; tone: "text2" }
Txt { text: kit.sdk.formatUnits(amount, 9) + " LGO"; font.pixelSize: 24; num: true }
Btn { text: "Send"; tone: "ink"; large: true; busy: sending; onClicked: send() }
}
}| Component | Notes |
|---|---|
Theme | Singleton: colours, radii, the bundled Onest font, motion. Theme.dark switches palettes. |
Txt | Text, plain by default (other people's text never renders as rich text). tone, num, mono. |
Btn | Pill button: ink, action, private, neutral, ghost, danger; busy, large, armDelay. |
Card, InfoRow | Surfaces and label/value rows. |
Notice, Tag | Inline notes (info, warn, danger, private) and status tags. |
Field, TextBox | Inputs. TextBox.maxBytes counts UTF-8 bytes, like on-chain limits do. |
Spinner, Skeleton | Pending and loading states. |
Identicon, LogosMark, Glyph | Account avatars, the official Logos mark, a few line glyphs. |
Loading, pending, empty and error states are part of the design: every screen in the testimonial and faucet apps has one, built from these.
The same tokens outside QML
The Tray colours, radii and type scale also ship as a package, for web pages, tools and anything else that should match the wallet:
@logos-kit/themev0.1.1
npm i @logos-kit/themeimport { cssVars, themes } from '@logos-kit/theme'
const vars = cssVars(themes.dark) // CSS custom properties