@wavemaker/foundation-css 11.15.1-rc.248 → 11.15.2-rc.249

package/src/tokens/mobile/components/calendar/calendar.json

@@ -8,30 +8,30 @@
       }
     },
     "mapping": {
-      "view": {
+      "wrapper": {
         "shadow": {
           "value": "{elevation.shadow.1.value}",
           "type": "radius",
           "attributes": {
             "subtype": "elevation",
-            "description": "Controls the drop shadow effect around the calendar view. This creates a subtle elevation effect that makes the calendar appear to float above the background.<br>CSS variable: --wm-calendar-view-shadow"
+            "description": "Applies a shadow effect around the calendar container to create depth and visual hierarchy. Higher elevation values create more pronounced shadows.<br>CSS variable: --wm-calendar-wrapper-shadow"
           }
         },
         "border": {
-          "@": {
+          "color": {
             "value": "{color.border.translucent.value}",
-            "type": "radius",
+            "type": "color",
             "attributes": {
               "subtype": "color",
-              "description": "Sets the border color of the calendar view. This determines what color the border around the calendar appears in.<br>CSS variable: --wm-calendar-view-border"
+              "description": "Sets the color of the border surrounding the calendar container. This affects the outer edge of the entire calendar component.<br>CSS variable: --wm-calendar-wrapper-border-color"
             }
           },
           "style": {
             "value": "{border.style.base.value}",
-            "type": "radius",
+            "type": "border-style",
             "attributes": {
               "subtype": "border-style",
-              "description": "Sets the border style of the calendar view. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-calendar-view-border-style"
+              "description": "Defines the style of the calendar's border. Available options: solid, dashed, dotted, double, groove, ridge, inset, outset, or none.<br>CSS variable: --wm-calendar-wrapper-border-style"
             }
           },
           "width": {
@@ -39,122 +39,24 @@
             "type": "space",
             "attributes": {
               "subtype": "border-width",
-              "description": "Controls the border thickness of the calendar view. This determines how thick the border around the calendar appears.<br>CSS variable: --wm-calendar-view-border-width"
-            }
-          }
-        },
-        "radius": {
-          "value": "{radius.md.value}",
-          "type": "radius",
-          "attributes": {
-            "subtype": "radius",
-            "description": "Controls the border radius for rounded corners of the calendar view. This makes the calendar appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-calendar-view-radius"
-          }
-        }
-      },
-      "fc": {
-        "button": {
-          "bg-color": {
-            "value": "#2c3e50",
-            "type": "color",
-            "attributes": {
-              "subtype": "color",
-              "description": "Sets the background color of buttons in the calendar component. This determines what color appears behind the button content.<br>CSS variable: --wm-calendar-fc-button-bg-color"
-            }
-          },
-          "border-color": {
-            "value": "#2C3E50",
-            "type": "color",
-            "attributes": {
-              "subtype": "color",
-              "description": "Sets the border color of buttons in the calendar component. This determines what color the border around buttons appears in.<br>CSS variable: --wm-calendar-fc-button-border-color"
-            }
-          }
-        },
-        "header": {
-          "vertical-padding": {
-            "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Sets the vertical padding (top and bottom) of the calendar header. This creates spacing above and below the header content.<br>CSS variable: --wm-calendar-fc-header-vertical-padding"
-            }
-          },
-          "horizontal-padding": {
-            "value": "{space.5.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Sets the horizontal padding (left and right) of the calendar header. This creates spacing on the sides of the header content.<br>CSS variable: --wm-calendar-fc-header-horizontal-padding"
+              "description": "Controls the thickness of the calendar's border. Larger values create a more prominent border around the calendar's edges.<br>CSS variable: --wm-calendar-wrapper-border-width"
             }
           },
-          "text-font-weight": {
-            "value": "{font.weight.700.value}",
-            "type": "font",
-            "attributes": {
-              "subtype": "font-weight",
-              "description": "Controls the thickness/boldness of the text in the calendar header. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-fc-header-text-font-weight"
-            }
-          }
-        },
-        "events-gap": {
-          "value": "{space.1.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Sets spacing between events in the calendar. This creates visual separation between different calendar events.<br>CSS variable: --wm-calendar-fc-events-gap"
-          }
-        },
-        "event": {
-          "background": {
-            "value": "{color.primary.fixed.@.value}",
-            "type": "color",
-            "attributes": {
-              "subtype": "color",
-              "description": "Sets the background color of calendar events. This determines what color appears behind event content.<br>CSS variable: --wm-calendar-fc-event-background"
-            }
-          },
-          "color": {
-            "value": "{color.surface.tint.@.value}",
-            "type": "color",
+          "radius": {
+            "value": "{radius.md.value}",
+            "type": "radius",
             "attributes": {
-              "subtype": "color",
-              "description": "Sets the text color of calendar events. This determines what color the event text appears in.<br>CSS variable: --wm-calendar-fc-event-color"
-            }
-          },
-          "today": {
-            "background": {
-              "value": "{color.success.container.@.value}",
-              "type": "color",
-              "attributes": {
-                "subtype": "color",
-                "description": "Sets the background color for today's date in the calendar. This determines what color appears behind today's date.<br>CSS variable: --wm-calendar-fc-event-today-background"
-              }
-            },
-            "color": {
-              "value": "{color.success.@.value}",
-              "type": "color",
-              "attributes": {
-                "subtype": "color",
-                "description": "Sets the text color for today's date in the calendar. This determines what color today's date text appears in.<br>CSS variable: --wm-calendar-fc-event-today-color"
-              }
-            },
-            "dot": {
-              "value": "{color.success.@.value}",
-              "type": "color",
-              "attributes": {
-                "subtype": "color",
-                "description": "Sets the color of the dot indicator for today's date in the calendar. This determines what color the dot appears in.<br>CSS variable: --wm-calendar-fc-event-today-dot"
-              }
+              "subtype": "radius",
+              "description": "Adjusts the roundness of the calendar's corners. Higher values create softer, more rounded corners.<br>CSS variable: --wm-calendar-wrapper-border-radius"
             }
           }
         },
-        "anchor-color": {
-          "value": "#aaaaaa",
+        "background": {
+          "value": "{color.on-primary.@.value}",
           "type": "color",
           "attributes": {
             "subtype": "color",
-            "description": "Sets the color of anchor links in the calendar component. This determines what color calendar navigation links appear in.<br>CSS variable: --wm-calendar-fc-anchor-color"
+            "description": "Sets the background color for the calendar wrapper, providing the base color for the entire calendar component.<br>CSS variable: --wm-calendar-wrapper-background"
           }
         }
       },
@@ -163,7 +65,7 @@
         "type": "space",
         "attributes": {
           "subtype": "space",
-          "description": "Controls the width of the calendar component. This determines how wide the calendar appears on the screen.<br>CSS variable: --wm-calendar-width"
+          "description": "Sets the width of the calendar component. A value of 100% makes the calendar responsive to its container's width.<br>CSS variable: --wm-calendar-width"
         }
       },
       "min-height": {
@@ -171,7 +73,7 @@
         "type": "space",
         "attributes": {
           "subtype": "space",
-          "description": "Controls the minimum height of the calendar component. This determines the minimum vertical space the calendar occupies.<br>CSS variable: --wm-calendar-min-height"
+          "description": "Sets the minimum height of the calendar, ensuring consistent spacing even with minimal content.<br>CSS variable: --wm-calendar-min-height"
         }
       },
       "header": {
@@ -180,16 +82,16 @@
           "type": "color",
           "attributes": {
             "subtype": "color",
-            "description": "Sets the background color of the calendar header. This is the background color that appears behind the header content.<br>CSS variable: --wm-calendar-header-background-color"
+            "description": "Defines the background color for the calendar header, which contains navigation controls and title.<br>CSS variable: --wm-calendar-header-background-color"
           }
         },
         "border": {
-          "bottom-width": {
-            "value": "{border.width.base.value}",
-            "type": "space",
+          "width": {
+            "value": "{border.width.0.value} {border.width.0.value} {border.width.base.value}",
+            "type": "border",
             "attributes": {
               "subtype": "border-width",
-              "description": "Controls the bottom border thickness of the calendar header. This determines how thick the border at the bottom of the header appears.<br>CSS variable: --wm-calendar-header-border-bottom-width"
+              "description": "Sets the thickness of the border for the calendar header, creating visual separation from the calendar body.<br>CSS variable: --wm-calendar-header-border-width"
             }
           },
           "style": {
@@ -197,19 +99,51 @@
             "type": "radius",
             "attributes": {
               "subtype": "border-style",
-              "description": "Sets the border style of the calendar header. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-calendar-header-border-style"
+              "description": "Specifies the style of the header's border. Options: solid, dashed, dotted, double, groove, ridge, inset, outset, or none.<br>CSS variable: --wm-calendar-header-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.white.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Defines the border color for calendar events, affecting the visibility of event content.<br>CSS variable: --wm-calendar-header-border-color"
+            }
+          },
+          "radius": {
+            "value": "{radius.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Adjusts the corner rounding for the calendar header, creating a softer or more angular appearance.<br>CSS variable: --wm-calendar-header-border-radius"
             }
           }
+        },
+        "padding": {
+          "value": "{space.2.value} {space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Sets the padding of the calendar header (top/bottom: space.2, left/right: space.0). Creates space above and below the header content.<br>CSS variable: --wm-calendar-header-padding"
+          }
         }
       },
       "weekday": {
+        "background-color": {
+          "value": "{color.white.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Defines the background color for the calendar header, which contains navigation controls and title.<br>CSS variable: --wm-calendar-weekday-background-color"
+          }
+        },
         "border": {
-          "bottom-width": {
-            "value": "{border.width.base.value}",
-            "type": "space",
+          "width": {
+            "value": "{border.width.0.value} {border.width.0.value} {border.width.base.value}",
+            "type": "border",
             "attributes": {
               "subtype": "border-width",
-              "description": "Controls the bottom border thickness of weekday labels in the calendar. This determines how thick the border at the bottom of weekday labels appears.<br>CSS variable: --wm-calendar-weekday-border-bottom-width"
+              "description": "Sets the thickness of the border below weekday labels, creating visual separation from the calendar days.<br>CSS variable: --wm-calendar-weekday-border-width"
             }
           },
           "style": {
@@ -217,7 +151,15 @@
             "type": "radius",
             "attributes": {
               "subtype": "border-style",
-              "description": "Sets the border style of weekday labels in the calendar. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-calendar-weekday-border-style"
+              "description": "Defines the style of the border below weekday labels. Options: solid, dashed, dotted, double, groove, ridge, inset, outset, or none.<br>CSS variable: --wm-calendar-weekday-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.white.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border below weekday labels, creating visual separation from the calendar days.<br>CSS variable: --wm-calendar-weekday-border-color"
             }
           }
         },
@@ -226,7 +168,7 @@
           "type": "radius",
           "attributes": {
             "subtype": "space",
-            "description": "Sets the padding of weekday labels in the calendar. This creates spacing around the weekday text.<br>CSS variable: --wm-calendar-weekday-padding"
+            "description": "Controls the spacing around weekday labels, affecting the breathing room between text and container edges.<br>CSS variable: --wm-calendar-weekday-padding"
           }
         },
         "text": {
@@ -235,7 +177,7 @@
             "type": "font",
             "attributes": {
               "subtype": "font-family",
-              "description": "Sets the typeface (font style) for weekday text in the calendar. This determines whether the weekday text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-calendar-weekday-text-font-family"
+              "description": "Specifies the font family for weekday text, allowing customization of the typography used for day names.<br>CSS variable: --wm-calendar-weekday-text-font-family"
             }
           },
           "font-size": {
@@ -245,15 +187,85 @@
               "subtype": "font-size",
               "description": "Controls the size of the weekday text in the calendar. This affects how large the weekday labels appear.<br>CSS variable: --wm-calendar-weekday-text-font-size"
             }
