cssVariables property

Map<String, String> get cssVariables

Generate CSS custom properties for the theme

Implementation

Map<String, String> get cssVariables {
  final cs = colorScheme;
  return {
    // Core color scheme
    '--arcane-primary': cs.primary.css,
    '--arcane-on-primary': cs.onPrimary.css,
    '--arcane-primary-container': cs.primaryContainer.css,
    '--arcane-on-primary-container': cs.onPrimaryContainer.css,
    '--arcane-secondary': cs.secondary.css,
    '--arcane-on-secondary': cs.onSecondary.css,
    '--arcane-secondary-container': cs.secondaryContainer.css,
    '--arcane-on-secondary-container': cs.onSecondaryContainer.css,
    '--arcane-tertiary': cs.tertiary.css,
    '--arcane-on-tertiary': cs.onTertiary.css,
    '--arcane-error': cs.error.css,
    '--arcane-on-error': cs.onError.css,
    '--arcane-background': cs.background.css,
    '--arcane-on-background': cs.onBackground.css,
    '--arcane-surface': cs.surface.css,
    '--arcane-on-surface': cs.onSurface.css,
    '--arcane-surface-variant': cs.surfaceVariant.css,
    '--arcane-on-surface-variant': cs.onSurfaceVariant.css,
    '--arcane-outline': cs.outline.css,
    '--arcane-outline-variant': cs.outlineVariant.css,
    '--arcane-shadow': cs.shadow.css,
    '--arcane-scrim': cs.scrim.withOpacity(0.5).css,
    '--arcane-inverse-surface': cs.inverseSurface.css,
    '--arcane-on-inverse-surface': cs.onInverseSurface.css,
    '--arcane-surface-tint': cs.surfaceTint.css,

    // Accent colors (for Supabase-style theming)
    '--arcane-accent': accentPrimary.css,
    '--arcane-accent-hover': accentHover.css,
    '--arcane-accent-container': accentContainer.css,
    '--arcane-accent-foreground': brightness == Brightness.dark
        ? Colors.zinc950.css
        : Colors.white.css,

    // Muted/secondary text
    '--arcane-muted': cs.onSurfaceVariant.css,
    '--arcane-muted-foreground': brightness == Brightness.dark
        ? Colors.zinc400.css
        : Colors.zinc500.css,

    // Card styling
    '--arcane-card': cs.surface.css,
    '--arcane-card-foreground': cs.onSurface.css,

    // Border colors
    '--arcane-border': cs.outline.css,
    '--arcane-border-subtle': cs.outlineVariant.css,

    // Input styling
    '--arcane-input': cs.surfaceVariant.css,
    '--arcane-input-foreground': cs.onSurface.css,

    // Ring/focus color
    '--arcane-ring': cs.primary.css,

    // Destructive colors
    '--arcane-destructive': brightness == Brightness.dark
        ? Colors.red400.css
        : Colors.red600.css,
    '--arcane-destructive-foreground': Colors.white.css,

    // Success colors
    '--arcane-success': brightness == Brightness.dark
        ? Colors.emerald400.css
        : Colors.emerald600.css,
    '--arcane-success-foreground': Colors.white.css,

    // Warning colors
    '--arcane-warning': brightness == Brightness.dark
        ? Colors.amber400.css
        : Colors.amber600.css,
    '--arcane-warning-foreground': brightness == Brightness.dark
        ? Colors.zinc950.css
        : Colors.zinc950.css,

    // Info colors
    '--arcane-info': brightness == Brightness.dark
        ? Colors.cyan400.css
        : Colors.cyan600.css,
    '--arcane-info-foreground': Colors.white.css,

    // Border radius
    '--arcane-radius': borderRadiusCss,
    '--arcane-radius-sm': '${borderRadiusPx * 0.5}px',
    '--arcane-radius-md': '${borderRadiusPx}px',
    '--arcane-radius-lg': '${borderRadiusPx * 1.5}px',
    '--arcane-radius-xl': '${borderRadiusPx * 2}px',
    '--arcane-radius-2xl': '${borderRadiusPx * 3}px',
    '--arcane-radius-full': '9999px',

    // Scaling and effects
    '--arcane-scaling': '$scaling',
    '--arcane-surface-opacity': '$effectiveSurfaceOpacity',
    '--arcane-surface-blur': '${surfaceBlur}px',
    '--arcane-barrier-color': barrierColors.dialog.css,

    // Shadows (Supabase-style)
    '--arcane-shadow-sm': '0 1px 2px rgba(0, 0, 0, 0.05)',
    '--arcane-shadow': brightness == Brightness.dark
        ? '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2)'
        : '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
    '--arcane-shadow-lg': brightness == Brightness.dark
        ? '0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)'
        : '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
    '--arcane-shadow-xl': brightness == Brightness.dark
        ? '0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3)'
        : '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',

    // Transition defaults
    '--arcane-transition-fast': '150ms ease',
    '--arcane-transition': '200ms ease',
    '--arcane-transition-slow': '300ms ease',
  };
}