Shadows & Glows

Shadow tokens

Token	Usage
--ac-shadow-card	Cards, panels, modals
--ac-shadow-dropdown	Dropdowns, tooltips, popovers
--ac-shadow-button	Primary action buttons
--ac-glow-blue	Blue ambient glow effects
--ac-glow-orange	Orange ambient glow effects
--ac-glow-green	Green ambient glow effects

Usage

.my-panel {
  box-shadow: var(--ac-shadow-card);
}

.my-hero-glow {
  position: absolute;
  background: var(--ac-primary);
  filter: blur(64px);
  opacity: 0.15;
}

In JavaScript

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

shadows.card        // '0 25px 50px -12px rgba(0, 0, 0, 0.5)'
shadows.glow.blue   // '0 0 40px rgba(37, 99, 235, 0.3)'
shadows.glow.orange // '0 0 40px rgba(249, 115, 22, 0.3)'