opui-css 5.4.3 → 6.0.0-rc.2

package/skills/opui/references/badge.md

@@ -0,0 +1,179 @@
+# Badge
+
+Badges attach a small count or status dot to another element.
+
+- CSS: `opui-css/css/components/badge.css` and `opui-css/css/components/anchor.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/badge.md), [Astro](https://open-props-ui.netlify.app/astro/components/badge.md), [React](https://open-props-ui.netlify.app/react/components/badge.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/badge.md), [Vue](https://open-props-ui.netlify.app/vue/components/badge.md).
+
+## Badge
+
+### Parts
+
+- `.ui-badge` (root): Container element.
+- `& > :first-child` (slot `default`): The element the badge is anchored to.
+- `.ui-indicator` (prop `label`, slot `indicator`): The indicator, inside `.ui-floating`. Holds `label`, the visible text with `hideLabel`, or only screen reader text with `dot`.
+
+### Props and modifiers
+
+- `color`: `"critical"` (`.ui-critical`), `"info"` (`.ui-info`), `"neutral"` (`.ui-neutral`), `"success"` (`.ui-success`), `"warning"` (`.ui-warning`). Optional colors.
+- `corner`: `"end-end"` (`.ui-end-end`), `"end-start"` (`.ui-end-start`), `"start-end"` (default), `"start-start"` (`.ui-start-start`). The corner the indicator sits on.
+- `dot`: `boolean`, `.ui-dot`. Renders the indicator as a dot. `label` stays as screen reader text, and the `indicator` slot isn't shown.
+- `hideLabel`: `boolean`, `.ui-indicator > span.ui-sr-only`. Hides `label` visually, for the whole sentence screen readers read, such as "5 unread messages". The `indicator` slot then holds the visible text and is hidden from screen readers.
+- `invisible`: `boolean`, `.ui-invisible`. Hides the indicator.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### badge.css
+
+- `--_border-width`: Border width of the indicator.
+- `--_dot-size`: Width and height of the indicator in `.ui-dot`.
+- `--_ease`: Easing of the indicator fade. Defaults to `--ui-ease-enter`.
+- `--_inset`: Distance of the indicator from the opposite edges. `100%` places it on the corner, round avatars move it onto the circle.
+- `--_motion`: Motion multiplier for the transitions. `0` turns them off.
+- `--_size`: Height and minimum width of the indicator.
+
+Outputs: `--_accent`, `--_bg-color`, `--_border-color`, `--_direction`, `--_duration`, `--_inset-block`, `--_inset-inline`, `--_shift-x`, `--_shift-y`, `--_sign-x`, `--_sign-y` and `--_text-color`.
+
+### anchor.css
+
+- `--_shift-x`: Horizontal shift of `.ui-floating`. Defaults to `0`.
+- `--_shift-y`: Vertical shift of `.ui-floating`. Defaults to `0`.
+
+## Theme tokens
+
+The stylesheets read `--ui-accent-fill-max-lightness`, `--ui-border-width-thick`, `--ui-critical`, `--ui-duration`, `--ui-ease-enter`, `--ui-font-size-caption`, `--ui-font-weight-medium`, `--ui-info`, `--ui-motion`, `--ui-neutral`, `--ui-on-fill`, `--ui-on-primary`, `--ui-on-warning`, `--ui-primary`, `--ui-radius-round`, `--ui-space-1`, `--ui-space-2`, `--ui-space-4`, `--ui-success` and `--ui-warning`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Basics
+
+```html
+<span class="ui-badge">
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+  >
+    <path
+      fill="currentColor"
+      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
+    ></path>
+  </svg>
+  <span class="ui-floating">
+    <span class="ui-indicator">
+      <span aria-hidden="true">5</span>
+      <span class="ui-sr-only">5 unread messages</span>
+    </span>
+  </span>
+</span>
+
+<span class="ui-badge ui-dot">
+  <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+  <span class="ui-floating">
+    <span class="ui-indicator">
+      <span class="ui-sr-only">New messages</span>
+    </span>
+  </span>
+</span>
+```
+
+## Astro
+
+`import { Badge } from "opui-css/astro"`
+
+- `Badge` named slots: `indicator`. Fill one with `slot="indicator"` on a child.
+
+### Example: Basics
+
+```astro
+---
+import { Badge } from "opui-css/astro"
+---
+
+<Badge hideLabel label="5 unread messages">
+  <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+  <Fragment slot="indicator">5</Fragment>
+</Badge>
+
+<Badge dot label="New messages">
+  <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+</Badge>
+```
+
+## React
+
+`import { Badge } from "opui-css/react"`
+
+- `Badge` slot props (`ReactNode`): `children` and `indicator`.
+
+### Example: Basics
+
+```tsx
+import { Badge } from "opui-css/react"
+
+export default function Basics() {
+  return (
+    <>
+      <Badge hideLabel indicator="5" label="5 unread messages">
+        <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+      </Badge>
+
+      <Badge dot label="New messages">
+        <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+      </Badge>
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { Badge } from "opui-css/svelte"`
+
+- `Badge` slot snippets: `children` and `indicator`.
+
+### Example: Basics
+
+```svelte
+<script lang="ts">
+  import { Badge } from "opui-css/svelte"
+</script>
+
+<Badge hideLabel label="5 unread messages">
+  <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+  {#snippet indicator()}5{/snippet}
+</Badge>
+
+<Badge dot label="New messages">
+  <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+</Badge>
+```
+
+## Vue
+
+`import { Badge } from "opui-css/vue"`
+
+- `Badge` named slots: `indicator`. Fill one with `<template #indicator>`.
+
+### Example: Basics
+
+```vue
+<script setup lang="ts">
+import { Badge } from "opui-css/vue"
+</script>
+
+<template>
+  <Badge hideLabel label="5 unread messages">
+    <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+    <template #indicator>5</template>
+  </Badge>
+
+  <Badge dot label="New messages">
+    <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+  </Badge>
+</template>
+```

package/skills/opui/references/button.md

@@ -0,0 +1,247 @@
+# Button
+
+Buttons allow users to take actions with a single tap.
+
+- CSS: `opui-css/css/components/button.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/button.md), [Astro](https://open-props-ui.netlify.app/astro/components/button.md), [React](https://open-props-ui.netlify.app/react/components/button.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/button.md), [Vue](https://open-props-ui.netlify.app/vue/components/button.md).
+
+## Button
+
+### Parts
+
+- `.ui-button` (root): Container element.
+- `<svg>`: An optional icon.
+- `<span class="ui-text">`: The label next to an icon. The CSS styles the `span`, and `.ui-text` is a hook for your own styles.
+- `<kbd>`: An optional keyboard hint.
+
+### Props and modifiers
+
+- `aria-label`: `string`. The accessible name, for a button without visible text. React and Svelte require it, or `aria-labelledby`, when there are no `children`.
+- `aria-labelledby`: `string`. The id of the element that names a button without visible text, instead of `aria-label`.
+- `as`: `"a" | "button"`, default `"button"`. The element to render. Defaults to `"a"` with `href`.
+- `color`: `"critical"` (`.ui-critical`), `"primary"` (`.ui-primary`). Optional colors.
+- `disabled`: `boolean`. Disables the button. A link button drops its `href` and gets `role="link"` and `aria-disabled="true"`.
+- `href`: `string`. The link to use. Renders an `<a>`.
+- `round`: `boolean`, `.ui-round`. Fully rounded corners, a circle when icon-only.
+- `size`: `"large"` (`.ui-large`), `"medium"` (default), `"small"` (`.ui-small`), `"x-small"` (`.ui-x-small`). The size of the element.
+- State (HTML): `current` (`[aria-current="page"]`), `disabled` (`[disabled]`), `disabledLink` (`a[aria-disabled="true"]`). Keeps the pressed background on a transparent (text) button link for the current page in navigation, or dims a disabled one. A link button, which can't take `disabled`, drops its `href` and takes `role="link"` and `aria-disabled="true"` instead.
+- `variant`: `"filled"` (`.ui-filled`), `"outlined"` (`.ui-outlined`), `"tonal"` (`.ui-tonal`), `"transparent"` (default). The variant to use.
+
+### Slots
+
+- `default`: The label and an optional icon.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### button.css
+
+- `--_accent`: The accent color. Fills, borders, text, hover and active states are derived from it. Defaults to `--ui-button-accent` when a theme sets it. `.ui-primary` and `.ui-critical` set it.
+- `--_accent-fill`: Fill of filled buttons, of hovered outlined buttons unless `--ui-button-hover` is `layer`, of hovered tonal ones when it is unset, and the base of the filled hover and pressed shades. `--ui-button-accent-filled` when a theme sets it, else `--_accent`, and in `.ui-critical` `--ui-critical` kept within `--ui-accent-fill-max-lightness`, so the light text stays readable while the border keeps `--ui-critical`. `.ui-primary` resets it to `--_accent`, so the token applies to default buttons only.
+- `--_accent-tonal`: Background of `.ui-tonal`. `--ui-surface-tonal`, a palette tint in `.ui-critical`, and `--ui-primary-tonal` or the tint in `.ui-primary`.
+- `--_border-width`: The border width.
+- `--_ease`: Easing of the transitions. Defaults to `--ui-ease`.
+- `--_end-end-radius`: The radius of the end-end corner. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the button joins the next control.
+- `--_end-start-radius`: The radius of the end-start corner. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the button joins another control.
+- `--_font-size`: The font size. Set by `.ui-x-small` and `.ui-small`.
+- `--_icon-size`: The size of a direct child `svg`. Icon-only buttons scale it with `--_size`.
+- `--_motion`: Motion multiplier for the transitions. `0` turns them off.
+- `--_on-accent`: Text color on a fill of `--_accent`. Defaults to `--ui-button-on-accent` when a theme sets it. `.ui-primary` sets `--ui-on-primary`, `.ui-critical` `--ui-on-fill`.
+- `--_on-accent-fill`: Text color on `--_accent-fill`: filled buttons, hovered outlined ones unless `--ui-button-hover` is `layer`, and hovered tonal ones when it is unset. `--ui-button-on-accent-filled` when a theme sets it, else `--_on-accent`.
+- `--_on-accent-tonal`: Text color of `.ui-tonal`.
+- `--_padding-inline`: The inline padding. Set by the size classes from `--ui-button-padding-inline` and its size variants.
+- `--_radius`: The corner radius. Defaults to `--ui-button-radius`, or `--ui-radius` when the theme doesn't set it. `.ui-round` makes it round.
+- `--_size`: The height, and the width of an icon-only button. Defaults to `--ui-button-size`, set by the size classes.
+- `--_start-end-radius`: The radius of the start-end corner. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the button joins another control.
+- `--_start-start-radius`: The radius of the start-start corner. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the button joins the control before it.
+
+Outputs: `--_accent-text`, `--_actions-shift`, `--_bg-color`, `--_border-color`, `--_current-bg-color`, `--_current-text-color`, `--_default-active-bg-color`, `--_default-hover-bg-color`, `--_duration`, `--_filled-active-bg-color`, `--_filled-hover-bg-color`, `--_outlined-active-bg-color`, `--_outlined-active-border-color`, `--_outlined-active-text-color`, `--_outlined-hover-bg-color`, `--_outlined-hover-border-color`, `--_outlined-hover-text-color`, `--_shadow`, `--_text-color`, `--_tonal-active-bg-color`, `--_tonal-active-text-color`, `--_tonal-current-bg-color`, `--_tonal-hover-bg-color` and `--_tonal-hover-text-color`.
+
+## Theme tokens
+
+The stylesheets read `--ui-accent-fill-max-lightness`, `--ui-border-width`, `--ui-button-accent`, `--ui-button-accent-filled`, `--ui-button-focus`, `--ui-button-font-weight`, `--ui-button-hover`, `--ui-button-hover-shadow`, `--ui-button-hover-translate`, `--ui-button-on-accent`, `--ui-button-on-accent-filled`, `--ui-button-padding-inline`, `--ui-button-padding-inline-large`, `--ui-button-padding-inline-small`, `--ui-button-padding-inline-x-small`, `--ui-button-radius`, `--ui-button-shadow`, `--ui-button-size`, `--ui-button-size-large`, `--ui-button-size-small`, `--ui-button-size-x-small`, `--ui-card-padding`, `--ui-contrast`, `--ui-control-accent`, `--ui-control-border-color`, `--ui-control-border-color-filled`, `--ui-critical`, `--ui-critical-text`, `--ui-disabled-opacity`, `--ui-duration-fast`, `--ui-ease`, `--ui-ease-move`, `--ui-field-border-color`, `--ui-field-border-width`, `--ui-focus-border-color`, `--ui-focus-highlight`, `--ui-focus-ring-offset`, `--ui-focus-ring-width`, `--ui-font-code`, `--ui-font-size-caption`, `--ui-font-size-control`, `--ui-font-size-small`, `--ui-font-weight-bold`, `--ui-font-weight-normal`, `--ui-line-height-tight`, `--ui-motion`, `--ui-on-control-accent`, `--ui-on-fill`, `--ui-on-focus-highlight`, `--ui-on-primary`, `--ui-on-primary-tonal`, `--ui-palette-on-strong`, `--ui-palette-on-tint`, `--ui-palette-strong`, `--ui-palette-tint`, `--ui-press-scale`, `--ui-primary`, `--ui-primary-text`, `--ui-primary-tonal`, `--ui-radius`, `--ui-radius-round`, `--ui-radius-small`, `--ui-shadow-control`, `--ui-shadow-field`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-state-active-alpha-accent`, `--ui-state-active-alpha-dark`, `--ui-state-active-alpha-light`, `--ui-state-hover-alpha-accent`, `--ui-state-hover-alpha-dark`, `--ui-state-hover-alpha-light`, `--ui-state-selected-alpha-accent`, `--ui-surface-tonal`, `--ui-surface-tonal-hover`, `--ui-text`, `--ui-text-disabled`, `--ui-text-max-chroma`, `--ui-text-min-lightness` and `--ui-text-strong`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Variants
+
+```html
+<div class="example-row">
+  <button class="ui-button" type="button">Transparent</button>
+  <button class="ui-button" disabled type="button">Disabled</button>
+  <a class="ui-button" href="#">Link</a>
+  <a class="ui-button" href="#" aria-current="page">Current</a>
+</div>
+<div class="example-row">
+  <button class="ui-button ui-outlined" type="button">Outlined</button>
+  <button class="ui-button ui-outlined" disabled type="button">Disabled</button>
+  <a class="ui-button ui-outlined" href="#">Link</a>
+</div>
+<div class="example-row">
+  <button class="ui-button ui-tonal" type="button">Tonal</button>
+  <button class="ui-button ui-tonal" disabled type="button">Disabled</button>
+  <a class="ui-button ui-tonal" href="#">Link</a>
+</div>
+<div class="example-row">
+  <button class="ui-button ui-filled" type="button">Filled</button>
+  <button class="ui-button ui-filled" disabled type="button">Disabled</button>
+  <a class="ui-button ui-filled" href="#">Link</a>
+</div>
+```
+
+## Astro
+
+`import { Button } from "opui-css/astro"`
+
+### Example: Variants
+
+```astro
+---
+import { Button } from "opui-css/astro"
+---
+
+<div class="example-row">
+  <Button>Transparent</Button>
+  <Button disabled>Disabled</Button>
+  <Button href="#">Link</Button>
+  <Button aria-current="page" href="#">Current</Button>
+</div>
+<div class="example-row">
+  <Button variant="outlined">Outlined</Button>
+  <Button disabled variant="outlined">Disabled</Button>
+  <Button href="#" variant="outlined">Link</Button>
+</div>
+<div class="example-row">
+  <Button variant="tonal">Tonal</Button>
+  <Button disabled variant="tonal">Disabled</Button>
+  <Button href="#" variant="tonal">Link</Button>
+</div>
+<div class="example-row">
+  <Button variant="filled">Filled</Button>
+  <Button disabled variant="filled">Disabled</Button>
+  <Button href="#" variant="filled">Link</Button>
+</div>
+```
+
+## React
+
+`import { Button } from "opui-css/react"`
+
+### Example: Variants
+
+```tsx
+import { Button } from "opui-css/react"
+
+export default function Variants() {
+  return (
+    <>
+      <div className="example-row">
+        <Button>Transparent</Button>
+        <Button disabled>Disabled</Button>
+        <Button href="#">Link</Button>
+        <Button aria-current="page" href="#">
+          Current
+        </Button>
+      </div>
+      <div className="example-row">
+        <Button variant="outlined">Outlined</Button>
+        <Button disabled variant="outlined">
+          Disabled
+        </Button>
+        <Button href="#" variant="outlined">
+          Link
+        </Button>
+      </div>
+      <div className="example-row">
+        <Button variant="tonal">Tonal</Button>
+        <Button disabled variant="tonal">
+          Disabled
+        </Button>
+        <Button href="#" variant="tonal">
+          Link
+        </Button>
+      </div>
+      <div className="example-row">
+        <Button variant="filled">Filled</Button>
+        <Button disabled variant="filled">
+          Disabled
+        </Button>
+        <Button href="#" variant="filled">
+          Link
+        </Button>
+      </div>
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { Button } from "opui-css/svelte"`
+
+### Example: Variants
+
+```svelte
+<script lang="ts">
+  import { Button } from "opui-css/svelte"
+</script>
+
+<div class="example-row">
+  <Button>Transparent</Button>
+  <Button disabled>Disabled</Button>
+  <Button href="#">Link</Button>
+  <Button aria-current="page" href="#">Current</Button>
+</div>
+<div class="example-row">
+  <Button variant="outlined">Outlined</Button>
+  <Button disabled variant="outlined">Disabled</Button>
+  <Button href="#" variant="outlined">Link</Button>
+</div>
+<div class="example-row">
+  <Button variant="tonal">Tonal</Button>
+  <Button disabled variant="tonal">Disabled</Button>
+  <Button href="#" variant="tonal">Link</Button>
+</div>
+<div class="example-row">
+  <Button variant="filled">Filled</Button>
+  <Button disabled variant="filled">Disabled</Button>
+  <Button href="#" variant="filled">Link</Button>
+</div>
+```
+
+## Vue
+
+`import { Button } from "opui-css/vue"`
+
+### Example: Variants
+
+```vue
+<script setup lang="ts">
+import { Button } from "opui-css/vue"
+</script>
+
+<template>
+  <div class="example-row">
+    <Button>Transparent</Button>
+    <Button disabled>Disabled</Button>
+    <Button href="#">Link</Button>
+    <Button aria-current="page" href="#">Current</Button>
+  </div>
+  <div class="example-row">
+    <Button variant="outlined">Outlined</Button>
+    <Button disabled variant="outlined">Disabled</Button>
+    <Button href="#" variant="outlined">Link</Button>
+  </div>
+  <div class="example-row">
+    <Button variant="tonal">Tonal</Button>
+    <Button disabled variant="tonal">Disabled</Button>
+    <Button href="#" variant="tonal">Link</Button>
+  </div>
+  <div class="example-row">
+    <Button variant="filled">Filled</Button>
+    <Button disabled variant="filled">Disabled</Button>
+    <Button href="#" variant="filled">Link</Button>
+  </div>
+</template>
+```

package/skills/opui/references/callout.md

@@ -0,0 +1,215 @@
+# Callout
+
+A message in the flow of the page, without interrupting the task.
+
+- CSS: `opui-css/css/components/callout.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/callout.md), [Astro](https://open-props-ui.netlify.app/astro/components/callout.md), [React](https://open-props-ui.netlify.app/react/components/callout.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/callout.md), [Vue](https://open-props-ui.netlify.app/vue/components/callout.md).
+
+## Callout
+
+### Parts
+
+- `.ui-callout` (root): Container element.
+- `<svg>` (`CalloutIcon`): An optional icon before the content. In Astro, React, Svelte and Vue, `CalloutIcon` renders the default one for critical, info, success and warning.
+- `.ui-content` (`CalloutContent`): The content, with an optional heading first.
+- `.ui-actions` (`CalloutActions`): A row of buttons under the content.
+- `<button>`: A close button, a `.ui-button` that is a direct child of the callout. It sits at the end of the first row.
+
+### Props and modifiers
+
+- `severity`: `"critical"` (`.ui-critical`), `"info"` (`.ui-info`), `"neutral"` (`.ui-neutral`), `"success"` (`.ui-success`), `"warning"` (`.ui-warning`). The severity. Sets the color, and in Astro, React, Svelte and Vue the icon `CalloutIcon` renders.
+- `variant`: `"outlined"` (`.ui-outlined`), `"tonal"` (default). The variant to use.
+
+### Slots
+
+- `default`: The callout parts, and any other content.
+
+### Notes
+
+- Astro, React, Svelte and Vue: For a custom icon, put your own `<svg aria-hidden="true">` in the Callout instead of `CalloutIcon`, before `CalloutContent`.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### callout.css
+
+- `--_content-gap`: Space between the children of `.ui-content`.
+- `--_font-size`: Font size of `.ui-content`.
+- `--_gap`: Gap between a direct child `svg` and `.ui-content`.
+- `--_icon-size`: Width of the icon column when there's a direct child `svg`.
+- `--_link-ease`: Easing of the link color transition. Defaults to `--ui-ease`.
+- `--_link-hover-text-color`: Link color on hover and focus. Defaults to `--ui-primary-text`, not used in `.ui-outlined`.
+- `--_motion`: Motion multiplier for the link color transition. `0` turns it off.
+- `--_outlined-bg-color`: Background of `.ui-outlined`. Defaults to `--ui-surface`.
+- `--_outlined-border-color`: Border color of `.ui-outlined`. Defaults to `--ui-border-color`, set by the severity classes.
+- `--_outlined-icon-text-color`: Icon color of `.ui-outlined`. Set by the severity classes.
+- `--_outlined-text-color`: Text color of `.ui-outlined`. Set by the severity classes.
+- `--_padding`: The padding.
+- `--_radius`: The corner radius. Defaults to `--ui-radius`.
+- `--_shadow`: The shadow. Defaults to `--ui-shadow-surface`.
+- `--_surface-bg-color`: The opaque background under the tint. Defaults to `--ui-surface`.
+- `--_title-font-size`: Font size of headings in `.ui-content`.
+
+Outputs: `--_bg-color`, `--_border-color`, `--_icon-text-color`, `--_link-duration` and `--_text-color`.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-color`, `--ui-border-color-on-raised`, `--ui-border-color-raised`, `--ui-border-width`, `--ui-duration`, `--ui-ease`, `--ui-field-border-color-on-raised`, `--ui-font-size-body`, `--ui-font-size-small`, `--ui-font-weight-semibold`, `--ui-icon-size`, `--ui-motion`, `--ui-palette-accent`, `--ui-palette-border`, `--ui-palette-strong`, `--ui-palette-tint-subtle`, `--ui-primary-text`, `--ui-radius`, `--ui-shadow-surface`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-surface`, `--ui-surface-tonal` and `--ui-text-strong`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Variants
+
+```html
+<article class="ui-callout">
+  <div class="ui-content">
+    <h3>Scheduled maintenance</h3>
+    <p>
+      The dashboard is read-only on Sunday from 02:00 to 04:00 UTC while we
+      upgrade the database.
+    </p>
+  </div>
+</article>
+<article class="ui-callout ui-outlined">
+  <div class="ui-content">
+    <h3>Billing has moved</h3>
+    <p>
+      Invoices and payment methods are now in the Billing tab of your workspace
+      settings.
+    </p>
+  </div>
+</article>
+```
+
+## Astro
+
+`import { Callout, CalloutActions, CalloutContent, CalloutIcon } from "opui-css/astro"`
+
+### Example: Variants
+
+```astro
+---
+import { Callout, CalloutContent } from "opui-css/astro"
+---
+
+<Callout>
+  <CalloutContent>
+    <h3>Scheduled maintenance</h3>
+    <p>
+      The dashboard is read-only on Sunday from 02:00 to 04:00 UTC while we
+      upgrade the database.
+    </p>
+  </CalloutContent>
+</Callout>
+<Callout variant="outlined">
+  <CalloutContent>
+    <h3>Billing has moved</h3>
+    <p>
+      Invoices and payment methods are now in the Billing tab of your workspace
+      settings.
+    </p>
+  </CalloutContent>
+</Callout>
+```
+
+## React
+
+`import { Callout, CalloutActions, CalloutContent, CalloutIcon } from "opui-css/react"`
+
+- Client components (`"use client"`): `Callout`.
+
+### Example: Variants
+
+```tsx
+import { Callout, CalloutContent } from "opui-css/react"
+
+export default function Variants() {
+  return (
+    <>
+      <Callout>
+        <CalloutContent>
+          <h3>Scheduled maintenance</h3>
+          <p>
+            The dashboard is read-only on Sunday from 02:00 to 04:00 UTC while
+            we upgrade the database.
+          </p>
+        </CalloutContent>
+      </Callout>
+      <Callout variant="outlined">
+        <CalloutContent>
+          <h3>Billing has moved</h3>
+          <p>
+            Invoices and payment methods are now in the Billing tab of your
+            workspace settings.
+          </p>
+        </CalloutContent>
+      </Callout>
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { Callout, CalloutActions, CalloutContent, CalloutIcon } from "opui-css/svelte"`
+
+### Example: Variants
+
+```svelte
+<script lang="ts">
+  import { Callout, CalloutContent } from "opui-css/svelte"
+</script>
+
+<Callout>
+  <CalloutContent>
+    <h3>Scheduled maintenance</h3>
+    <p>
+      The dashboard is read-only on Sunday from 02:00 to 04:00 UTC while we
+      upgrade the database.
+    </p>
+  </CalloutContent>
+</Callout>
+<Callout variant="outlined">
+  <CalloutContent>
+    <h3>Billing has moved</h3>
+    <p>
+      Invoices and payment methods are now in the Billing tab of your workspace
+      settings.
+    </p>
+  </CalloutContent>
+</Callout>
+```
+
+## Vue
+
+`import { Callout, CalloutActions, CalloutContent, CalloutIcon } from "opui-css/vue"`
+
+### Example: Variants
+
+```vue
+<script setup lang="ts">
+import { Callout, CalloutContent } from "opui-css/vue"
+</script>
+
+<template>
+  <Callout>
+    <CalloutContent>
+      <h3>Scheduled maintenance</h3>
+      <p>
+        The dashboard is read-only on Sunday from 02:00 to 04:00 UTC while we
+        upgrade the database.
+      </p>
+    </CalloutContent>
+  </Callout>
+  <Callout variant="outlined">
+    <CalloutContent>
+      <h3>Billing has moved</h3>
+      <p>
+        Invoices and payment methods are now in the Billing tab of your
+        workspace settings.
+      </p>
+    </CalloutContent>
+  </Callout>
+</template>
+```