chatjet-ai/css

Common CSS for chatjet-ai components.

Table of Contents

• 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)

Community

• Twitter chatjet-ai
• Twitter @motifland
• Discord

Authors

This library is created by the team behind Motif (@motifland).

License

MIT © Motif