@wavemaker/foundation-css 11.14.2-rc.6311 → 11.14.4-rc.647538

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

@@ -11,99 +11,55 @@
             "track": {
                 "height": {
                     "value": "{space.4.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Controls the height of slider tracks (the horizontal bar that represents the slider range). This determines the vertical size of the track. Acceptable units: px.<br>CSS variable: --wm-slider-track-height"
-                    }
+                    "type": "space"
                 },
                 "margin-vertical": {
                     "value": "{space.4.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Controls the vertical margin (top and bottom spacing) of slider tracks. This creates spacing above and below the track. Acceptable units: px.<br>CSS variable: --wm-slider-track-margin-vertical"
-                    }
+                    "type": "space"
                 },
                 "border-radius": {
                     "value": "{radius.lg.value}",
-                    "type": "radius",
-                    "attributes": {
-                        "subtype": "radius",
-                        "description": "Controls the border radius (rounded corners) of slider tracks. This determines how rounded the corners of the track appear. Acceptable units: px.<br>CSS variable: --wm-slider-track-border-radius"
-                    }
+                    "type": "radius"
                 }
             },
             "min-track": {
                 "background": {
                     "value": "{color.surface.tint.@.value}",
-                    "type": "color",
-                    "attributes": {
-                        "subtype": "color",
-                        "description": "Sets the background color of slider minimum tracks (the portion of the track from the start to the current value). This determines what color the minimum track appears in.<br>CSS variable: --wm-slider-min-track-background"
-                    }
+                    "type": "color"
                 }
             },
             "max-track": {
                 "background": {
                     "value": "{color.primary.container.@.value}",
-                    "type": "color",
-                    "attributes": {
-                        "subtype": "color",
-                        "description": "Sets the background color of slider maximum tracks (the portion of the track from the current value to the end). This determines what color the maximum track appears in, typically matching the primary container theme color.<br>CSS variable: --wm-slider-max-track-background"
-                    }
+                    "type": "color"
                 }
             },
             "thumb": {
                 "background": {
                     "value": "{color.surface.tint.@.value}",
-                    "type": "color",
-                    "attributes": {
-                        "subtype": "color",
-                        "description": "Sets the background color of slider thumbs (the draggable handle that users interact with to set values). This determines what color the thumb appears in.<br>CSS variable: --wm-slider-thumb-background"
-                    }
+                    "type": "color"
                 },
                 "height": {
                     "value": "{space.8.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Controls the height of slider thumbs. This determines the vertical size of the thumb. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-height"
-                    }
+                    "type": "space"
                 },
                 "width": {
                     "value": "{space.1.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Controls the width of slider thumbs. This determines the horizontal size of the thumb. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-width"
-                    }
+                    "type": "space"
                 },
                 "border-radius": {
                     "value": "{radius.xs.value}",
-                    "type": "radius",
-                    "attributes": {
-                        "subtype": "radius",
-                        "description": "Controls the border radius (rounded corners) of slider thumbs. This determines how rounded the corners of the thumb appear. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-border-radius"
-                    }
+                    "type": "radius"
                 }
             },
             "tooltip": {
                 "background": {
                     "value": "#000",
-                    "type": "color",
-                    "attributes": {
-                        "subtype": "color",
-                        "description": "Sets the background color of slider tooltips (popup labels that show the current value when hovering or dragging). This determines what color the background of the tooltip appears in.<br>CSS variable: --wm-slider-tooltip-background"
-                    }
+                    "type": "color"
                 },
                 "color": {
                     "value": "{color.white.@.value}",
-                    "type": "color",
-                    "attributes": {
-                        "subtype": "color",
-                        "description": "Sets the text color of slider tooltips. This determines what color the text in the tooltip appears in, typically white for contrast against dark backgrounds.<br>CSS variable: --wm-slider-tooltip-color"
-                    }
+                    "type": "color"
                 }
             }
         }

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

