@aircall/blocks/dist/theme.css

Aircall Blocks — higher-level UI compositions built on @aircall/ds

/*
 * Blocks theme definitions — no Preflight, no utility classes. Contains only the
 * non-utility CSS that @source scanning cannot regenerate: blocks-specific design
 * tokens, keyframes, @theme inline mappings, and raw component layout rules.
 *
 * This is the single non-utility artifact a single-compilation consumer needs for
 * blocks, alongside @aircall/ds/theme.css and their own Tailwind compilation.
 * Blocks tokens reference DS tokens (var(--background), var(--color-charcoal-*), …),
 * so @aircall/ds/theme.css must be imported before this file.
 *
 * globals.css re-exposes this via its own `@import './theme.css'`, so the
 * precompiled blocks delta bundle is unchanged.
 *
 * Usage (single-compilation consumer):
 *   @import 'tailwindcss';               // Preflight + the utility engine
 *   @import '@aircall/ds/theme.css';     // DS tokens + dark variant + base reset
 *   @import '@aircall/blocks/theme.css'; // blocks tokens + keyframes + layout
 *   @source '../node_modules/@aircall/ds';
 *   @source '../node_modules/@aircall/blocks';
 */

/* ---------------------------------------------------------------------------
   DashboardSidebar design tokens
   Follows the exact same pattern as ds sidebar-* tokens: CSS variables with
   explicit light/dark values under [data-theme='dark'], mapped to Tailwind
   utilities via @theme inline.
   --------------------------------------------------------------------------- */

@layer theme {
  :root,
  :host {
    /* Dashboard page canvas */
    --page-background: var(--color-neutral-200);

    /* Standalone-page content panel surface — one notch off `background`, sitting
       between the page canvas and a white/neutral Card so header, panel body, and
       Cards read as three distinct surfaces. Derived via color-mix of the DS
       `background`/`muted` tokens, so it auto-adapts per theme (both flip): resolves
       to #f7f8fb in light and #212327 in dark. Defined once — the inner var()s
       resolve against the active theme at use-time, so no dark override is needed. */
    --page-surface: color-mix(in srgb, var(--background), var(--muted));

    /* Product & role badge overlay — white tint in light mode, dark tint in dark mode.
       Combined with each badge's accent color via CSS background-image gradient. */
    --badge-overlay: rgba(255, 255, 255, 0.7);

    /* Add-on accents — one colour per paid add-on, mirroring Figma's `custom/add-on/*`
       variables. Shared by LicenseBadge and LicenseAlert so an add-on's colour is
       written down once. WhatsApp and AIVA are brand colours and hold across themes;
       the others lighten below so they stay legible against a dark surface. */
    --add-on-ai-assist-pro: var(--color-blue-700);
    --add-on-analytics-plus: var(--color-blue-700);
    --add-on-surveys: var(--color-purple-600);
    --add-on-whatsapp: #25d366;
    --add-on-aiva: var(--color-green-300);

    /* DashboardSidebar — dark-navy design */
    --navbar-foreground: var(--color-charcoal-800);
    --navbar-accent: var(--color-charcoal-800);
    --navbar-accent-foreground: #fff;
    --navbar-icon-bg: #fff;
  }

  [data-theme='dark'],
  [data-theme='dark'] * {
    /* Dashboard page canvas — dark equivalent */
    --page-background: var(--color-neutral-900);
    /* Badge overlay flips to dark tint */
    --badge-overlay: rgba(10, 10, 10, 0.7);

    /* Add-on accents — only the palette-derived ones shift. WhatsApp and AIVA are
       brand colours and are deliberately absent here. */
    --add-on-ai-assist-pro: var(--color-blue-400);
    --add-on-analytics-plus: var(--color-blue-400);
    --add-on-surveys: var(--color-purple-300);

    /* DashboardSidebar — keep the navy identity but ensure readability */
    --navbar-foreground: var(--color-charcoal-100);
    --navbar-accent: var(--color-charcoal-600);
    --navbar-accent-foreground: #fff;
    --navbar-icon-bg: var(--color-charcoal-700);
  }
}

/* ---------------------------------------------------------------------------
   ChatbotResponseLoading — shimmer sweep keyframe
   --------------------------------------------------------------------------- */

@keyframes chatbot-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@theme inline {
  --animate-chatbot-shimmer: chatbot-shimmer 2s linear infinite;
  --color-page-background: var(--page-background);
  --color-page-surface: var(--page-surface);
  --color-navbar-foreground: var(--navbar-foreground);
  --color-navbar-accent: var(--navbar-accent);
  --color-navbar-accent-foreground: var(--navbar-accent-foreground);
  --color-navbar-icon-bg: var(--navbar-icon-bg);
  --color-add-on-ai-assist-pro: var(--add-on-ai-assist-pro);
  --color-add-on-analytics-plus: var(--add-on-analytics-plus);
  --color-add-on-surveys: var(--add-on-surveys);
  --color-add-on-whatsapp: var(--add-on-whatsapp);
  --color-add-on-aiva: var(--add-on-aiva);
}

/* ---------------------------------------------------------------------------
   DashboardPageHeader — CSS Grid areas
   Two rows: nav (full-width) + prefix | info | actions (single row always).
   Secondary icon buttons collapse into a "⋯" dropdown via JS (useActionsOverflow)
   rather than wrapping to a new row. The title truncates as the container shrinks.
   --------------------------------------------------------------------------- */

[data-slot="dph-grid"] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "nav nav nav"
    "prefix info actions";
  width: 100%;
}