xbees-colors

Installation

Install the package in your project directory with:

yarn add @wildix/xbees-colors

Usage

Basic Usage

import { getPalette, BuildAppNames, ThemeSettingMode } from '@wildix/xbees-colors';

// Get palette for a specific app and theme mode
const palette = getPalette(ThemeSettingMode.LIGHT, BuildAppNames.XBEES);

// Use the palette in your CSS variables or styles
Object.entries(palette).forEach(([key, value]) => {
  document.documentElement.style.setProperty(key, value);
});

Available App Names

The package supports multiple applications through the BuildAppNames enum:

import { BuildAppNames } from '@wildix/xbees-colors';

// Available app names:
BuildAppNames.XBEES          // 'xbees'
BuildAppNames.XHOPPERS        // 'xhoppers'
BuildAppNames.COLLABORATION   // 'collaboration'

Getting Theme Colors

import { getThemeColors, BuildAppNames } from '@wildix/xbees-colors';

// Get theme colors for a specific app
const themeColors = getThemeColors(BuildAppNames.XBEES);

// Access specific colors
const primaryColor = themeColors.primary_main_LM;

Theme Modes

import { ThemeSettingMode } from '@wildix/xbees-colors';

ThemeSettingMode.LIGHT  // 'light'
ThemeSettingMode.DARK   // 'dark'

Complete Example

import { 
  getPalette, 
  getThemeColors,
  BuildAppNames, 
  ThemeSettingMode 
} from '@wildix/xbees-colors';

// Get palette for dark theme in XBEES app
const darkPalette = getPalette(ThemeSettingMode.DARK, BuildAppNames.XBEES);

// Get theme colors for XHOPPERS app
const xhoppersColors = getThemeColors(BuildAppNames.XHOPPERS);

// Apply palette to CSS variables
Object.entries(darkPalette).forEach(([key, value]) => {
  document.documentElement.style.setProperty(key, value);
});