Colors

The Catalyst UI library uses a color set which is available with CSS variables.
All colors are prefixed with --color- and have an RGB version with the -rgb suffix.

Primary Colors

primary-100
primary-200

Neutral Colors

white
black

Blue Shades

blue-0
blue-100

Grey Palette

grey-100
grey-200
grey-300
grey-400
grey-500
grey-600
grey-700
grey-800
grey-900

Status Colors

info
info-dark
warning
warning-dark
error
error-dark
success
success-dark

Example Usage

/* Using color directly */
color: var(--color-primary-100);

/* Using with opacity */
background-color: rgba(var(--color-primary-100-rgb), 0.5);

CSS Variables

:root { 
    /* Primary Colors */
    --color-primary-100: #0014CC;
    --color-primary-200: #0A2FFF;

    /* Neutral Colors */
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* Blue Colors */
    --color-blue-0: #E0EBFF;
    --color-blue-100: #C2D4FF;

    /* Grey Scale */
    --color-grey-100: #F8F9FB;
    --color-grey-200: #F4F5F7;
    --color-grey-300: #E7EAEE;
    --color-grey-400: #C1C7CD;
    --color-grey-500: #A2A9B0;
    --color-grey-600: #8B919A;
    --color-grey-700: #697077;
    --color-grey-800: #4D5358;
    --color-grey-900: #343A3F;

    /* Status Colors */
    --color-info: #85A3FF;
    --color-info-dark: #00078F;
    --color-warning: #F15619;
    --color-warning-dark: #C2410C;
    --color-error: #EA2A4A;
    --color-error-dark: #D11534;
    --color-success: #15803D;
    --color-success-dark: #11652F;

    /* RGB Versions for opacity manipulation */
    --color-primary-100-rgb: 0, 20, 204;
    --color-primary-200-rgb: 10, 47, 255;

    --color-white-rgb: 255, 255, 255;
    --color-black-rgb: 0, 0, 0;

    --color-blue-0-rgb: 224, 235, 255;
    --color-blue-100-rgb: 194, 212, 255;

    --color-grey-100-rgb: 248, 249, 251;
    --color-grey-200-rgb: 244, 245, 247;
    --color-grey-300-rgb: 231, 234, 238;
    --color-grey-400-rgb: 193, 199, 205;
    --color-grey-500-rgb: 162, 169, 176;
    --color-grey-600-rgb: 139, 145, 154;
    --color-grey-700-rgb: 105, 112, 119;
    --color-grey-800-rgb: 77, 83, 88;
    --color-grey-900-rgb: 52, 58, 63;

    --color-info-rgb: 133, 163, 255;
    --color-warning-rgb: 241, 86, 25;
    --color-error-rgb: 234, 42, 74;
    --color-success-rgb: 21, 128, 61;
}

Using Colors in Components

When developing components, it's recommended to use these CSS variables for consistent theming across the application:

.my-component {
  color: var(--color-grey-900);
  background-color: var(--color-grey-100);
  border: 1px solid var(--color-grey-300);
  
  &--primary {
    color: var(--color-white);
    background-color: var(--color-primary-100);
  }
  
  &--danger {
    background-color: var(--color-error);
  }
}

Using RGB Values for Opacity

The RGB variables allow you to set opacity with rgba():

.overlay {
  background-color: rgba(var(--color-black-rgb), 0.5); // 50% opaque black
}

.button-hover {
  background-color: rgba(var(--color-primary-100-rgb), 0.1); // 10% opaque primary color
}

This gives you more flexibility than using hex values with standard CSS opacity which affects all child elements.