Colors

Acopl UI uses a two-layer token system: raw palette (SASS variables) and semantic tokens (CSS Custom Properties).

Brand colors (invariant)

These never change between themes:

Token	Value	Usage
`--ac-primary`	`#2563EB`	Blue — links, focus, primary actions
`--ac-action`	`#F97316` (dark) / `#EA580C` (light)	Orange — CTAs, buttons
`--ac-success`	`#10B981` (dark) / `#059669` (light)	Green — success states
`--ac-danger`	`#EF4444`	Red — errors, destructive actions

Slate palette

The full Slate palette is available as raw SCSS variables ($color-slate-*) for use in SASS files:

Variable	Value
`$color-slate-50`	`#F8FAFC`
`$color-slate-100`	`#F1F5F9`
`$color-slate-200`	`#E2E8F0`
`$color-slate-300`	`#CBD5E1`
`$color-slate-400`	`#94A3B8`
`$color-slate-500`	`#64748B`
`$color-slate-600`	`#475569`
`$color-slate-700`	`#334155`
`$color-slate-800`	`#1E293B`
`$color-slate-900`	`#0F172A`
`$color-slate-950`	`#020617`

Semantic background tokens

Token	Dark	Light
`--ac-bg`	`#020617`	`#F8FAFC`
`--ac-surface`	`#0F172A`	`#FFFFFF`
`--ac-surface-2`	`#1E293B`	`#F1F5F9`

Semantic text tokens

Token	Dark	Light
`--ac-text`	`#E2E8F0`	`#1E293B`
`--ac-text-muted`	`#94A3B8`	`#64748B`
`--ac-text-subtle`	`#475569`	`#94A3B8`

Semantic border tokens

Token	Dark	Light
`--ac-border`	`rgba(255,255,255,0.1)`	`rgba(0,0,0,0.1)`
`--ac-border-strong`	`rgba(255,255,255,0.2)`	`rgba(0,0,0,0.2)`
`--ac-border-focus`	`#2563EB`	`#2563EB`

State colors (for alerts, banners)

State	Background	Border	Text
success	`--ac-success-bg`	`--ac-success-border`	`--ac-success-text`
warning	`--ac-warning-bg`	`--ac-warning-border`	`--ac-warning-text`
info	`--ac-info-bg`	`--ac-info-border`	`--ac-info-text`
danger	`--ac-danger-bg`	`--ac-danger-border`	`--ac-danger-text`

Usage in CSS

.my-element {
  /* Always use semantic tokens in your CSS */
  background: var(--ac-surface);
  color: var(--ac-text);
  border: 1px solid var(--ac-border);
}

/* Brand colors */
.highlight {
  color: var(--ac-action);  /* orange */
}

Usage in JavaScript

import { colors } from 'https://ui.acopl.ar/v2.0.0/tokens.js';

colors.brand.orange  // '#F97316'
colors.brand.blue    // '#2563EB'
colors.slate[900]    // '#0F172A'