+          },
+          "font-weight": {
+            "value": "{font.weight.700.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Sets the font weight for day numbers in the calendar, controlling the text thickness. Range: 100-900 or normal/bold.<br>CSS variable: --wm-calendar-weekday-text-font-weight"
+            }
+          },
+          "color": {
+            "value": "#aaaaaa",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Defines the color for interactive elements like navigation links within the calendar component.<br>CSS variable: --wm-calendar-weekday-text-color"
+            }
           }
         }
       },
-      "day-border-color": {
-        "value": "transparent",
-        "type": "color",
-        "attributes": {
-          "subtype": "color",
-          "description": "Sets the border color of calendar day cells. This determines what color the border around each day appears in.<br>CSS variable: --wm-calendar-day-border-color"
+      "daywrapper": {
+        "background": {
+          "value": "transparent",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Controls the background color surrounding individual day cells in the calendar grid.<br>CSS variable: --wm-calendar-daywrapper-background"
+          }
+        },
+        "border": {
+          "color": {
+            "value": "transparent",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Controls the border color surrounding individual day cells in the calendar grid.<br>CSS variable: --wm-calendar-daywrapper-border-color"
+            }
+          }
+        }
+      },
+      "day": {
+        "color": {
+          "value": "#aaaaaa",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Defines the color for interactive elements like navigation links within the calendar component.<br>CSS variable: --wm-calendar-day-color"
+          }
+        },
+        "font-family": {
+          "value": "{font.family.plain.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Specifies the font family for day text, allowing customization of the typography used for day names.<br>CSS variable: --wm-calendar-day-font-family"
+          }
+        },
+        "font-size": {
+          "value": "{space.4.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the size of the day text in the calendar. This affects how large the day labels appear.<br>CSS variable: --wm-calendar-day-font-size"
+          }
+        },
+        "font-weight": {
+          "value": "{font.weight.700.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Sets the font weight for header text, controlling how bold or light the text appears. Range: 100-900 or normal/bold.<br>CSS variable: --wm-calendar-day-font-weight"
+          }
+        },
+        "background": {
+          "value": "transparent",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Controls the border color surrounding individual day cells in the calendar grid.<br>CSS variable: --wm-calendar-day-background"
+          }
         }
       },
       "not-day-of-month": {
@@ -262,7 +274,7 @@
           "type": "color",
           "attributes": {
             "subtype": "color",
-            "description": "Sets the text color for days that are not in the current month. This determines what color these days appear in.<br>CSS variable: --wm-calendar-not-day-of-month-color"
+            "description": "Defines the text color for days that fall outside the current month's date range, typically shown in a muted tone.<br>CSS variable: --wm-calendar-not-day-of-month-color"
           }
         },
         "font-weight": {
@@ -270,7 +282,89 @@
           "type": "font",
           "attributes": {
             "subtype": "font-weight",
-            "description": "Controls the thickness/boldness of text for days that are not in the current month. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-not-day-of-month-font-weight"
+            "description": "Adjusts the font weight for days outside the current month, typically set lighter than current month days. Range: 100-900 or normal/bold.<br>CSS variable: --wm-calendar-not-day-of-month-font-weight"
+          }
+        }
+      },
+      "month-text": {
+        "color": {
+          "value": "{color.on-surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Defines the color for interactive elements like navigation links within the calendar component.<br>CSS variable: --wm-calendar-month-text-color"
+          }
+        },
+        "font-family": {
+          "value": "{font.family.plain.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Specifies the font family for month text, allowing customization of the typography used for day names.<br>CSS variable: --wm-calendar-month-text-font-family"
+          }
+        },
+        "font-weight": {
+          "value": "{font.weight.500.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Sets the font weight for month text, controlling how bold or light the text appears. Range: 100-900 or normal/bold.<br>CSS variable: --wm-calendar-month-text-font-weight"
+          }
+        }
+      },
+      "year-text": {
+        "color": {
+          "value": "{color.on-surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Defines the color for year-text within the calendar component.<br>CSS variable: --wm-calendar-year-text-color"
+          }
+        },
+        "font-family": {
+          "value": "{font.family.plain.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Specifies the font family for weekday text, allowing customization of the typography used for day names.<br>CSS variable: --wm-calendar-year-text-font-family"
+          }
+        },
+        "font-weight": {
+          "value": "{font.weight.500.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Sets the font weight for year-text, controlling how bold or light the text appears. Range: 100-900 or normal/bold.<br>CSS variable: --wm-calendar-year-text-font-weight"
+          }
+        }
+      },
+      "today": {
+        "background-color": {
+          "value": "{color.white.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Defines the background color for the today.<br>CSS variable: --wm-calendar-today-background-color"
+          }
+        },
+        "border": {
+          "color": {
+            "value": "{color.primary.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Defines the color for today within the calendar component.<br>CSS variable: --wm-calendar-today-border-color"
+            }
+          }
+        },
+        "text": {
+          "background-color": {
+            "value": "transparent",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Defines the background color for the calendar today.<br>CSS variable: --wm-calendar-today-text-background-color"
+            }
           }
         }
       },
