@tempoxyz/ds 0.3.10 → 0.3.13

package/dist/docs/product/components/tempo-logo.md

@@ -0,0 +1,185 @@
+# TempoLogo
+
+Shows the Tempo brand logo.
+
+[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/TempoLogo.tsx)
+
+Figma: [Elements/Tempo Logo](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-3014)
+
+## Overview
+
+A Tempo logo renders the brand artwork as a 20px tall inline SVG in the current text color. The wordmark spells Tempo, and the mark draws the T alone.
+
+## Examples
+
+### Basic
+
+```tsx
+import { TempoLogo } from '@tempoxyz/ds'
+
+export function Demo() {
+  return <TempoLogo aria-label="Tempo" />
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/TempoLogo/Basic.tsx)
+
+### Type
+
+Set `type` to `wordmark` (default) or `mark`.
+
+```tsx
+import { style, TempoLogo } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <div {...styles.row()}>
+      <TempoLogo aria-label="Tempo" type="mark" />
+      <TempoLogo aria-label="Tempo" type="wordmark" />
+    </div>
+  )
+}
+
+namespace styles {
+  export const row = style({ alignItems: 'center', display: 'flex', gap: '24' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/TempoLogo/Type.tsx)
+
+### Color
+
+The logo paints in `currentColor`, so the text color around it sets its color, such as white on a dark tile.
+
+```tsx
+import { style, TempoLogo } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <div {...styles.row()}>
+      <span {...styles.tile()}>
+        <TempoLogo aria-label="Tempo" type="mark" />
+      </span>
+      <span {...styles.inverse()}>
+        <TempoLogo aria-label="Tempo" type="mark" />
+      </span>
+    </div>
+  )
+}
+
+namespace styles {
+  export const inverse = style({
+    alignItems: 'center',
+    backgroundColor: 'content.primary',
+    borderRadius: '2xs',
+    color: 'background.elevated',
+    display: 'flex',
+    height: '36',
+    justifyContent: 'center',
+    width: '36',
+  })
+
+  export const row = style({ alignItems: 'center', display: 'flex', gap: '12' })
+
+  export const tile = style({
+    alignItems: 'center',
+    backgroundColor: 'container.regular',
+    borderRadius: '2xs',
+    color: 'content.primary',
+    display: 'flex',
+    height: '36',
+    justifyContent: 'center',
+    width: '36',
+  })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/TempoLogo/Color.tsx)
+
+## Anatomy
+
+Import the component and assemble its parts.
+
+```tsx
+import { TempoLogo } from '@tempoxyz/ds'
+
+<TempoLogo />
+```
+
+## Guidelines
+
+### When to Use
+
+* Introduce the brand at the top of a page or a sidebar.
+* Link to the home page of a Tempo app.
+
+### When Not to Use
+
+* Use [NetworkLogo](network-logo.md) for the Tempo network beside a token or an address.
+* Use [TokenLogo](token-logo.md) for a token.
+
+### Match the Type to the Space
+
+* **Wordmark (90×20px):** Where the brand is introduced, such as the header of a page.
+* **Mark (19×20px):** Where space is tight, such as a sidebar tile.
+
+### Keep the Brand Colors
+
+**Do:** Draw the logo in the primary content color, or in white on a dark tile.
+
+```tsx
+import { style, TempoLogo } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <a aria-label="Tempo home" href="#home" {...styles.link()}>
+      <TempoLogo />
+    </a>
+  )
+}
+
+namespace styles {
+  export const link = style({ color: 'content.primary', display: 'inline-flex' })
+}
+```
+
+**Don't:** Paint the logo in an accent color.
+
+```tsx
+import { style, TempoLogo } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <span {...styles.accent()}>
+      <TempoLogo aria-label="Tempo" />
+    </span>
+  )
+}
+
+namespace styles {
+  export const accent = style({ color: 'accent.blue.background', display: 'inline-flex' })
+}
+```
+
+## Accessibility
+
+A Tempo logo renders an `<svg>` that is hidden from screen readers by default. It is not interactive and takes no focus.
+
+### Semantics
+
+* **Root (aria-hidden):** Hidden from screen readers, so the visible name beside it is read once.
+* **Named Logo (aria-label):** An `aria-label` gives the logo the `img` role, so screen readers announce it.
+
+### Your Responsibilities
+
+* **Name a Logo Link (aria-label):** If a link holds only the logo, name the link, such as `aria-label="Tempo home"`.
+
+## Related
+
+[NetworkLogo](network-logo.md)
+
+Use for network logos.
+
+[SidebarMenu](sidebar-menu.md)
+
+Use for the app sidebar that holds the logo.