@@ -10,82 +10,46 @@
     "mapping": {
       "background": {
         "value": "transparent",
-        "type": "color",
-        "attributes": {
-          "subtype": "color",
-          "description": "Sets the background color of loading spinners (the overlay that appears behind the spinner animation). This creates a backdrop that dims the content while loading.<br>CSS variable: --wm-spinner-background"
-        }
+        "type": "color"
       },
       "width": {
         "value": "100%",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the width of spinner components. This determines how wide the spinner appears relative to its container. Acceptable units: %, px.<br>CSS variable: --wm-spinner-width"
-        }
+        "type": "space"
       },
       "text": {
         "color": {
           "value": "{color.scrim.@.value}",
-          "type": "color",
-          "attributes": {
-            "subtype": "color",
-            "description": "Sets the text color of loading data messages (the text that appears with the spinner to explain what's loading). This determines the color of the loading message text.<br>CSS variable: --wm-spinner-text-color"
-          }
+          "type": "color"
         },
         "font-size": {
           "value": "{body.large.font-size.value}",
-          "type": "font",
-          "attributes": {
-            "subtype": "font-size",
-            "description": "Controls the font size of loading data messages (the text that appears with the spinner to explain what's loading). This affects how large the loading message text appears.<br>CSS variable: --wm-spinner-text-font-size"
-          }
+          "type": "font"
         },
         "padding": {
           "left": {
             "value": "{space.2.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the left padding (horizontal spacing) of loading data messages. This creates breathing room on the left side of the loading message text.<br>CSS variable: --wm-spinner-text-padding-left"
-            }
+            "type": "space"
           }
         }
       },
       "icon": {
         "size": {
           "value": "{icon.size.@.value}",
-          "type": "icon",
-          "attributes": {
-            "subtype": "icon-size",
-            "description": "Controls the size of loading spinner icons (animated indicators that show content is loading). This affects how large the spinner icons appear.<br>CSS variable: --wm-spinner-icon-size"
-          }
+          "type": "icon"
         },
         "color": {
           "value": "{color.scrim.@.value}",
-          "type": "color",
-          "attributes": {
-            "subtype": "color",
-            "description": "Sets the color of loading spinner icons (animated indicators that show content is loading). This determines what color the spinner icons appear in.<br>CSS variable: --wm-spinner-icon-color"
-          }
+          "type": "color"
         }
       },
       "lottie": {
         "width": {
           "value": "150px",
-          "type": "font",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the width of spinner Lottie animations (animated graphics used as loading indicators). This determines how wide the Lottie animation appears.<br>CSS variable: --wm-spinner-lottie-width"
-          }
+          "type": "font"
         },
         "height": {
           "value": "150px",
-          "type": "font",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls the height of spinner Lottie animations (animated graphics used as loading indicators). This determines how tall the Lottie animation appears.<br>CSS variable: --wm-spinner-lottie-height"
-          }
+          "type": "font"
         }
       }
     },

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

