Colors

popcn/ui uses CSS custom properties for all colors, enabling easy theming and runtime color changes. Colors are defined in RGB format for Tailwind alpha value compatibility.

Core Colors

The foundation of the color system. These colors are used throughout all components.

Background

--ap-background

Main background color

Foreground

--ap-foreground

Main text color

Primary

--ap-primary

Primary brand color for buttons, links

Primary Foreground

--ap-primary-foreground

Text on primary backgrounds

Secondary

--ap-secondary

Secondary accent color

Secondary Foreground

--ap-secondary-foreground

Text on secondary backgrounds

Aurora Gradient

The signature aurora effect uses three gradient colors that create flowing, animated backgrounds.

Aurora gradient flowing through aurora-1, aurora-2, and aurora-3 colors.

Aurora 1

--ap-aurora-1

Gradient start color

Aurora 2

--ap-aurora-2

Gradient middle color

Aurora 3

--ap-aurora-3

Gradient end color

Utility Colors

Support colors for borders, muted text, focus rings, and other UI elements.

Muted

--ap-muted

Subtle background for hover states

Muted Foreground

--ap-muted-foreground

Subdued text color

Border

--ap-border

Default border color

Ring

--ap-ring

Focus ring color

Usage

Colors use RGB format to support Tailwind's opacity modifier syntax.

/* Direct usage in CSS */
.element {
  background-color: rgb(var(--ap-primary));
  color: rgb(var(--ap-primary-foreground));
}

/* With opacity using Tailwind syntax */
.element {
  background-color: rgb(var(--ap-primary) / 0.5);
  border-color: rgb(var(--ap-border) / 0.3);
}

/* In Tailwind classes */
<div className="bg-[rgb(var(--ap-primary))]">
  Primary background
</div>

<div className="bg-[rgb(var(--ap-primary)/0.5)]">
  50% opacity primary
</div>

Tailwind Configuration

popcn/ui extends Tailwind's color palette with semantic color classes.

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      colors: {
        background: "rgb(var(--ap-background) / <alpha-value>)",
        foreground: "rgb(var(--ap-foreground) / <alpha-value>)",
        primary: {
          DEFAULT: "rgb(var(--ap-primary) / <alpha-value>)",
          foreground: "rgb(var(--ap-primary-foreground) / <alpha-value>)",
        },
        secondary: {
          DEFAULT: "rgb(var(--ap-secondary) / <alpha-value>)",
          foreground: "rgb(var(--ap-secondary-foreground) / <alpha-value>)",
        },
        muted: {
          DEFAULT: "rgb(var(--ap-muted) / <alpha-value>)",
          foreground: "rgb(var(--ap-muted-foreground) / <alpha-value>)",
        },
        border: "rgb(var(--ap-border) / <alpha-value>)",
        ring: "rgb(var(--ap-ring) / <alpha-value>)",
      },
    },
  },
}

All Color Tokens

Complete list of CSS variables used by popcn/ui.

:root {
  /* Core */
  --ap-background: 10 10 20;
  --ap-foreground: 250 250 255;

  /* Primary */
  --ap-primary: 99 102 241;
  --ap-primary-foreground: 255 255 255;

  /* Secondary */
  --ap-secondary: 168 85 247;
  --ap-secondary-foreground: 255 255 255;

  /* Aurora Gradient */
  --ap-aurora-1: 99 102 241;
  --ap-aurora-2: 139 92 246;
  --ap-aurora-3: 56 189 248;

  /* Utility */
  --ap-muted: 30 30 45;
  --ap-muted-foreground: 161 161 170;
  --ap-border: 63 63 70;
  --ap-ring: 99 102 241;

  /* Radius */
  --ap-radius: 0.75rem;
}