Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/raystack/apsara/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

Apsara provides a comprehensive color system built on CSS custom properties. The color system includes semantic colors for UI components, primitive color scales, and specialized visualization colors for charts and data displays.

​
Semantic colors

Semantic colors are designed for common UI patterns and automatically adapt to the selected theme.

​
Foreground colors

Text and icon colors with semantic meaning: 
/* Base foreground colors */
--rs-color-foreground-base-primary      /* Primary text */
--rs-color-foreground-base-secondary    /* Secondary text */
--rs-color-foreground-base-tertiary     /* Tertiary text */
--rs-color-foreground-base-emphasis     /* Emphasized text */

/* Semantic foreground colors */
--rs-color-foreground-accent-primary    /* Accent color text */
--rs-color-foreground-attention-primary /* Warning text */
--rs-color-foreground-danger-primary    /* Error text */
--rs-color-foreground-success-primary   /* Success text */

/* Emphasis foreground colors */
--rs-color-foreground-accent-emphasis
--rs-color-foreground-danger-emphasis
--rs-color-foreground-attention-emphasis
--rs-color-foreground-success-emphasis

​
Background colors

Background colors for various UI states: 
/* Base backgrounds */
--rs-color-background-base-primary
--rs-color-background-base-secondary
--rs-color-background-neutral-primary
--rs-color-background-neutral-secondary
--rs-color-background-neutral-tertiary

/* Semantic backgrounds */
--rs-color-background-accent-primary
--rs-color-background-attention-primary
--rs-color-background-danger-primary
--rs-color-background-success-primary

/* Emphasis backgrounds */
--rs-color-background-accent-emphasis
--rs-color-background-attention-emphasis
--rs-color-background-danger-emphasis
--rs-color-background-success-emphasis
--rs-color-background-neutral-emphasis

/* Hover states */
--rs-color-background-base-primary-hover
--rs-color-background-neutral-secondary-hover
--rs-color-background-neutral-tertiary-hover
--rs-color-background-accent-emphasis-hover
--rs-color-background-attention-emphasis-hover
--rs-color-background-danger-emphasis-hover
--rs-color-background-success-emphasis-hover

​
Border colors

Border colors for various UI elements: 
/* Base borders */
--rs-color-border-base-primary
--rs-color-border-base-secondary
--rs-color-border-base-tertiary
--rs-color-border-base-focus
--rs-color-border-base-emphasis

/* Semantic borders */
--rs-color-border-accent-primary
--rs-color-border-attention-primary
--rs-color-border-danger-primary
--rs-color-border-success-primary

/* Emphasis borders */
--rs-color-border-accent-emphasis
--rs-color-border-attention-emphasis
--rs-color-border-danger-emphasis
--rs-color-border-success-emphasis

/* Hover states */
--rs-color-border-base-tertiary-hover
--rs-color-border-accent-emphasis-hover
--rs-color-border-attention-emphasis-hover
--rs-color-border-danger-emphasis-hover
--rs-color-border-success-emphasis-hover

​
Overlay colors

Transparent overlay colors for creating depth and focus:

​
Black overlays

--rs-color-overlay-black-a1   /* 5% opacity */
--rs-color-overlay-black-a2   /* 10% opacity */
--rs-color-overlay-black-a3   /* 15% opacity */
--rs-color-overlay-black-a4   /* 20% opacity */
--rs-color-overlay-black-a5   /* 30% opacity */
--rs-color-overlay-black-a6   /* 40% opacity */
--rs-color-overlay-black-a7   /* 50% opacity */
--rs-color-overlay-black-a8   /* 60% opacity */
--rs-color-overlay-black-a9   /* 70% opacity */
--rs-color-overlay-black-a10  /* 80% opacity */
--rs-color-overlay-black-a11  /* 90% opacity */
--rs-color-overlay-black-a12  /* 95% opacity */

​
White overlays

--rs-color-overlay-white-a1   /* 5% opacity */
--rs-color-overlay-white-a2   /* 10% opacity */
--rs-color-overlay-white-a3   /* 15% opacity */
--rs-color-overlay-white-a4   /* 20% opacity */
--rs-color-overlay-white-a5   /* 30% opacity */
--rs-color-overlay-white-a6   /* 40% opacity */
--rs-color-overlay-white-a7   /* 50% opacity */
--rs-color-overlay-white-a8   /* 60% opacity */
--rs-color-overlay-white-a9   /* 70% opacity */
--rs-color-overlay-white-a10  /* 80% opacity */
--rs-color-overlay-white-a11  /* 90% opacity */
--rs-color-overlay-white-a12  /* 95% opacity */

​
Visualization colors

Specialized color palettes for charts, graphs, and data visualization:

​
Available color scales

