added card colors in json

src/_data/catalog/index.json

@@ -35,22 +35,30 @@
     "description": "Visual, behavioral, and motion-rich widgets implementing the <a href=\"https://material.io/design/guidelines-overview\">Material 3 Design guidelines</a>.",
     "subcategories": [
       {
-        "name": "Actions"
+        "name": "Actions",
+        "color": "#D9E7CB"
       },
       {
-        "name": "Communication"
+        "name": "Communication",
+        "color": "#F9DBDA"
       },
       {
-        "name": "Containment"
+        "name": "Containment",
+        "color": "#F9DBDA"
       },
       {
-        "name": "Navigation"
+        "name": "Navigation",
+        "color": "#E5E4C2"
+
       },
       {
-        "name": "Selection"
+        "name": "Selection",
+        "color": "#D9E7CB"
+
       },
       {
-        "name": "Text Inputs"
+        "name": "Text Inputs",
+        "color": "#E5E4C2"
       }
     ],
     "id": "material3"

src/_data/catalog/widgets.json

@@ -415,14 +415,14 @@
   },
   {
     "name": "Common Buttons",
-    "description": "<b>Hover for Dark mode</b><br /><br />Buttons help people take action, such as sending an email, sharing a document, or liking a comment.",
+    "description": "Buttons help people take action, such as sending an email, sharing a document, or liking a comment.",
     "categories": [],
     "subcategories": [
       "Actions"
     ],
     "link": "https://api.flutter.dev/flutter/material/ButtonStyle-class.html",
-    "image": "/assets/images/docs/widget-catalog/material-3-buttons.png",
-    "darkimage": "/assets/images/docs/widget-catalog/material-3-buttons-dark.png'>",
+    "image": "<img class='m3-img' alt='' src='/assets/images/docs/widget-catalog/material-3-buttons.png'>",
+    "darkimage": "<img class='m3-img' alt='' src='/assets/images/docs/widget-catalog/material-3-buttons-dark.png'>",
     "hoverimage": "<img alt='' src='/assets/images/docs/widget-catalog/material-3-leaves.png'>"
   },
   {

src/_includes/docs/catalogpage-material-3.html

@@ -70,10 +70,12 @@
         <h2 id="{{sub.name}}">{{sub.name}}</h2>
         <div class="card-deck card-deck--responsive">
             {% for comp in components -%}
+
                 <div class="card">
                     <a href="{{comp.link}}">
-                        <div class="card-image-holder-material-3">
-                            <img class="m3-img" src="{{ comp.image }}" alt= ''/>
+
+                        <div class="card-image-holder-material-3" style="--bg-color: {{sub.color}}">
+                                {{ comp.image }}
                             <div class="card-image-material-3-hover">
                                 {{comp.hoverimage}}
                             </div>

src/_sass/base/_base.scss

@@ -71,31 +71,31 @@ dd {
   float: right;
   right: 50px;
   position: absolute;
+
+  .m3-widget-brightness-icon {
+    position: relative;
+    top: 8px;
+    left: 8px;
+  }
 }
 
 .m3-widget-brightness-icon-container:hover {
   background-color: $site-color-material-3-grey-hover;
 }
 
-.m3-widget-brightness-icon {
-position:relative;
-  top: 8px;
-  left: 8px;
-}
-
 .card-image-holder-material-3 {
   align-items: center;
   z-index: -1;
-  background-color: $site-color-material-3-green;
   background-size: 0%;
   opacity: .999;
-}
+  background-color: var(--bg-color, blue);
 
-.m3-img {
-  max-width: 100%;
-  max-height: 100%;
-  width: auto;
-  z-index: 1;
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    z-index: 1;
+  }
 }
 
 .card-image-material-3-hover {