@chatjet-ai/css NPM

`chatjet-ai/css`

Common CSS for chatjet-ai components.

Installation
Usage
API
- CSS Classes
- CSS Variables
Community
Authors
License

Installation

npm install chatjet-ai/core

Usage

With a bundler:

import '@chatjet-ai/css';

With a CDN:

<link
  rel="stylesheet"
  href="https://unpkg.com/@chatjet-ai/css@0.2.2/markprompt.css"
/>

This package adds styling for various CSS classes. All styling is applied using the :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
MarkpromptContent
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-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-button-icon-size-(Default: : 1rem)