@@ -24,107 +24,59 @@
         "background": {
           "color": {
             "value": "{color.surface.@.value}",
-            "type": "color",
-            "attributes": {
-              "subtype": "color",
-              "description": "Sets the background color of switch buttons. When set to 'none', the buttons have no background color, making them transparent.<br>CSS variable: --wm-switch-button-background-color"
-            }
+            "type": "color"
           }
         },
         "font": {
           "size": {
             "value": "{label.large.font-size.value}",
-            "type": "font",
-            "attributes": {
-              "subtype": "font-size",
-              "description": "Controls the font size of switch button text. This affects how large the text appears on switch buttons. Acceptable units: px.<br>CSS variable: --wm-switch-button-font-size"
-            }
+            "type": "font"
           },
           "family": {
             "value": "{font.family.brand.value}",
-            "type": "font",
-            "attributes": {
-              "subtype": "font-family",
-              "description": "Sets the font family of switch button text. This determines which font is used for the text on switch buttons.<br>CSS variable: --wm-switch-button-font-family"
-            }
+            "type": "font"
           },
           "weight": {
             "value": "{font.weight.500.value}",
-            "type": "font",
-            "attributes": {
-              "subtype": "font-weight",
-              "description": "Controls the font weight (boldness) of switch button text. This affects how bold the text appears on switch buttons.<br>CSS variable: --wm-switch-button-font-weight"
-            }
+            "type": "font"
           }
         },
         "height": {
           "value": "{space.10.value}",
-          "type": "space",
-          "attributes": {
-            "subtype": "space",
-            "description": "Controls how tall switch buttons appear (segmented control buttons that allow users to toggle between different options). This determines the vertical size of each switch button.<br>CSS variable: --wm-switch-button-height"
-          }
+          "type": "space"
         },
         "color": {
           "value": "{color.outline.@.value}",
-          "type": "color",
-          "attributes": {
-            "subtype": "color",
-            "description": "Sets the text color of switch buttons (the color of text content within the buttons). This should contrast well with the background for readability.<br>CSS variable: --wm-switch-button-color"
-          }
+          "type": "color"
         },
         "border": {
           "color": {
             "value": "{color.outline.@.value}",
-            "type": "color",
-            "attributes": {
-              "subtype": "color",
-              "description": "Sets the color of the border around switch buttons. This determines the color of the outline that defines the button shape in its default/unselected state.<br>CSS variable: --wm-switch-button-border-color"
-            }
+            "type": "color"
           },
           "width": {
             "value": "1px",
-            "type": "radius",
-            "attributes": {
-              "subtype": "border-width",
-              "description": "Controls the thickness of the border around switch buttons. This creates the outline that defines the button shape and makes it visible to users.<br>CSS variable: --wm-switch-button-border-width"
-            }
+            "type": "radius"
           },
           "radius": {
             "value": "{radius.lg.value}",
-            "type": "radius",
-            "attributes": {
-              "subtype": "radius",
-              "description": "Controls the corner rounding of switch buttons. When set to a large radius value, the buttons appear with rounded corners, creating a softer, more modern appearance.<br>CSS variable: --wm-switch-button-border-radius"
-            }
+            "type": "radius"
           }
         },
         "padding": {
           "left": {
             "value": "{space.4.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the internal spacing inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons on the left side.<br>CSS variable: --wm-switch-button-padding-left"
-            }
+            "type": "space"
           },
           "right": {
             "value": "{space.4.value}",
-            "type": "space",
-            "attributes": {
-              "subtype": "space",
-              "description": "Controls the internal spacing inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons on the right side.<br>CSS variable: --wm-switch-button-padding-right"
-            }
+            "type": "space"
           }
         },
         "ripple": {
           "color": {
             "value": "rgba(255, 255, 255, 0.08)",
-            "type": "color",
-            "attributes": {
-              "subtype": "color",
-              "description": "Sets the color of the ripple effect that appears when users interact with switch buttons. This creates visual feedback to show that the button is interactive and responsive to user actions, typically appearing as a subtle overlay when the button is pressed.<br>CSS variable: --wm-switch-button-ripple-color"
-            }
+            "type": "color"
           }
         }
       },
@@ -134,29 +86,17 @@
             "background": {
               "color": {
                 "value": "{color.secondary.fixed.@.value}",
-                "type": "color",
-                "attributes": {
-                  "subtype": "color",
-                  "description": "Sets the background color of selected switch buttons. When a button is selected, it uses this background color to visually distinguish it from unselected buttons, typically using a secondary container color to indicate the active state.<br>CSS variable: --wm-switch-button-background-color (selected state)"
-                }
+                "type": "color"
               }
             },
             "color": {
               "value": "{color.on-secondary.container.@.value}",
-              "type": "color",
-              "attributes": {
-                "subtype": "color",
-                "description": "Sets the text color of selected switch buttons. This ensures the text remains readable against the selected button's background, typically using a color that contrasts well with the secondary container background.<br>CSS variable: --wm-switch-button-color (selected state)"
-              }
+              "type": "color"
             },
             "border": {
               "color": {
                 "value": "{color.outline.@.value}",
-                "type": "color",
-                "attributes": {
-                  "subtype": "color",
-                  "description": "Sets the border color of selected switch buttons. This maintains the border outline even when the button is selected, helping to maintain visual consistency with the overall switch component design.<br>CSS variable: --wm-switch-button-border-color (selected state)"
-                }
+                "type": "color"
               }
             }
           }
@@ -164,11 +104,7 @@
         "disabled": {
           "opacity": {
             "value": "0.6",
-            "type": "radius",
-            "attributes": {
-              "subtype": "opacity",
-              "description": "Controls the transparency of disabled switch buttons. When set to 0.6, disabled switches appear faded to indicate they are not interactive. Lower values make them more transparent, higher values make them more opaque.<br>CSS variable: --wm-switch-opacity"
-            }
+            "type": "radius"
           }
         }