@momoi-labs/kiso 0.4.1 → 0.5.0
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.
|
@@ -36,6 +36,7 @@ token consumption, and a Radix/shadcn behavioral reference where one exists.
|
|
|
36
36
|
|
|
37
37
|
## Navigation and structure
|
|
38
38
|
|
|
39
|
+
- [BrandMark](brand-mark.md): Decorative letter or icon beside a product name.
|
|
39
40
|
- [Breadcrumb](breadcrumb.md) — Shows the current location within a hierarchy.
|
|
40
41
|
- [Header](header.md) — Composes persistent application navigation and global actions.
|
|
41
42
|
- [Navigation](navigation.md) — Provides a generic semantic container for destination links.
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# BrandMark
|
|
2
|
+
|
|
3
|
+
## Purpose
|
|
4
|
+
|
|
5
|
+
BrandMark is the small rounded square next to a product name in a sidebar or
|
|
6
|
+
login header. It holds a letter or a single inline SVG. The self-host console
|
|
7
|
+
uses the momoi-labs terminal prompt logo, as shown in
|
|
8
|
+
[self-host PR #48](https://github.com/momoi-labs/self-host/pull/48).
|
|
9
|
+
|
|
10
|
+
## Anatomy and variants
|
|
11
|
+
|
|
12
|
+
- A decorative `span` with the existing `.brand-mark` class.
|
|
13
|
+
- Letter content, such as "S", keeps the class's font weight and font size.
|
|
14
|
+
- Icon content uses `.icon.icon-sm`. The icon inherits `currentColor`, has no
|
|
15
|
+
fill, and uses a 1.75 stroke width with round caps and joins.
|
|
16
|
+
- The adjacent product name supplies the accessible name.
|
|
17
|
+
|
|
18
|
+
In React, pass either content through `children`, as with Button and Badge.
|
|
19
|
+
BrandMark adds the icon classes to an element child without an extra wrapper.
|
|
20
|
+
Custom icon components must forward `className` to their inline SVG.
|
|
21
|
+
|
|
22
|
+
`TerminalIcon` supplies the momoi-labs `>_` glyph on a 16 by 16 viewBox. Its
|
|
23
|
+
paths are `M4 4.5L8 8l-4 3.5` and `M9.5 11.5H13`.
|
|
24
|
+
|
|
25
|
+
## States and accessibility
|
|
26
|
+
|
|
27
|
+
BrandMark is static and always has `aria-hidden="true"`, including when a
|
|
28
|
+
consumer passes a different value. Keep the product name visible beside it.
|
|
29
|
+
Do not put interactive or focusable content inside the mark. If the brand
|
|
30
|
+
navigates, wrap the mark and product name together in a Link.
|
|
31
|
+
|
|
32
|
+
## Token consumption
|
|
33
|
+
|
|
34
|
+
The existing `.brand-mark` CSS remains unchanged. Grid placement centers the
|
|
35
|
+
content; `--size-control-sm` sets both dimensions and `--radius-lg` rounds the
|
|
36
|
+
corners. The background uses `--color-primary` and the foreground uses
|
|
37
|
+
`--color-primary-foreground`. Letter typography uses `--type-weight-bold` and
|
|
38
|
+
`--type-size-label`; icon dimensions use `--size-icon-sm`.
|
|
39
|
+
|
|
40
|
+
## Radix/shadcn mapping
|
|
41
|
+
|
|
42
|
+
There is no dedicated behavioral primitive. The React implementation uses
|
|
43
|
+
Radix Slot to merge icon classes onto the child SVG.
|