🆕 feat(Theme): add the surface-container color role

masastack · Sep 4, 2024 · 4913fb8 · 4913fb8
1 parent 2d64ba7
commit 4913fb8
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 8 deletions.
diff --git a/src/Masa.Blazor/Core/ThemeCssBuilder.cs b/src/Masa.Blazor/Core/ThemeCssBuilder.cs
@@ -42,14 +42,17 @@ public static string Build(Theme theme)
 
                   --m-theme-surface: {{options.Surface}};
                   --m-theme-on-surface: {{options.OnSurface}};
+                  --m-theme-surface-container: {{options.SurfaceContainer}};
                   --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-light-surface-container: {{light.SurfaceContainer}};
                   --m-theme-dark-surface: {{dark.Surface}};
                   --m-theme-dark-on-surface: {{dark.OnSurface}};
+                  --m-theme-dark-surface-container: {{dark.SurfaceContainer}};
                   --m-theme-light-inverse-surface: {{light.InverseSurface}};
                   --m-theme-light-inverse-on-surface: {{light.InverseOnSurface}};
                   --m-theme-light-inverse-primary: {{light.InversePrimary}};

diff --git a/src/Masa.Blazor/Services/MasaBlazorPreset.cs b/src/Masa.Blazor/Services/MasaBlazorPreset.cs
@@ -38,6 +38,7 @@ public static class MasaBlazorPreset
         OnWarning = "#FFFFFF",
         Surface = "#FFFFFF",
         OnSurface = "#000000DE",
+        SurfaceContainer = "#f5f5f5",
         InverseSurface = "#121212",
         InverseOnSurface = "#FFFFFF",
         InversePrimary = "#2196F3"
@@ -62,6 +63,7 @@ public static class MasaBlazorPreset
         OnWarning = "#FFFFFF",
         Surface = "#121212",
         OnSurface = "#FFFFFF",
+        SurfaceContainer = "#272727",
         InverseSurface = "#FFFFFF",
         InverseOnSurface = "#000000DE",
         InversePrimary = "#1976D2"

diff --git a/src/Masa.Blazor/Services/ThemeOptions.cs b/src/Masa.Blazor/Services/ThemeOptions.cs
@@ -39,6 +39,8 @@ public class ThemeOptions
 
     public string? OnSurface { get; set; }
 
+    public string? SurfaceContainer { get; set; }
+
     public string? InverseSurface { get; set; }
 
     public string? InverseOnSurface { get; set; }

diff --git a/src/Masa.Blazor/wwwroot/css/masa-blazor.css b/src/Masa.Blazor/wwwroot/css/masa-blazor.css
@@ -58,11 +58,11 @@
     }
 }
 .theme--light.m-app-bar.m-toolbar.m-sheet {
-    background-color: #f5f5f5;
+    background-color: var(--m-theme-light-surface-container);
 }
 
 .theme--dark.m-app-bar.m-toolbar.m-sheet {
-    background-color: #272727;
+    background-color: var(--m-theme-dark-surface-container);
 }
 
 .m-sheet.m-app-bar.m-toolbar {
@@ -24694,13 +24694,13 @@ html.overflow-y-hidden {
     padding: 3px 0;
 }
 .theme--light.m-footer {
-    background-color: #f5f5f5;
-    color: rgba(0, 0, 0, 0.87);
+    background-color: var(--m-theme-light-surface-container);
+    color: var(--m-theme-light-on-surface);
 }
 
 .theme--dark.m-footer {
-    background-color: #272727;
-    color: #FFFFFF;
+    background-color: var(--m-theme-dark-surface-container);
+    color: var(--m-theme-dark-on-surface);
 }
 
 .m-sheet.m-footer {

diff --git a/src/Masa.Blazor/wwwroot/css/masa-blazor.min.css b/src/Masa.Blazor/wwwroot/css/masa-blazor.min.css