Deploying to gh-pages from @ 704d66a 🚀

Author: datvm

BlazorMaterialWeb.Demo.styles.css

@@ -65,13 +65,10 @@
     align-items: stretch;
 }
 
-    .page-content-container .page-content-elevation[b-k68xj1x1tp] {
+    .page-content-container .page-content-card[b-k68xj1x1tp] {
         flex-grow: 1;
-        position: relative;
-        border-radius: var(--catalog-shape-m, .75rem);
         min-height: 0;
         height: 100%;
-        background-color: var(--md-sys-color-surface);
     }
 
 .page-content[b-k68xj1x1tp] {

_content/BlazorMaterialWeb.Bundled/webmaterial.esm.min.js

@@ -1,3 +1,12 @@
+/* _content/BlazorMaterialWeb/MdCard.razor.rz.scp.css */
+.blazor-md-card-container[b-m55l6ki6s5] {
+}
+
+.blazor-md-card[b-m55l6ki6s5] {
+    position: relative;
+    border-radius: var(--catalog-shape-m, .75rem);
+    background-color: var(--md-sys-color-surface);
+}
 /* _content/BlazorMaterialWeb/MdIconInline.razor.rz.scp.css */
 .material-symbols-sharp[b-8d5skke0e8],
 .material-symbols-rounded[b-8d5skke0e8],

_content/BlazorMaterialWeb/BlazorMaterialWeb.bundle.scp.css

@@ -0,0 +1,88 @@
+body {
+    background-color: var(--md-sys-color-surface-container);
+    color: var(--md-sys-color-on-surface);
+}
+
+:root, :host {
+    font-family: var(--md-ref-typeface-plain);
+    --md-ref-typeface-plain: Roboto,system-ui;
+    --md-sys-color-background: #f5fbf1;
+    --md-sys-color-on-background: #171d17;
+    --md-sys-color-surface: #f5fbf1;
+    --md-sys-color-surface-dim: #d5dcd2;
+    --md-sys-color-surface-bright: #f5fbf1;
+    --md-sys-color-surface-container-lowest: #ffffff;
+    --md-sys-color-surface-container-low: #eff6eb;
+    --md-sys-color-surface-container: #e9f0e5;
+    --md-sys-color-surface-container-high: #e4eae0;
+    --md-sys-color-surface-container-highest: #dee4da;
+    --md-sys-color-on-surface: #171d17;
+    --md-sys-color-surface-variant: #d9e6d6;
+    --md-sys-color-on-surface-variant: #3e4a3e;
+    --md-sys-color-inverse-surface: #2c322b;
+    --md-sys-color-inverse-on-surface: #ecf3e8;
+    --md-sys-color-outline: #6e7a6d;
+    --md-sys-color-outline-variant: #bdcaba;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #006e2e;
+    --md-sys-color-primary: #006e2e;
+    --md-sys-color-on-primary: #ffffff;
+    --md-sys-color-primary-container: #78e98d;
+    --md-sys-color-on-primary-container: #00481c;
+    --md-sys-color-inverse-primary: #6cdd83;
+    --md-sys-color-secondary: #3f6744;
+    --md-sys-color-on-secondary: #ffffff;
+    --md-sys-color-secondary-container: #c2f0c3;
+    --md-sys-color-on-secondary-container: #2a5130;
+    --md-sys-color-tertiary: #00687a;
+    --md-sys-color-on-tertiary: #ffffff;
+    --md-sys-color-tertiary-container: #6ae1ff;
+    --md-sys-color-on-tertiary-container: #004451;
+    --md-sys-color-error: #ba1a1a;
+    --md-sys-color-on-error: #ffffff;
+    --md-sys-color-error-container: #ffdad6;
+    --md-sys-color-on-error-container: #410002;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root, :host {
+        --md-sys-color-background: #0f150f;
+        --md-sys-color-on-background: #dee4da;
+        --md-sys-color-surface: #0f150f;
+        --md-sys-color-surface-dim: #0f150f;
+        --md-sys-color-surface-bright: #343b34;
+        --md-sys-color-surface-container-lowest: #0a100a;
+        --md-sys-color-surface-container-low: #171d17;
+        --md-sys-color-surface-container: #1b211b;
+        --md-sys-color-surface-container-high: #252c25;
+        --md-sys-color-surface-container-highest: #30362f;
+        --md-sys-color-on-surface: #dee4da;
+        --md-sys-color-surface-variant: #3e4a3e;
+        --md-sys-color-on-surface-variant: #bdcaba;
+        --md-sys-color-inverse-surface: #dee4da;
+        --md-sys-color-inverse-on-surface: #2c322b;
+        --md-sys-color-outline: #889486;
+        --md-sys-color-outline-variant: #3e4a3e;
+        --md-sys-color-shadow: #000000;
+        --md-sys-color-scrim: #000000;
+        --md-sys-color-surface-tint: #6cdd83;
+        --md-sys-color-primary: #baffbf;
+        --md-sys-color-on-primary: #003914;
+        --md-sys-color-primary-container: #6adb81;
+        --md-sys-color-on-primary-container: #003e17;
+        --md-sys-color-inverse-primary: #006e2e;
+        --md-sys-color-secondary: #a5d2a6;
+        --md-sys-color-on-secondary: #0f3819;
+        --md-sys-color-secondary-container: #1f4727;
+        --md-sys-color-on-secondary-container: #b2dfb3;
+        --md-sys-color-tertiary: #d6f5ff;
+        --md-sys-color-on-tertiary: #003641;
+        --md-sys-color-tertiary-container: #2fd7fa;
+        --md-sys-color-on-tertiary-container: #003b47;
+        --md-sys-color-error: #ffb4ab;
+        --md-sys-color-on-error: #690005;
+        --md-sys-color-error-container: #93000a;
+        --md-sys-color-on-error-container: #ffdad6;
+    }
+}