@tempoxyz/ds 0.3.10 → 0.3.13

package/dist/docs/product/components/code.md

@@ -0,0 +1,100 @@
+# Code
+
+Sets a command, identifier, or value apart inside a sentence.
+
+[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Code.tsx)
+
+Figma: [Inline code](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=3066-455)
+
+## Overview
+
+Code renders inline code in a native `<code>` element, in the mono type on a regular fill. It flows and wraps with the text around it.
+
+## Examples
+
+### Basic
+
+```tsx
+import { Code, style } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <p {...styles.text()}>
+      Run <Code>pnpm check</Code> before you push.
+    </p>
+  )
+}
+
+namespace styles {
+  export const text = style({ color: 'content.primary', margin: '0', typography: 'body.b2' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Code/Basic.tsx)
+
+## Anatomy
+
+Import the component and assemble its parts.
+
+```tsx
+import { Code } from '@tempoxyz/ds'
+
+<Code />
+```
+
+## Guidelines
+
+### When to Use
+
+* Name a command, a file, a function, or a value inside a sentence, such as a token symbol.
+
+### When Not to Use
+
+* Use a [Snippet](snippet.md) for a command that people copy or a block of code.
+* Use [Kbd](kbd.md) for keys and shortcuts.
+* Use a [Badge](badge.md) for a status or an attribute.
+
+### Keep Code Short
+
+**Do:** Name one command or identifier inside the sentence.
+
+```tsx
+<span>
+  Run <Code>pnpm check</Code> before you push.
+</span>
+```
+
+**Don't:** Put a whole script inline. Use a Snippet instead.
+
+```tsx
+<span>
+  <Code>pnpm install && pnpm build && pnpm check && pnpm test</Code>
+</span>
+```
+
+### Use Code Only for Literal Text
+
+* **Literal (code):** Text that people type or read in code, exactly as it appears there.
+* **Keys (kbd):** Keys that people press. Use Kbd, which names modifiers per platform.
+
+## Content
+
+* Write the code exactly as people type it, in its own case and spelling.
+* Leave punctuation of the sentence outside the code.
+
+## Accessibility
+
+Code renders a native `<code>` element, which screen readers read as part of the sentence.
+
+* **Root (code):** Reads its text in place, without a role or a change in voice.
+* **Contrast (4.5:1):** Renders primary text on the regular fill, above 4.5:1 in both color schemes.
+
+## Related
+
+[Snippet](snippet.md)
+
+Use for commands that people copy.
+
+[Kbd](kbd.md)
+
+Use for keys and shortcuts.