kasy-cli 1.21.9 → 1.23.0

package/templates/firebase/lib/core/theme/colors.dart

@@ -1,224 +1,475 @@
 import 'package:flutter/material.dart';
 
-/// Kasy Design System — Color Tokens
+/// Kasy Design System — Color Tokens (HeroUI semantic model)
 ///
-/// Single source of truth for all colors in the app.
-/// To change a color across the entire app, change it here.
+/// Single source of truth for all colors in the app. Mirrors the HeroUI
+/// color system: a small, meaningful set of semantic roles (accent, default,
+/// success, warning, danger, foreground, background, surface, form field,
+/// separator) rather than a large raw palette. Each role exposes its base
+/// value plus `hover`, `soft`, `soft-hover` and `soft-foreground` variants
+/// where applicable, and resolves to a Light and a Dark theme.
 ///
 /// Usage via context extension:
-///   context.colors.primary
-///   context.colors.surfacePrimarySoft / .surfaceNeutralSoft / .surfaceErrorSoft
-///   context.colors.outlineButton
-///   context.colors.success / .muted
+///   context.colors.accent              → brand / accent color
+///   context.colors.accentSoft          → translucent accent fill
+///   context.colors.success / .warning / .danger
+///   context.colors.foreground / .foregroundMuted
+///   context.colors.surface / .surfaceSecondary
+///
+/// Legacy names (primary, onSurface, error, outline, …) remain available as
+/// aliases so existing components keep working.
 class KasyColors extends ThemeExtension<KasyColors> {
-  /// Vermelho de erro/danger — mesmo tom claro/escuro; vivo e saturado (#FF3B30, estilo sistema).
-  static const Color semanticError = Color(0xFFFF3B30);
+  /// Danger/error base (HeroUI danger, light). Kept for the few call sites that
+  /// need a const color outside of a theme context.
+  static const Color semanticError = Color(0xFFFF383C);
 
-  // --- Brand ---
-  final Color primary;
-  final Color onPrimary;
+  /// Best on-color (text/icon) to sit on top of a filled [fill]: near-white on
+  /// dark or saturated fills, near-black on light ones. Lets a fill change to
+  /// any hue while the text on top stays legible — no manual tuning needed.
+  ///
+  /// Prefers white down to a 3:1 contrast ratio (covers branded mid-tones like
+  /// blue, teal, violet, red), then flips to dark — which reproduces HeroUI's
+  /// own foreground choices for accent/success/warning/danger.
+  static Color onColor(Color fill) {
+    final double contrastWithWhite = 1.05 / (fill.computeLuminance() + 0.05);
+    return contrastWithWhite >= 3.0
+        ? const Color(0xFFFCFCFC)
+        : const Color(0xFF18181B);
+  }
 
-  // --- Backgrounds ---
-  final Color background;
-  final Color onBackground;
+  // --- Accent (brand / primary identity) ---
+  // Only [accent] is stored; foreground, hover and soft variants all derive
+  // from it (see getters below), so changing the brand color is a one-value edit.
+  final Color accent;
 
-  // --- Surfaces ---
-  final Color surface;
-  final Color onSurface;
+  // --- Default (neutral backbone) ---
+  final Color neutral;
+  final Color neutralHover;
+  final Color neutralForeground;
 
-  /// Filled tint behind primary-accent controls (pill “secondary”: pale blue /
-  /// light; charcoal tint / dark). Foreground stays [primary].
-  final Color surfacePrimarySoft;
+  // --- Success ---
+  final Color success;
+  final Color successForeground;
+  final Color successHover;
+  final Color successSoft;
+  final Color successSoftHover;
+  final Color successSoftForeground;
 
-  /// Filled neutral tint (“tertiary” row: light grey / light; charcoal / dark).
-  /// Foreground: [onSurface].
-  final Color surfaceNeutralSoft;
+  // --- Warning ---
+  final Color warning;
+  final Color warningForeground;
+  final Color warningHover;
+  final Color warningSoft;
+  final Color warningSoftHover;
+  final Color warningSoftForeground;
 
-  /// Destructive soft fill (“danger soft”: pale rose / light; saturated burgundy
-  /// / dark). Foreground stays [error].
-  final Color surfaceErrorSoft;
+  // --- Danger ---
+  final Color danger;
+  final Color dangerForeground;
+  final Color dangerHover;
+  final Color dangerSoft;
+  final Color dangerSoftHover;
+  final Color dangerSoftForeground;
 
-  /// Neutral fill for avatar icon/initials fallback and stacked “+N” (theme-aware).
-  final Color avatarFallbackFill;
+  // --- Foreground (text / icons) ---
+  final Color foreground;
+  final Color foregroundMuted;
+  final Color foregroundSegment;
+  final Color foregroundOverlay;
+  final Color foregroundLink;
+  final Color foregroundInverse;
 
-  // --- Semantic: Error ---
-  final Color error;
-  final Color onError;
+  // --- Background (base canvas) ---
+  final Color background;
+  final Color backgroundSecondary;
+  final Color backgroundTertiary;
+  final Color backgroundInverse;
 
-  // --- Semantic: Success ---
-  final Color success;
-  final Color onSuccess;
+  // --- Surface (containers: cards, panels, modals) ---
+  final Color surface;
+  final Color surfaceSecondary;
+  final Color surfaceTertiary;
+  final Color surfaceTransparent;
 
-  // --- Semantic: Warning ---
-  final Color warning;
-  final Color onWarning;
+  // --- Form field ---
+  final Color fieldBackground;
+  final Color fieldBackgroundHover;
+  final Color fieldBackgroundFocus;
+  final Color fieldPlaceholder;
+  final Color fieldForeground;
+  final Color fieldBorder;
+  final Color fieldBorderHover;
 
-  // --- Structural ---
-  /// Default divider / input borders.
-  final Color outline;
-  /// Pills/chips/outline buttons on canvas (readable in dark mode).
-  final Color outlineButton;
-  /// Secondary text / disabled state.
-  final Color muted;
+  // --- Separator (dividers, outlines) ---
+  final Color separator;
+  final Color separatorSecondary;
+  final Color separatorTertiary;
 
-  /// Form field labels ([KasyTextField], [KasyTextArea]): slightly darker than
-  /// [muted] in light mode, slightly lighter in dark mode.
-  Color get fieldLabel {
-    final bool isDark = background.computeLuminance() < 0.5;
-    return Color.lerp(muted, onSurface, isDark ? 0.36 : 0.28)!;
-  }
-
-  // --- Greys (legacy — prefer muted/outline for new code) ---
-  final Color grey1;
-  final Color grey2;
-  final Color grey3;
+  // --- Other (border, overlay, segment, backdrop) ---
+  final Color border;
+  final Color overlay;
+  final Color segment;
+  final Color backdrop;
 
-  // --- Premium (paywall visual identity) ---
-  final Color premiumOverlayMid;   // paywall background gradient — mid tone
-  final Color premiumOverlayDark;  // paywall background gradient — dark tone
-  final Color premiumBannerText;   // text color for the premium banner (PremiumWideBanner)
+  // --- Premium (paywall visual identity — app-specific, not a HeroUI role) ---
+  final Color premiumOverlayMid;
+  final Color premiumOverlayDark;
+  final Color premiumBannerText;
 
   const KasyColors({
-    required this.primary,
-    required this.onPrimary,
-    required this.background,
-    required this.onBackground,
-    required this.surface,
-    required this.onSurface,
-    required this.surfacePrimarySoft,
-    required this.surfaceNeutralSoft,
-    required this.surfaceErrorSoft,
-    required this.avatarFallbackFill,
-    required this.error,
-    required this.onError,
+    required this.accent,
+    required this.neutral,
+    required this.neutralHover,
+    required this.neutralForeground,
     required this.success,
-    required this.onSuccess,
+    required this.successForeground,
+    required this.successHover,
+    required this.successSoft,
+    required this.successSoftHover,
+    required this.successSoftForeground,
     required this.warning,
-    required this.onWarning,
-    required this.outline,
-    required this.outlineButton,
-    required this.muted,
-    required this.grey1,
-    required this.grey2,
-    required this.grey3,
+    required this.warningForeground,
+    required this.warningHover,
+    required this.warningSoft,
+    required this.warningSoftHover,
+    required this.warningSoftForeground,
+    required this.danger,
+    required this.dangerForeground,
+    required this.dangerHover,
+    required this.dangerSoft,
+    required this.dangerSoftHover,
+    required this.dangerSoftForeground,
+    required this.foreground,
+    required this.foregroundMuted,
+    required this.foregroundSegment,
+    required this.foregroundOverlay,
+    required this.foregroundLink,
+    required this.foregroundInverse,
+    required this.background,
+    required this.backgroundSecondary,
+    required this.backgroundTertiary,
+    required this.backgroundInverse,
+    required this.surface,
+    required this.surfaceSecondary,
+    required this.surfaceTertiary,
+    required this.surfaceTransparent,
+    required this.fieldBackground,
+    required this.fieldBackgroundHover,
+    required this.fieldBackgroundFocus,
+    required this.fieldPlaceholder,
+    required this.fieldForeground,
+    required this.fieldBorder,
+    required this.fieldBorderHover,
+    required this.separator,
+    required this.separatorSecondary,
+    required this.separatorTertiary,
+    required this.border,
+    required this.overlay,
+    required this.segment,
+    required this.backdrop,
     required this.premiumOverlayMid,
     required this.premiumOverlayDark,
     required this.premiumBannerText,
   });
 
   factory KasyColors.light() => const KasyColors(
-        primary: Color(0xFF1E88E5),
-        onPrimary: Color(0xFFFFFFFF),
+        // Accent — HeroUI blue.
+        accent: Color(0xFF0485F7),
+        // Default (neutrals).
+        neutral: Color(0xFFEBEBEC),
+        neutralHover: Color(0xFFE1E1E2),
+        neutralForeground: Color(0xFF18181B),
+        // Success.
+        success: Color(0xFF17C964),
+        successForeground: Color(0xFF18181B),
+        successHover: Color(0xFF21B55D),
+        successSoft: Color(0x2617C964),
+        successSoftHover: Color(0x3317C964),
+        successSoftForeground: Color(0xFF17C964),
+        // Warning.
+        warning: Color(0xFFF5A524),
+        warningForeground: Color(0xFF18181B),
+        warningHover: Color(0xFFDC952A),
+        warningSoft: Color(0x26F5A524),
+        warningSoftHover: Color(0x33DC952A),
+        warningSoftForeground: Color(0xFFF5A524),
+        // Danger.
+        danger: Color(0xFFFF383C),
+        dangerForeground: Color(0xFFFCFCFC),
+        dangerHover: Color(0xFFFF5551),
+        dangerSoft: Color(0x26FF383C),
+        dangerSoftHover: Color(0x33FF5551),
+        dangerSoftForeground: Color(0xFFFF383C),
+        // Foreground.
+        foreground: Color(0xFF18181B),
+        foregroundMuted: Color(0xFF71717A),
+        foregroundSegment: Color(0xFF18181B),
+        foregroundOverlay: Color(0xFF18181B),
+        foregroundLink: Color(0xFF18181B),
+        foregroundInverse: Color(0xFFFCFCFC),
+        // Background.
         // Also used by the native splash. When changing, update
         // `flutter_native_splash.color` in pubspec.yaml and run
         // `dart run flutter_native_splash:create`.
-        background: Color(0xFFF7F7F7),
-        onBackground: Color(0xFF000000),
+        background: Color(0xFFF5F5F5),
+        backgroundSecondary: Color(0xFFEBEBEB),
+        backgroundTertiary: Color(0xFFE1E1E1),
+        backgroundInverse: Color(0xFF18181B),
+        // Surface.
         surface: Color(0xFFFFFFFF),
-        onSurface: Color(0xFF000000),
-        surfacePrimarySoft: Color(0xFFDFE6F0),
-        surfaceNeutralSoft: Color(0xFFEFEFEF),
-        surfaceErrorSoft: Color(0xFFFFEBEE),
-        avatarFallbackFill: Color(0xFFF2F2F2),
-        error: KasyColors.semanticError,
-        onError: Color(0xFFFFFFFF),
-        success: Color(0xFF34C759),
-        onSuccess: Color(0xFFFFFFFF),
-        warning: Color(0xFFF57F17),
-        onWarning: Color(0xFFFFFFFF),
-        outline: Color(0xFFC6C6C8),
-        outlineButton: Color(0xFFB8BFC9),
-        muted: Color(0xFF7D8488),
-        grey1: Color(0xFFBEC1C3),
-        grey2: Color(0xFF7D8488),
-        grey3: Color(0xFF263238),
+        surfaceSecondary: Color(0xFFEFEFF0),
+        surfaceTertiary: Color(0xFFEAEAEB),
+        surfaceTransparent: Color(0x00FFFFFF),
+        // Form field.
+        fieldBackground: Color(0xFFFFFFFF),
+        fieldBackgroundHover: Color(0xEBF9F9F9),
+        fieldBackgroundFocus: Color(0xFFFFFFFF),
+        fieldPlaceholder: Color(0xFF71717A),
+        fieldForeground: Color(0xFF18181B),
+        fieldBorder: Color(0x00DEDEE0),
+        fieldBorderHover: Color(0x00C1C1C1),
+        // Separator.
+        separator: Color(0xFFE4E4E7),
+        separatorSecondary: Color(0xFFD7D7D7),
+        separatorTertiary: Color(0xFFCDCDCE),
+        // Other.
+        border: Color(0xFFDEDEE0),
+        overlay: Color(0xFFFFFFFF),
+        segment: Color(0xFFFFFFFF),
+        backdrop: Color(0x80000000),
+        // Premium (paywall).
         premiumOverlayMid: Color(0xFF9997A1),
         premiumOverlayDark: Color(0xFF130F26),
         premiumBannerText: Color(0xFF49250A),
       );
 
   factory KasyColors.dark() => const KasyColors(
-        primary: Color(0xFF1E88E5),
-        onPrimary: Color(0xFFFFFFFF),
+        // Accent — HeroUI blue (same hue, pops on the dark canvas).
+        accent: Color(0xFF0485F7),
+        // Default (neutrals).
+        neutral: Color(0xFF27272A),
+        neutralHover: Color(0xFF2E2E31),
+        neutralForeground: Color(0xFFFCFCFC),
+        // Success.
+        success: Color(0xFF17C964),
+        successForeground: Color(0xFF18181B),
+        successHover: Color(0xFF21B55D),
+        successSoft: Color(0x2617C964),
+        successSoftHover: Color(0x3317C964),
+        successSoftForeground: Color(0xFF17C964),
+        // Warning (brightened for dark).
+        warning: Color(0xFFF7B750),
+        warningForeground: Color(0xFF18181B),
+        warningHover: Color(0xFFDEA54C),
+        warningSoft: Color(0x26F7B750),
+        warningSoftHover: Color(0x33DEA54C),
+        warningSoftForeground: Color(0xFFF7B750),
+        // Danger (desaturated for dark).
+        danger: Color(0xFFDB3B3E),
+        dangerForeground: Color(0xFFFCFCFC),
+        dangerHover: Color(0xFFE15451),
+        dangerSoft: Color(0x26DB3B3E),
+        dangerSoftHover: Color(0x33E15451),
+        dangerSoftForeground: Color(0xFFDB3B3E),
+        // Foreground.
+        foreground: Color(0xFFFCFCFC),
+        foregroundMuted: Color(0xFFA1A1AA),
+        foregroundSegment: Color(0xFFFCFCFC),
+        foregroundOverlay: Color(0xFFFCFCFC),
+        foregroundLink: Color(0xFFFCFCFC),
+        foregroundInverse: Color(0xFF18181B),
+        // Background.
         // Also used by the native splash. When changing, update
         // `flutter_native_splash.color_dark` in pubspec.yaml and run
         // `dart run flutter_native_splash:create`.
-        background: Color(0xFF060608),
-        onBackground: Color(0xFFFAFAFA),
+        background: Color(0xFF060607),
+        backgroundSecondary: Color(0xFF0C0C0E),
+        backgroundTertiary: Color(0xFF131316),
+        backgroundInverse: Color(0xFFFCFCFC),
+        // Surface.
         surface: Color(0xFF18181B),
-        onSurface: Color(0xFFFFFFFF),
-        surfacePrimarySoft: Color(0xFF2C323A),
-        surfaceNeutralSoft: Color(0xFF232325),
-        surfaceErrorSoft: Color(0xFF3F2A2D),
-        avatarFallbackFill: Color(0xFF2C2C2E),
-        error: KasyColors.semanticError,
-        onError: Color(0xFFFFFFFF),
-        success: Color(0xFF30D158),
-        onSuccess: Color(0xFFFFFFFF),
-        warning: Color(0xFFFFCA28),
-        onWarning: Color(0xFF000000),
-        outline: Color(0xFF38383A),
-        outlineButton: Color(0x4DFFFFFF),
-        muted: Color(0xFF7D8488),
-        grey1: Color(0xFF263238),
-        grey2: Color(0xFF7D8488),
-        grey3: Color(0xFFBEC1C3),
+        surfaceSecondary: Color(0xFF232325),
+        surfaceTertiary: Color(0xFF262728),
+        surfaceTransparent: Color(0x00000000),
+        // Form field.
+        fieldBackground: Color(0xFF18181B),
+        fieldBackgroundHover: Color(0xEB1C1C1F),
+        fieldBackgroundFocus: Color(0xFF18181B),
+        fieldPlaceholder: Color(0xFFA1A1AA),
+        fieldForeground: Color(0xFFFCFCFC),
+        fieldBorder: Color(0x0028282C),
+        fieldBorderHover: Color(0x00464646),
+        // Separator.
+        separator: Color(0xFF1A1A1D),
+        separatorSecondary: Color(0xFF353538),
+        separatorTertiary: Color(0xFF3C3C3F),
+        // Other.
+        border: Color(0xFF28282C),
+        overlay: Color(0xFF18181B),
+        segment: Color(0xFF46464C),
+        backdrop: Color(0x80000000),
+        // Premium (paywall).
         premiumOverlayMid: Color(0xFF9997A1),
         premiumOverlayDark: Color(0xFF130F26),
         premiumBannerText: Color(0xFF49250A),
       );
 
+  // -------------------------------------------------------------------------
+  // Legacy aliases — keep existing components compiling. Prefer the HeroUI
+  // names above for new code.
+  // -------------------------------------------------------------------------
+
+  /// Text/icon color on top of [accent] — auto-derived from the accent's
+  /// luminance (white on dark/saturated accents, near-black on light ones),
+  /// so changing the accent hue alone always stays legible in both modes.
+  Color get accentForeground => onColor(accent);
+
+  /// Hover state for [accent] — a subtle lift toward white.
+  Color get accentHover => Color.lerp(accent, const Color(0xFFFFFFFF), 0.14)!;
+
+  /// Translucent accent fill (15%) for soft / secondary surfaces.
+  Color get accentSoft => accent.withValues(alpha: 0.15);
+
+  /// Hover state for [accentSoft] (20%).
+  Color get accentSoftHover => accent.withValues(alpha: 0.20);
+
+  /// Text / icon color on a soft accent fill — the accent itself.
+  Color get accentSoftForeground => accent;
+
+  Color get primary => accent;
+  Color get onPrimary => accentForeground;
+  Color get onBackground => foreground;
+  Color get onSurface => foreground;
+  Color get surfacePrimarySoft => accentSoft;
+  Color get surfaceNeutralSoft => neutral;
+  Color get surfaceErrorSoft => dangerSoft;
+  Color get avatarFallbackFill => surfaceSecondary;
+  Color get error => danger;
+  Color get onError => dangerForeground;
+  Color get onSuccess => successForeground;
+  Color get onWarning => warningForeground;
+  Color get outline => border;
+  Color get outlineButton => border;
+  Color get muted => foregroundMuted;
+  Color get grey1 => separatorSecondary;
+  Color get grey2 => foregroundMuted;
+  Color get grey3 => foreground;
+
+  /// Form field labels: slightly stronger than [foregroundMuted].
+  Color get fieldLabel {
+    final bool isDark = background.computeLuminance() < 0.5;
+    return Color.lerp(foregroundMuted, foreground, isDark ? 0.36 : 0.28)!;
+  }
+
   @override
   ThemeExtension<KasyColors> copyWith({
-    Color? primary,
-    Color? onPrimary,
-    Color? background,
-    Color? onBackground,
-    Color? surface,
-    Color? onSurface,
-    Color? surfacePrimarySoft,
-    Color? surfaceNeutralSoft,
-    Color? surfaceErrorSoft,
-    Color? avatarFallbackFill,
-    Color? error,
-    Color? onError,
+    Color? accent,
+    Color? neutral,
+    Color? neutralHover,
+    Color? neutralForeground,
     Color? success,
-    Color? onSuccess,
+    Color? successForeground,
+    Color? successHover,
+    Color? successSoft,
+    Color? successSoftHover,
+    Color? successSoftForeground,
     Color? warning,
-    Color? onWarning,
-    Color? outline,
-    Color? outlineButton,
-    Color? muted,
-    Color? grey1,
-    Color? grey2,
-    Color? grey3,
+    Color? warningForeground,
+    Color? warningHover,
+    Color? warningSoft,
+    Color? warningSoftHover,
+    Color? warningSoftForeground,
+    Color? danger,
+    Color? dangerForeground,
+    Color? dangerHover,
+    Color? dangerSoft,
+    Color? dangerSoftHover,
+    Color? dangerSoftForeground,
+    Color? foreground,
+    Color? foregroundMuted,
+    Color? foregroundSegment,
+    Color? foregroundOverlay,
+    Color? foregroundLink,
+    Color? foregroundInverse,
+    Color? background,
+    Color? backgroundSecondary,
+    Color? backgroundTertiary,
+    Color? backgroundInverse,
+    Color? surface,
+    Color? surfaceSecondary,
+    Color? surfaceTertiary,
+    Color? surfaceTransparent,
+    Color? fieldBackground,
+    Color? fieldBackgroundHover,
+    Color? fieldBackgroundFocus,
+    Color? fieldPlaceholder,
+    Color? fieldForeground,
+    Color? fieldBorder,
+    Color? fieldBorderHover,
+    Color? separator,
+    Color? separatorSecondary,
+    Color? separatorTertiary,
+    Color? border,
+    Color? overlay,
+    Color? segment,
+    Color? backdrop,
     Color? premiumOverlayMid,
     Color? premiumOverlayDark,
     Color? premiumBannerText,
   }) {
     return KasyColors(
-      primary: primary ?? this.primary,
-      onPrimary: onPrimary ?? this.onPrimary,
-      background: background ?? this.background,
-      onBackground: onBackground ?? this.onBackground,
-      surface: surface ?? this.surface,
-      onSurface: onSurface ?? this.onSurface,
-      surfacePrimarySoft: surfacePrimarySoft ?? this.surfacePrimarySoft,
-      surfaceNeutralSoft: surfaceNeutralSoft ?? this.surfaceNeutralSoft,
-      surfaceErrorSoft: surfaceErrorSoft ?? this.surfaceErrorSoft,
-      avatarFallbackFill: avatarFallbackFill ?? this.avatarFallbackFill,
-      error: error ?? this.error,
-      onError: onError ?? this.onError,
+      accent: accent ?? this.accent,
+      neutral: neutral ?? this.neutral,
+      neutralHover: neutralHover ?? this.neutralHover,
+      neutralForeground: neutralForeground ?? this.neutralForeground,
       success: success ?? this.success,
-      onSuccess: onSuccess ?? this.onSuccess,
+      successForeground: successForeground ?? this.successForeground,
+      successHover: successHover ?? this.successHover,
+      successSoft: successSoft ?? this.successSoft,
+      successSoftHover: successSoftHover ?? this.successSoftHover,
+      successSoftForeground:
+          successSoftForeground ?? this.successSoftForeground,
       warning: warning ?? this.warning,
-      onWarning: onWarning ?? this.onWarning,
-      outline: outline ?? this.outline,
-      outlineButton: outlineButton ?? this.outlineButton,
-      muted: muted ?? this.muted,
-      grey1: grey1 ?? this.grey1,
-      grey2: grey2 ?? this.grey2,
-      grey3: grey3 ?? this.grey3,
+      warningForeground: warningForeground ?? this.warningForeground,
+      warningHover: warningHover ?? this.warningHover,
+      warningSoft: warningSoft ?? this.warningSoft,
+      warningSoftHover: warningSoftHover ?? this.warningSoftHover,
+      warningSoftForeground:
+          warningSoftForeground ?? this.warningSoftForeground,
+      danger: danger ?? this.danger,
+      dangerForeground: dangerForeground ?? this.dangerForeground,
+      dangerHover: dangerHover ?? this.dangerHover,
+      dangerSoft: dangerSoft ?? this.dangerSoft,
+      dangerSoftHover: dangerSoftHover ?? this.dangerSoftHover,
+      dangerSoftForeground: dangerSoftForeground ?? this.dangerSoftForeground,
+      foreground: foreground ?? this.foreground,
+      foregroundMuted: foregroundMuted ?? this.foregroundMuted,
+      foregroundSegment: foregroundSegment ?? this.foregroundSegment,
+      foregroundOverlay: foregroundOverlay ?? this.foregroundOverlay,
+      foregroundLink: foregroundLink ?? this.foregroundLink,
+      foregroundInverse: foregroundInverse ?? this.foregroundInverse,
+      background: background ?? this.background,
+      backgroundSecondary: backgroundSecondary ?? this.backgroundSecondary,
+      backgroundTertiary: backgroundTertiary ?? this.backgroundTertiary,
+      backgroundInverse: backgroundInverse ?? this.backgroundInverse,
+      surface: surface ?? this.surface,
+      surfaceSecondary: surfaceSecondary ?? this.surfaceSecondary,
+      surfaceTertiary: surfaceTertiary ?? this.surfaceTertiary,
+      surfaceTransparent: surfaceTransparent ?? this.surfaceTransparent,
+      fieldBackground: fieldBackground ?? this.fieldBackground,
+      fieldBackgroundHover: fieldBackgroundHover ?? this.fieldBackgroundHover,
+      fieldBackgroundFocus: fieldBackgroundFocus ?? this.fieldBackgroundFocus,
+      fieldPlaceholder: fieldPlaceholder ?? this.fieldPlaceholder,
+      fieldForeground: fieldForeground ?? this.fieldForeground,
+      fieldBorder: fieldBorder ?? this.fieldBorder,
+      fieldBorderHover: fieldBorderHover ?? this.fieldBorderHover,
+      separator: separator ?? this.separator,
+      separatorSecondary: separatorSecondary ?? this.separatorSecondary,
+      separatorTertiary: separatorTertiary ?? this.separatorTertiary,
+      border: border ?? this.border,
+      overlay: overlay ?? this.overlay,
+      segment: segment ?? this.segment,
+      backdrop: backdrop ?? this.backdrop,
       premiumOverlayMid: premiumOverlayMid ?? this.premiumOverlayMid,
       premiumOverlayDark: premiumOverlayDark ?? this.premiumOverlayDark,
       premiumBannerText: premiumBannerText ?? this.premiumBannerText,
@@ -233,34 +484,83 @@ class KasyColors extends ThemeExtension<KasyColors> {
     if (other == null || other is! KasyColors) return this;
 
     return KasyColors(
-      primary: Color.lerp(primary, other.primary, t)!,
-      onPrimary: Color.lerp(onPrimary, other.onPrimary, t)!,
-      background: Color.lerp(background, other.background, t)!,
-      onBackground: Color.lerp(onBackground, other.onBackground, t)!,
-      surface: Color.lerp(surface, other.surface, t)!,
-      onSurface: Color.lerp(onSurface, other.onSurface, t)!,
-      surfacePrimarySoft:
-          Color.lerp(surfacePrimarySoft, other.surfacePrimarySoft, t)!,
-      surfaceNeutralSoft:
-          Color.lerp(surfaceNeutralSoft, other.surfaceNeutralSoft, t)!,
-      surfaceErrorSoft: Color.lerp(surfaceErrorSoft, other.surfaceErrorSoft, t)!,
-      avatarFallbackFill:
-          Color.lerp(avatarFallbackFill, other.avatarFallbackFill, t)!,
-      error: Color.lerp(error, other.error, t)!,
-      onError: Color.lerp(onError, other.onError, t)!,
+      accent: Color.lerp(accent, other.accent, t)!,
+      neutral: Color.lerp(neutral, other.neutral, t)!,
+      neutralHover: Color.lerp(neutralHover, other.neutralHover, t)!,
+      neutralForeground:
+          Color.lerp(neutralForeground, other.neutralForeground, t)!,
       success: Color.lerp(success, other.success, t)!,
-      onSuccess: Color.lerp(onSuccess, other.onSuccess, t)!,
+      successForeground:
+          Color.lerp(successForeground, other.successForeground, t)!,
+      successHover: Color.lerp(successHover, other.successHover, t)!,
+      successSoft: Color.lerp(successSoft, other.successSoft, t)!,
+      successSoftHover: Color.lerp(successSoftHover, other.successSoftHover, t)!,
+      successSoftForeground:
+          Color.lerp(successSoftForeground, other.successSoftForeground, t)!,
       warning: Color.lerp(warning, other.warning, t)!,
-      onWarning: Color.lerp(onWarning, other.onWarning, t)!,
-      outline: Color.lerp(outline, other.outline, t)!,
-      outlineButton: Color.lerp(outlineButton, other.outlineButton, t)!,
-      muted: Color.lerp(muted, other.muted, t)!,
-      grey1: Color.lerp(grey1, other.grey1, t)!,
-      grey2: Color.lerp(grey2, other.grey2, t)!,
-      grey3: Color.lerp(grey3, other.grey3, t)!,
-      premiumOverlayMid: Color.lerp(premiumOverlayMid, other.premiumOverlayMid, t)!,
-      premiumOverlayDark: Color.lerp(premiumOverlayDark, other.premiumOverlayDark, t)!,
-      premiumBannerText: Color.lerp(premiumBannerText, other.premiumBannerText, t)!,
+      warningForeground:
+          Color.lerp(warningForeground, other.warningForeground, t)!,
+      warningHover: Color.lerp(warningHover, other.warningHover, t)!,
+      warningSoft: Color.lerp(warningSoft, other.warningSoft, t)!,
+      warningSoftHover: Color.lerp(warningSoftHover, other.warningSoftHover, t)!,
+      warningSoftForeground:
+          Color.lerp(warningSoftForeground, other.warningSoftForeground, t)!,
+      danger: Color.lerp(danger, other.danger, t)!,
+      dangerForeground:
+          Color.lerp(dangerForeground, other.dangerForeground, t)!,
+      dangerHover: Color.lerp(dangerHover, other.dangerHover, t)!,
+      dangerSoft: Color.lerp(dangerSoft, other.dangerSoft, t)!,
+      dangerSoftHover: Color.lerp(dangerSoftHover, other.dangerSoftHover, t)!,
+      dangerSoftForeground:
+          Color.lerp(dangerSoftForeground, other.dangerSoftForeground, t)!,
+      foreground: Color.lerp(foreground, other.foreground, t)!,
+      foregroundMuted: Color.lerp(foregroundMuted, other.foregroundMuted, t)!,
+      foregroundSegment:
+          Color.lerp(foregroundSegment, other.foregroundSegment, t)!,
+      foregroundOverlay:
+          Color.lerp(foregroundOverlay, other.foregroundOverlay, t)!,
+      foregroundLink: Color.lerp(foregroundLink, other.foregroundLink, t)!,
+      foregroundInverse:
+          Color.lerp(foregroundInverse, other.foregroundInverse, t)!,
+      background: Color.lerp(background, other.background, t)!,
+      backgroundSecondary:
+          Color.lerp(backgroundSecondary, other.backgroundSecondary, t)!,
+      backgroundTertiary:
+          Color.lerp(backgroundTertiary, other.backgroundTertiary, t)!,
+      backgroundInverse:
+          Color.lerp(backgroundInverse, other.backgroundInverse, t)!,
+      surface: Color.lerp(surface, other.surface, t)!,
+      surfaceSecondary:
+          Color.lerp(surfaceSecondary, other.surfaceSecondary, t)!,
+      surfaceTertiary: Color.lerp(surfaceTertiary, other.surfaceTertiary, t)!,
+      surfaceTransparent:
+          Color.lerp(surfaceTransparent, other.surfaceTransparent, t)!,
+      fieldBackground: Color.lerp(fieldBackground, other.fieldBackground, t)!,
+      fieldBackgroundHover:
+          Color.lerp(fieldBackgroundHover, other.fieldBackgroundHover, t)!,
+      fieldBackgroundFocus:
+          Color.lerp(fieldBackgroundFocus, other.fieldBackgroundFocus, t)!,
+      fieldPlaceholder:
+          Color.lerp(fieldPlaceholder, other.fieldPlaceholder, t)!,
+      fieldForeground: Color.lerp(fieldForeground, other.fieldForeground, t)!,
+      fieldBorder: Color.lerp(fieldBorder, other.fieldBorder, t)!,
+      fieldBorderHover:
+          Color.lerp(fieldBorderHover, other.fieldBorderHover, t)!,
+      separator: Color.lerp(separator, other.separator, t)!,
+      separatorSecondary:
+          Color.lerp(separatorSecondary, other.separatorSecondary, t)!,
+      separatorTertiary:
+          Color.lerp(separatorTertiary, other.separatorTertiary, t)!,
+      border: Color.lerp(border, other.border, t)!,
+      overlay: Color.lerp(overlay, other.overlay, t)!,
+      segment: Color.lerp(segment, other.segment, t)!,
+      backdrop: Color.lerp(backdrop, other.backdrop, t)!,
+      premiumOverlayMid:
+          Color.lerp(premiumOverlayMid, other.premiumOverlayMid, t)!,
+      premiumOverlayDark:
+          Color.lerp(premiumOverlayDark, other.premiumOverlayDark, t)!,
+      premiumBannerText:
+          Color.lerp(premiumBannerText, other.premiumBannerText, t)!,
     );
   }
 }