Color Utilities

The color utilities in the @plumeria/core package provides a comprehensive set of tools for applying colors in your styles. It includes a complete collection of 141 CSS named colors, framework-specific theme colors, and utilities to lighten or darken colors programmatically. This reference details all available colors and utilities, with examples to demonstrate their usage.

Overview

The color utilities simplifies color management in your styles by providing:

• Standard Colors: A complete set of 141 CSS named colors with autocomplete support.
• Theme Colors: Predefined colors for common UI states (e.g., primary, success).
• Lighten/Darken Utilities: Functions to adjust color brightness dynamically.

These utilities integrate seamlessly with @plumeria/core and can be combined with other utilities like pseudo for dynamic and responsive styling.

export const color = {
  ...colors, // Standard named colors
  ...themeColors, // Framework-specific colors
  lighten, // Lighten a color by a specified proportion
  darken, // Darken a color by a specified proportion
};

Standard Colors

The colors object provides a complete set of 141 CSS named colors, supporting autocomplete in modern IDEs. Below is a curated list of commonly used colors, with the full list available in the expandable section.

Theme Colors

The themeColors object provides a set of predefined colors tailored for common UI states, such as buttons, alerts, or notifications. These colors are designed to align with modern framework conventions.

Lighten and Darken Utilities

The lighten and darken utilities adjust a color's brightness by mixing it with white or black based on a proportion (0 to 1 or a percentage string like '20%'). Ideal for hover effects, focus states, or dynamic color variations.

Notes

• A proportion of 0 (or '0%') leaves the color unchanged; 1 (or '100%') results in pure white (lighten) or black (darken).
• Works with named colors (e.g., navy) and hex codes (e.g., #000080).

Usage Examples

Below are practical examples demonstrating how to use the color utilities with @plumeria/core.

Example 1: Using Standard Colors

import { css } from '@plumeria/core';
 
const styles = css.create({
  background: {
    backgroundColor: css.color.wheat, // Warm beige background
    color: css.color.black, // Black text for contrast
  },
  highlight: {
    backgroundColor: css.color.crimson, // Deep red for alerts
  },
});

Example 2: Using Theme Colors

import { css } from '@plumeria/core';
 
const buttonStyles = css.create({
  primaryButton: {
    backgroundColor: css.color.primary, // Vibrant blue for primary buttons
    color: css.color.white,
    padding: '10px 20px',
  },
  errorMessage: {
    backgroundColor: css.color.error, // Red for error alerts
    color: css.color.white,
    borderRadius: '4px',
  },
});

Example 3: Using Lighten and Darken

import { css } from '@plumeria/core';
 
const styles = css.create({
  button: {
    backgroundColor: css.color.primary, // #0070F3
    color: css.color.white,
    [css.pseudo.hover]: {
      backgroundColor: css.color.lighten('primary', 0.2), // Lighter blue on hover
    },
    [css.pseudo.active]: {
      backgroundColor: css.color.darken('primary', 0.2), // Darker blue on click
    },
  },
});

Example 4: Combining Colors with Pseudo-Classes

import { css } from '@plumeria/core';
 
const styles = css.create({
  alert: {
    backgroundColor: css.color.warning, // Orange for warnings
    color: css.color.white,
    padding: '10px',
    [css.pseudo.hover]: {
      backgroundColor: css.color.lighten('warning', 0.3), // Lighter orange on hover
    },
  },
});

🔗 Related