@@ -280,7 +374,7 @@
           "type": "color",
           "attributes": {
             "subtype": "color",
-            "description": "Sets the first color variant for event days in the calendar. This determines what color appears for the first event indicator.<br>CSS variable: --wm-calendar-event-day1-color1"
+            "description": "Defines the primary color for event indicators on calendar days, used to visually mark days with scheduled events.<br>CSS variable: --wm-calendar-event-day1-color1"
           }
         },
         "color2": {
@@ -300,29 +394,39 @@
           }
         }
       },
-      "prev-month-btn-color": {
-        "value": "#aaaaaa",
-        "type": "color",
-        "attributes": {
-          "subtype": "color",
-          "description": "Sets the color of the previous month button in the calendar. This determines what color the navigation button appears in.<br>CSS variable: --wm-calendar-prev-month-btn-color"
-        }
-      },
-      "header-skeleton": {
-        "width": {
-          "value": "100%",
-          "type": "space",
+      "selected-day": {
+        "background": {
+          "value": "{color.primary.fixed.@.value}",
+          "type": "color",
           "attributes": {
-            "subtype": "space",
-            "description": "Controls the width of the calendar header skeleton (loading state). This determines how wide the skeleton loader appears.<br>CSS variable: --wm-calendar-header-skeleton-width"
+            "subtype": "color",
+            "description": "Sets the background color of calendar events. This determines what color appears behind event content.<br>CSS variable: --wm-calendar-selected-day-background"
           }
         },
-        "margin-bottom": {
-          "value": "{space.4.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the bottom margin of the calendar header skeleton. This creates spacing below the skeleton loader.<br>CSS variable: --wm-calendar-header-skeleton-margin-bottom"
+        "text": {
+          "background": {
+            "value": "{color.primary.fixed.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color for the selected day's text container, creating a highlight effect for better visibility.<br>CSS variable: --wm-calendar-selected-day-text-background"
+            }
+          },
+          "color": {
+            "value": "{color.white.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Defines the background color for the calendar header, which contains navigation controls and title.<br>CSS variable: --wm-calendar-selected-day-text-color"
+            }
+          },
+          "font-weight": {
+            "value": "{font.weight.500.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Sets the font weight for selected-day text, controlling how bold or light the text appears. Range: 100-900 or normal/bold.<br>CSS variable: --wm-calendar-selected-day-text-font-weight"
+            }
           }
         }
       }

