# @xrpl/ai-css

> Common CSS for XRPL AI components

Latest version **0.19.0** (published 2023-10-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @xrpl/ai-css
pnpm add @xrpl/ai-css
yarn add @xrpl/ai-css
bun add @xrpl/ai-css
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.19.0 |
| Published | 2023-10-11 |
| First published | 2023-10-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 41.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | justinr1234, intelliot |

## Links

- npm: https://www.npmjs.com/package/@xrpl/ai-css
- Repository: https://github.com/xpring-eng/xrplai-js
- Homepage: https://github.com/xpring-eng/xrplai-js#readme
- Issues: https://github.com/xpring-eng/xrplai-js/issues
- npm.io page: https://npm.io/package/@xrpl/ai-css

## Recent versions

- 0.19.0 (latest) — 2023-10-11
- 0.18.0 — 2023-10-09
- 0.17.0 — 2023-10-09

## README

# `@xrpl/ai-css`

Common CSS for XRPL AI components.

## Installation

```sh
npm install @xrpl/ai-core
```

## Usage

With a bundler:

```js
import '@xrpl/ai-css';
```

~~With a CDN:~~

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@markprompt/css@0.2.0/markprompt.css"
/>
```

This package adds styling for various CSS classes. All styling is applied using
the [`:where()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) pseudo
class, so you can override all styling manually.

## API

### CSS Classes

The package adds styling using the following classes.

- `MarkpromptAnswer`
- `MarkpromptAutoScroller`
- `MarkpromptCaret`
- `MarkpromptClose`
- `MarkpromptContentDialog`
- `MarkpromptContentPlain`
- `MarkpromptForm`
- `MarkpromptIcon`
- `MarkpromptOverlay`
- `MarkpromptProgress`
- `MarkpromptPrompt`
- `MarkpromptPromptLabel`
- `MarkpromptReferences`
- `MarkpromptSearchIcon`
- `MarkpromptTitle`
- `MarkpromptTrigger`

### CSS Variables

Styling can be customized using the following CSS variables.

- `--markprompt-background`: (Default: `#ffffff`, Default dark: `#050505`)
- `--markprompt-foreground`: (Default: `#171717`, Default dark: `#d4d4d4`)
- `--markprompt-muted`: (Default: `#fafafa`, Default dark: `#171717`)
- `--markprompt-mutedForeground`: (Default: `#737373`, Default dark: `#737373`)
- `--markprompt-border`: (Default: `#e5e5e5`, Default dark: `#262626`)
- `--markprompt-input`: (Default: `#ffffff`, Default dark: `#ffffff`)
- `--markprompt-primary`: (Default: `#6366f1`, Default dark: `#6366f1`)
- `--markprompt-primaryForeground`: (Default: `#ffffff`, Default dark:
  `#ffffff`)
- `--markprompt-primaryMuted`: (Default: `#8285f4`, Default dark: `#8285f4`)
- `--markprompt-secondary`: (Default: `#fafafa`, Default dark: `#0e0e0e`)
- `--markprompt-secondaryForeground`: (Default: `#171717`, Default dark:
  `#ffffff`)
- `--markprompt-primaryHighlight`: (Default: `#ec4899`, Default dark: `#ec4899`)
- `--markprompt-secondaryHighlight`: (Default: `#a855f7`, Default dark:
  `#a855f7`)
- `--markprompt-overlay`: (Default: `#00000010`, Default dark: `#00000040\`)
- `--markprompt-ring`: (Default: `#0ea5e9`, Default dark: `#ffffff`)
- `--markprompt-radius`: (Default: `8px`)
- `--markprompt-text-size`-(Default: `0.875rem`)
- `--markprompt-text-size-xs`-(Default: `0.75rem`)
- `--markprompt-button-icon-size`-(Default: `: 1rem`)

## License

[MIT](./LICENSE) © XRPL AI Devs

---
_Source: https://npm.io/package/@xrpl/ai-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._