Each visualization color comes in 4 shades (6, 8, 9, 11) for different use cases:
  • Sky: --rs-color-viz-sky-{6|8|9|11}
  • Mint: --rs-color-viz-mint-{6|8|9|11}
  • Lime: --rs-color-viz-lime-{6|8|9|11}
  • Grass: --rs-color-viz-grass-{6|8|9|11}
  • Green: --rs-color-viz-green-{6|8|9|11}
  • Jade: --rs-color-viz-jade-{6|8|9|11}
  • Cyan: --rs-color-viz-cyan-{6|8|9|11}
  • Blue: --rs-color-viz-blue-{6|8|9|11}
  • Iris: --rs-color-viz-iris-{6|8|9|11}
  • Purple: --rs-color-viz-purple-{6|8|9|11}
  • Pink: --rs-color-viz-pink-{6|8|9|11}
  • Crimson: --rs-color-viz-crimson-{6|8|9|11}
  • Orange: --rs-color-viz-orange-{6|8|9|11}
  • Gold: --rs-color-viz-gold-{6|8|9|11}

​
Shade usage guidelines

  • Shade 6: Subtle backgrounds and fills
  • Shade 8: Hover states and secondary emphasis
  • Shade 9: Primary fills and chart colors
  • Shade 11: High contrast text and borders

​
Usage examples

​
Semantic color usage

/* Success state */
.success-alert {
  background: var(--rs-color-background-success-primary);
  color: var(--rs-color-foreground-success-primary);
  border: 1px solid var(--rs-color-border-success-primary);
}

/* Error state */
.error-alert {
  background: var(--rs-color-background-danger-primary);
  color: var(--rs-color-foreground-danger-primary);
  border: 1px solid var(--rs-color-border-danger-primary);
}

/* Warning state */
.warning-alert {
  background: var(--rs-color-background-attention-primary);
  color: var(--rs-color-foreground-attention-primary);
  border: 1px solid var(--rs-color-border-attention-primary);
}

​
Emphasis buttons

.primary-button {
  background: var(--rs-color-background-accent-emphasis);
  color: var(--rs-color-foreground-accent-emphasis);
  border: 1px solid var(--rs-color-border-accent-emphasis);
}

.primary-button:hover {
  background: var(--rs-color-background-accent-emphasis-hover);
  border-color: var(--rs-color-border-accent-emphasis-hover);
}

.danger-button {
  background: var(--rs-color-background-danger-emphasis);
  color: var(--rs-color-foreground-danger-emphasis);
}

.danger-button:hover {
  background: var(--rs-color-background-danger-emphasis-hover);
}

​
Overlay usage

/* Modal backdrop */
.modal-backdrop {
  background: var(--rs-color-overlay-black-a7);
  backdrop-filter: blur(4px);
}

/* Hover overlay */
.card:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rs-color-overlay-white-a2);
}

/* Focus ring */
.input:focus {
  box-shadow: 0 0 0 3px var(--rs-color-overlay-black-a3);
}

​
Visualization colors in charts

import { BarChart } from 'your-chart-library';

function SalesChart() {
  return (
    <BarChart
      data={salesData}
      colors={[
        'var(--rs-color-viz-blue-9)',
        'var(--rs-color-viz-green-9)',
        'var(--rs-color-viz-purple-9)',
        'var(--rs-color-viz-orange-9)'
      ]}
    />
  );
}

​
Data visualization legend

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color-box {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.legend-color-box.sales {
  background: var(--rs-color-viz-blue-9);
}

.legend-color-box.profit {
  background: var(--rs-color-viz-green-9);
}

.legend-color-box.expenses {
  background: var(--rs-color-viz-crimson-9);
}

​
Status indicators

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background: var(--rs-color-background-success-primary);
  color: var(--rs-color-foreground-success-primary);
}

.status-badge.pending {
  background: var(--rs-color-background-attention-primary);
  color: var(--rs-color-foreground-attention-primary);
}

.status-badge.inactive {
  background: var(--rs-color-background-neutral-secondary);
  color: var(--rs-color-foreground-base-secondary);
}

​
Progressive enhancement

.interactive-card {
  background: var(--rs-color-background-base-primary);
  border: 1px solid var(--rs-color-border-base-primary);
  transition: all 0.2s;
}

.interactive-card:hover {
  background: var(--rs-color-background-base-primary-hover);
  border-color: var(--rs-color-border-base-secondary);
}

.interactive-card:focus-within {
  border-color: var(--rs-color-border-base-focus);
  box-shadow: 0 0 0 3px var(--rs-color-overlay-black-a2);
}

​
Color primitives

The semantic colors are built on top of primitive color scales defined in separate files:
  • Neutral colors: --rs-neutral-{1-12}
  • Accent colors: --rs-accent-{1-12}
  • Attention colors: --rs-attention-{1-12}
  • Danger colors: --rs-danger-{1-12}
  • Success colors: --rs-success-{1-12}
  • Visualization colors: --rs-viz-{color}-{1-12}
While primitive colors are available, it’s recommended to use semantic color variables for better maintainability and theme consistency.

​
Best practices

  1. Use semantic colors whenever possible instead of primitive scales
  2. Maintain hierarchy by using primary, secondary, and tertiary color variants
  3. Reserve emphasis colors for high-priority actions and states
  4. Use overlays for creating depth without hardcoding opacity
  5. Choose visualization colors that provide sufficient contrast and are colorblind-friendly
  6. Test colors in both light and dark themes
  7. Follow hover state patterns using the provided hover color variants

​
Related

Build docs developers (and LLMs) love

Get started for freeTalk to us