package/src/tokens/mobile/components/camera/camera.json

@@ -60,37 +60,11 @@
                 }
             },
             "padding": {
-                "top": {
-                    "value": "{space.3.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Sets internal top spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-top"
-                    }
-                },
-                "bottom": {
-                    "value": "{space.3.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Sets internal bottom spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-bottom"
-                    }
-                },
-                "left": {
-                    "value": "{space.3.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Sets internal left spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-left"
-                    }
-                },
-                "right": {
-                    "value": "{space.3.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Sets internal right spacing between camera icon and border.<br>CSS variable: --wm-camera-padding-right"
-                    }
+                "value": "{space.3.value}",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Sets internal spacing between camera icon and border (top, right, bottom, left).<br>CSS variable: --wm-camera-padding"
                 }
             },
             "appearances": {}

package/src/tokens/mobile/components/cards/cards.json

@@ -11,39 +11,13 @@
     "mapping": {
       "header": {
             "padding": {
-            "left": {
               "value": "{space.2.value}",
               "type": "space",
               "attributes": {
                 "subtype": "space",
-                "description": "Controls the left padding (horizontal spacing) inside card. This creates breathing room in the left side of the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-left"
+                "description": "Controls the padding (all sides) inside the card header. This creates breathing room around the header content. Acceptable units: px.<br>CSS variable: --wm-card-header-padding"
               }
             },
-            "right": {
-              "value": "{space.2.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the right padding (horizontal spacing) inside card. This creates breathing room in the right side card. Acceptable units: px.<br>CSS variable: --wm-card-padding-right"
-              }
-            },
-            "top": {
-              "value": "{space.2.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the top padding (vertical spacing) inside card. This creates breathing room in the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-top"
-              }
-            },
-            "bottom": {
-              "value": "{space.2.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls the bottom padding (vertical spacing) inside card.This creates breathing room in the card. Acceptable units: px.<br>CSS variable: --wm-card-padding-bottom"
-              }
-            }
-          },
         "width": {
           "value": "100%",
           "type": "space",