Theming

The CLThemeProvider component is the foundation of Callaloo's theming system. It configures the visual appearance of your application and enables the use of custom themes. You should wrap your entire application with this component to ensure all Callaloo components receive proper styling.

Basic Usage

Default Theme

To use Callaloo with the default theme, wrap your application with the CLThemeProvider component:

<script setup lang="ts">
import '@codeandfunction/callaloo/styles.css';
import { CLThemeProvider } from '@codeandfunction/callaloo';
</script>

<template>
  <div class="my-awesome-app">
    <CLThemeProvider>
      <!-- All of your components that contain any Callaloo components -->
    </CLThemeProvider>
  </div>
</template>

Custom Theme

To use a custom theme configuration, pass a themeConfig prop to the CLThemeProvider:

<script setup lang="ts">
import '@codeandfunction/callaloo/styles.css';
import { CLThemeConfig, CLThemeProvider } from '@codeandfunction/callaloo';

const themeConfig: CLThemeConfig = {
  colors: {
    primary: {
      '100': '#FF34FF',
      // ... additional color shades
    },
    // ... other color palettes
  },
  darkMode: false,
  fontFamily: 'Arial'
};
</script>

<template>
  <div class="my-awesome-app">
    <CLThemeProvider :theme-config="themeConfig">
      <!-- All of your components that contain any Callaloo components -->
    </CLThemeProvider>
  </div>
</template>

Component API

CLThemeProvider

Props

Optional:

• theme-config: CLThemeConfig - A custom theme configuration that will be applied to all slotted content of the CLThemeProvider component.

Required:

• None

Colors

The Callaloo design system uses a comprehensive color palette where each color has various shades represented from 100 to 900. The color system includes:

• Primary colors - Main brand colors
• Neutral colors - Grays and backgrounds
• Semantic colors - Success, warning, error states
• Interactive colors - Hover, focus, and active states

Each color shade serves different purposes:

• 100-300: Light tones for backgrounds and subtle elements
• 400-600: Medium tones for borders and secondary elements
• 700-900: Dark tones for text and primary elements

Default Color Palette

Here are the default color values included in Callaloo's theme:

Primary Colors

Shade	Color	Hex Code	Usage
0		#ffffff	Pure white
100		#def5ff	Light backgrounds
200		#b6eeff	Subtle elements
300		#75e3ff	Light accents
400		#2cd6ff	Medium elements
500		#00c8ff	Base primary
600		#009cd4	Interactive elements
700		#007cab	Text and borders
800		#00688d	Dark text
900		#065674	Darkest shade

Neutral Colors

Shade	Color	Hex Code	Usage
0		#ffffff	Pure white
100		#F7F7F7	Light backgrounds
200		#F2F2F2	Subtle backgrounds
300		#EBEBEB	Light borders
400		#E6E6E6	Medium borders
500		#DEDEDE	Base neutral
600		#B3B3B3	Disabled elements
700		#858585	Secondary text
800		#595959	Primary text
900		#2B2B2B	Darkest text

Semantic Colors

Success (Green)

Shade	Color	Hex Code	Usage
0		#ffffff	Pure white
100		#9effb2	Light success backgrounds
200		#69f68d	Success highlights
300		#56e57e	Light success accents
400		#41d56e	Medium success elements
500		#22c55d	Base success
600		#00a147	Success interactions
700		#007230	Success text
800		#00441a	Dark success
900		#001f08	Darkest success

Danger (Red)

Shade	Color	Hex Code	Usage
0		#ffffff	Pure white
100		#ffd3ce	Light error backgrounds
200		#ffb2ac	Error highlights
300		#ff8e88	Light error accents
400		#fe6561	Medium error elements
500		#e74c4c	Base danger
600		#d20e27	Error interactions
700		#9b0018	Error text
800		#63000c	Dark error
900		#360003	Darkest error

Warning (Yellow)

Shade	Color	Hex Code	Usage
0		#ffffff	Pure white
100		#ffeaba	Light warning backgrounds
200		#ffdf95	Warning highlights
300		#ffd36a	Light warning accents
400		#fdc836	Medium warning elements
500		#f5be1a	Base warning
600		#c79800	Warning interactions
700		#8a6900	Warning text
800		#4f3b00	Dark warning
900		#211700	Darkest warning

Info (Blue)

Shade	Color	Hex Code	Usage
0		#ffffff	Pure white
100		#cfe2ff	Light info backgrounds
200		#afceff	Info highlights
300		#8eb9ff	Light info accents
400		#6ca4ff	Medium info elements
500		#4e8ff8	Base info
600		#2470e7	Info interactions
700		#004cb5	Info text
800		#002e73	Dark info
900		#00153e	Darkest info

Secondary (Gray-Blue)

Shade	Color	Hex Code	Usage
0		#ffffff	Pure white
100		#DEE2E8	Light secondary backgrounds
200		#BFC7D4	Secondary highlights
300		#9EAABD	Light secondary accents
400		#8090A8	Medium secondary elements
500		#61738E	Base secondary
600		#4F5D73	Secondary interactions
700		#3A4555	Secondary text
800		#272F3A	Dark secondary
900		#13161B	Darkest secondary

Theme Configuration

The CLThemeConfig interface allows you to customize:

• Colors: Complete color palette with shades 100-900
• Dark Mode: Enable/disable dark mode styling
• Font Family: Set the primary font family for your application

Best Practices

1. Application Root: Always place CLThemeProvider at the root of your application to ensure consistent theming across all components.

2. CSS Import: Don't forget to import the Callaloo styles: import '@codeandfunction/callaloo/styles.css'

3. Color Consistency: When creating custom themes, maintain the 100-900 shade structure for consistent component behavior.

4. Theme Switching: You can dynamically change themes by updating the theme-config prop reactively.