🆕 feat(Theme): add OnError, OnInfo, OnSuccess, OnWarning, InverseSurface, InverseOnSurface and InversePrimary colo roles (#599)

Author: capdiem

src/Component/BlazorComponent/Abstracts/Builder/ThemeCssBuilder.cs

@@ -20,8 +20,6 @@ public string Build(Theme theme)
                 $$"""
                   :root {
                       color-scheme: {{(isDark ? "dark" : "normal")}};
-                      --m-theme-surface: {{options.Surface}};
-                      --m-theme-on-surface: {{options.OnSurface}};
                       --m-theme-primary: {{options.Primary}};
                       --m-theme-primary-text: {{options.Primary}};
                       --m-theme-on-primary: {{options.OnPrimary}};
@@ -33,27 +31,43 @@ public string Build(Theme theme)
                       --m-theme-on-accent: {{options.OnAccent}};
                       --m-theme-error: {{options.Error}};
                       --m-theme-error-text: {{options.Error}};
+                      --m-theme-on-error: {{options.OnError}};
                       --m-theme-info: {{options.Info}};
                       --m-theme-info-text: {{options.Info}};
+                      --m-theme-on-info: {{options.OnInfo}};
                       --m-theme-success: {{options.Success}};
                       --m-theme-success-text: {{options.Success}};
+                      --m-theme-on-success: {{options.OnSuccess}};
                       --m-theme-warning: {{options.Warning}};
                       --m-theme-warning-text: {{options.Warning}};
+                      --m-theme-on-warning: {{options.OnWarning}};
+
+                      --m-theme-surface: {{options.Surface}};
+                      --m-theme-on-surface: {{options.OnSurface}};
+                      --m-theme-inverse-surface: {{options.InverseSurface}};
+                      --m-theme-inverse-on-surface: {{options.InverseOnSurface}};
+                      --m-theme-inverse-primary: {{options.InversePrimary}};
 
                       --m-theme-light-surface: {{light.Surface}};
                       --m-theme-light-on-surface: {{light.OnSurface}};
                       --m-theme-dark-surface: {{dark.Surface}};
                       --m-theme-dark-on-surface: {{dark.OnSurface}};
+                      --m-theme-light-inverse-surface: {{light.InverseSurface}};
+                      --m-theme-light-inverse-on-surface: {{light.InverseOnSurface}};
+                      --m-theme-light-inverse-primary: {{light.InversePrimary}};
+                      --m-theme-dark-inverse-surface: {{dark.InverseSurface}};
+                      --m-theme-dark-inverse-on-surface: {{dark.InverseOnSurface}};
+                      --m-theme-dark-inverse-primary: {{dark.InversePrimary}};
                   }
                   """,
                 $"{combinePrefix}a {{ color: {options.Primary}; }}",
                 Build(combinePrefix, nameof(options.Primary).ToLowerInvariant(), hasOnColor: true),
                 Build(combinePrefix, nameof(options.Secondary).ToLowerInvariant(), hasOnColor: true),
                 Build(combinePrefix, nameof(options.Accent).ToLowerInvariant(), hasOnColor: true),
-                Build(combinePrefix, nameof(options.Info).ToLowerInvariant()),
-                Build(combinePrefix, nameof(options.Success).ToLowerInvariant()),
-                Build(combinePrefix, nameof(options.Warning).ToLowerInvariant()),
-                Build(combinePrefix, nameof(options.Error).ToLowerInvariant()),
+                Build(combinePrefix, nameof(options.Info).ToLowerInvariant(), hasOnColor: true),
+                Build(combinePrefix, nameof(options.Success).ToLowerInvariant(), hasOnColor: true),
+                Build(combinePrefix, nameof(options.Warning).ToLowerInvariant(), hasOnColor: true),
+                Build(combinePrefix, nameof(options.Error).ToLowerInvariant(), hasOnColor: true),
                 Build(combinePrefix, nameof(options.Surface).ToLowerInvariant(), hasOnColor: true),
             };
 
@@ -78,6 +92,7 @@ private string Build(string combinePrefix, string selector, bool hasOnColor = fa
             if (hasOnColor)
             {
                 stringBuilder.Append($"""
+
                                       color: var(--m-theme-on-{selector}) !important;
                                       """);
             }

src/Component/BlazorComponent/Services/ThemeOptions.cs

@@ -5,11 +5,11 @@ public class ThemeOptions
     public string? CombinePrefix { get; set; }
 
     public string? Primary { get; set; }
-    
+
     public string? OnPrimary { get; set; }
 
     public string? Secondary { get; set; }
-    
+
     public string? OnSecondary { get; set; }
 
     /// <summary>
@@ -21,16 +21,30 @@ public class ThemeOptions
 
     public string? Error { get; set; }
 
+    public string? OnError { get; set; }
+
     public string? Info { get; set; }
 
+    public string? OnInfo { get; set; }
+
     public string? Success { get; set; }
 
+    public string? OnSuccess { get; set; }
+
     public string? Warning { get; set; }
-    
+
+    public string? OnWarning { get; set; }
+
     public string? Surface { get; set; }
-    
+
     public string? OnSurface { get; set; }
 
+    public string? InverseSurface { get; set; }
+
+    public string? InverseOnSurface { get; set; }
+
+    public string? InversePrimary { get; set; }
+
     public Dictionary<string, string> UserDefined { get; } = new();
 }
 
@@ -45,7 +59,7 @@ public Theme(bool dark, ThemeOptions lightTheme, ThemeOptions darkTheme)
     public bool Dark { get; set; }
 
     public Themes Themes { get; }
-    
+
     public ThemeOptions CurrentTheme => Dark ? Themes.Dark : Themes.Light;
 }
 
@@ -60,4 +74,4 @@ public Themes(ThemeOptions light, ThemeOptions dark)
     public ThemeOptions Dark { get; }
 
     public ThemeOptions Light { get; }
-}
+}