Colibri Design System

A themeable Web Components library built with Lit, designed to provide a consistent and customizable design system for your web applications.

Features

• 🎨 Themeable: Light, dark, and custom themes supported
• 🔧 Customizable: Style tokens and CSS custom properties
• ♿ Accessible: Built with accessibility in mind
• 📱 Responsive: Mobile-first approach
• ⚡ Performant: Lightweight and fast
• 🛠️ Web Components: Framework agnostic

Installation

npm install @telesign/colibri

Quick Start

There are two ways to use this library, you can choose to load and register all of the components at once, or you can choose to load and register just component you need.

Register all components

import { registerAllComponents, registerColibriComponents } from '@telesign/colibri';
import { ColIcon } from '@telesign/colibri-icons';
import '@telesign/colibri/styles/styles.css';

registerAllComponents();
registerColibriComponents([ColIcon]);

Register only needed components

import { registerColibriComponents, ColButton } from '@telesign/colibri';
import { ColIcon } from '@telesign/colibri-icons';
import '@telesign/colibri/styles/styles.css';

registerColibriComponents([ColButton, ColIcon]);

Now you're ready to use the ColButton component:

<div data-theme="telesign">
  <col-button color="primary">
    Send
    <col-icon name="send"></col-icon>
  </col-button>
</div>

The styles.css file includes all necessary styling for the current themes. If you need to use a specific theme, you can import it directly:

// For default theme
import '@telesign/colibri/styles/themes/theme-telesign.css';
// For massive theme
import '@telesign/colibri/styles/themes/theme-massive.css';
// For bics theme
import '@telesign/colibri/styles/themes/theme-bics.css';

Browser Support

• Chrome/Edge ≥ 79
• Firefox ≥ 67
• Safari ≥ 14
• iOS Safari ≥ 14

Documentation

For detailed documentation and examples, visit our Storybook documentation.

Technical Documentation

• Component Guide
• Theming Guide
• Changelog
• Release Process

Contributing

We are not currently accepting external contributions to this repository. This is an internal project maintained by the Portals Team at Telesign.

License

This project is licensed under the MIT License - see the LICENSE file for details.

About Telesign

Telesign helps the world's largest brands connect, protect, and engage with their customers through powerful communication channels.

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

# Run tests in headless mode (CI)
npm run test:headless

# Run tests with visual output
npm run test:visual

# Run tests in debug mode
npm run test:debug

# Run a specific test file
npm test -- --files="src/components/avatar/col-avatar.test.ts"

# Run tests matching a pattern
npm test -- --files="src/components/**/*.test.ts"

# Build for production
npm run build

Made with ❤️ by the Portals Team