@wavemaker/foundation-css 11.14.1-rc.6311 → 11.14.2-1.6423

package/src/styles/mobile/studio/styles.less

@@ -1,24 +1,17 @@
-@import (optional) url('./advanced/carousel/carousel.less');
-@import (optional) url('./page/tabbar.less');
-@import (optional) url('./navigation/menu.less');
-@import (optional) url('./advanced/login.less');
-@import (optional) url('./basic/anchor.less');
-@import (optional) url('./basic/button.less');
-@import (optional) url('./basic/buttongroup.less');
-@import (optional) url('./basic/picture.less');
-@import (optional) url('./container/wizard.less');
-@import (optional) url('./input/checkbox.less');
-@import (optional) url('./input/checkboxset.less');
-@import (optional) url('./input/radioset.less');
-@import (optional) url('./container/tabs/tab-header.less');
-@import (optional) url('./input/switch.less');
-@import (optional) url('./basic/search.less');
-@import (optional) url('./device/barcodescanner.less');
-@import (optional) url('./input/toggle.less');
-@import (optional) url('./input/rating.less');
-@import (optional) url('./data/cards.less');
-@import (optional) url('./page/page-content.less');
-@import (optional) url('./input/epoch/datetime-picker-modal.less');
-@import (optional) url('./basic/message.less');
-@import (optional) url('./input/form.less');
-@import (optional) url('./slider.less');
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel {
+    @import url('./advanced/styles.less');
+    @import url('./basic/styles.less');
+    @import url('./container/styles.less');
+    @import url('./data/styles.less');
+    @import url('./device/styles.less');
+    @import url('./dialogs/styles.less');
+    @import url('./input/styles.less');
+    @import url('./layouts/styles.less');
+    @import url('./navigation/styles.less');
+}
+.wm-right-panel-container .style-workspace-container.widgets{
+    @import url('./input/epoch/datetime-picker-modal.less');
+}
+
+//TODO: Remove this after refactoring styles
+@import url('./input/form.less');

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

@@ -8,7 +8,7 @@
         "states": {
           "active": {
             "selector": {
-              "mobile": "-active"
+              "mobile": "-active-header, .app-accordion-active-header-title, .app-accordion-header-collapse-icon, .app-accordion-active-header-badge, .app-accordion-active-title-icon"
             }
           }
         }
@@ -17,67 +17,123 @@
     "mapping": {
       "width": {
         "value": "100%",
-        "type": "space"
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the width of the accordion component. This determines how wide the accordion panel appears on the screen.<br>CSS variable: --wm-accordion-width"
+        }
       },
       "border": {
         "width": {
           "value": "{space.0.value}",
-          "type": "space"
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the border thickness of the accordion component. This determines how thick the border around the accordion panel appears.<br>CSS variable: --wm-accordion-border-width"
+          }
         },
         "style": {
           "value": "{border.style.solid}",
-          "type": "radius"
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Sets the border style of the accordion component. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-accordion-border-style"
+          }
         },
         "color": {
           "value": "#eeeeee",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the border color of the accordion component. This determines what color the border around the accordion panel appears in.<br>CSS variable: --wm-accordion-border-color"
+          }
         },
         "radius": {
           "value": "6px",
-          "type": "radius"
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the border radius for rounded corners of the accordion component. This makes the accordion appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-accordion-border-radius"
+          }
         }
       },
       "background-color": {
         "value": "transparent",
-        "type": "color"
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the background color of the accordion component. This is the main background color that appears behind all accordion content.<br>CSS variable: --wm-accordion-background-color"
+        }
       },
       "text": {
         "color": {
           "value": "#333333",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of the accordion content. This determines what color the text within the accordion appears in.<br>CSS variable: --wm-accordion-text-color"
+          }
         },
         "font-size": {
           "value": "18px",
-          "type": "font"
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the size of the text in the accordion. This affects how large the accordion text appears.<br>CSS variable: --wm-accordion-text-font-size"
+          }
         }
       },
       "header": {
         "border": {
           "bottom-width": {
             "value": "{border.width.1.value}",
-            "type": "space"
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the bottom border thickness of the accordion header. This determines how thick the border at the bottom of the header appears.<br>CSS variable: --wm-accordion-header-border-bottom-width"
+            }
           },
           "color": {
             "value": "#333333",
-            "type": "color"
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the border color of the accordion header. This determines what color the border around the header appears in.<br>CSS variable: --wm-accordion-header-border-color"
+            }
           }
         },
         "background-color": {
           "value": "{color.white.@.value}",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of the accordion header. This is the background color that appears behind the header content.<br>CSS variable: --wm-accordion-header-background-color"
+          }
         },
         "padding": {
           "value": "{space.2.value}",
-          "type": "space"
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Sets the internal spacing inside the accordion header. This creates breathing room around the header content.<br>CSS variable: --wm-accordion-header-padding"
+          }
         },
         "subtitle": {
           "font-size": {
             "value": "14px",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls the size of the subtitle text in the accordion header. This text is typically smaller than the main heading to create a visual hierarchy.<br>CSS variable: --wm-accordion-header-subtitle-font-size"
+            }
           },
           "margin-top": {
             "value": "8px",
-            "type": "space"
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the top margin of the accordion header subtitle. This creates spacing above the subtitle text.<br>CSS variable: --wm-accordion-header-subtitle-margin-top"
+            }
           }
         }
       },
@@ -85,72 +141,152 @@
         "root": {
           "width": {
             "value": "{space.6.value}",
-            "type": "space"
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the width of the accordion icon root container. This determines how wide the icon container appears.<br>CSS variable: --wm-accordion-icon-root-width"
+            }
           },
           "height": {
             "value": "{space.6.value}",
-            "type": "space"
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the height of the accordion icon root container. This determines how tall the icon container appears.<br>CSS variable: --wm-accordion-icon-root-height"
+            }
           },
           "border": {
             "radius": {
               "value": "{space.6.value}",
-              "type": "space"
+              "type": "space",
+              "attributes": {
+                "subtype": "radius",
+                "description": "Controls the border radius of the accordion icon root container. This makes the icon container appear with rounded corners.<br>CSS variable: --wm-accordion-icon-root-border-radius"
+              }
             }
           }
         },
         "color": {
           "value": "{color.on-background.@.value}",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of the accordion icon. This determines what color the icon appears in.<br>CSS variable: --wm-accordion-icon-color"
+          }
         },
         "font": {
           "size": {
             "value": "{spacer.@.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls the size of the accordion icon. This affects how large the icon appears.<br>CSS variable: --wm-accordion-icon-font-size"
+            }
           },
           "weight": {
             "value": "{font.weight.700.value}",
-            "type": "font"
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls the thickness/boldness of the accordion icon. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-accordion-icon-font-weight"
+            }
           }
         }
       },
       "badge": {
         "font-size": {
           "value": "{body.small.font-size.value}",
-          "type": "font"
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the size of the text in the accordion badge. This affects how large the badge text appears.<br>CSS variable: --wm-accordion-badge-font-size"
+          }
         },
         "margin-right": {
           "value": "{space.1.value}",
-          "type": "space"
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the right margin of the accordion badge. This creates spacing to the right of the badge.<br>CSS variable: --wm-accordion-badge-margin-right"
+          }
         },
         "width": {
           "value": "{space.6.value}",
-          "type": "space"
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the width of the accordion badge. This determines how wide the badge appears.<br>CSS variable: --wm-accordion-badge-width"
+          }
         },
         "height": {
           "value": "{space.6.value}",
-          "type": "space"
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the height of the accordion badge. This determines how tall the badge appears.<br>CSS variable: --wm-accordion-badge-height"
+          }
         },
         "border": {
           "radius": {
             "value": "{space.3.value}",
-            "type": "space"
+            "type": "space",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the border radius of the accordion badge. This makes the badge appear with rounded corners.<br>CSS variable: --wm-accordion-badge-border-radius"
+            }
           },
           "width": {
             "value": "2px",
-            "type": "radius"
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the border thickness of the accordion badge. This determines how thick the border around the badge appears.<br>CSS variable: --wm-accordion-badge-border-width"
+            }
           },
           "color": {
             "value": "#cccccc",
-            "type": "color"
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the border color of the accordion badge. This determines what color the border around the badge appears in.<br>CSS variable: --wm-accordion-badge-border-color"
+            }
           }
         },
         "background-color": {
           "value": "transparent",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of the accordion badge of default type. This is the background color that appears behind the badge content.<br>CSS variable: --wm-accordion-badge-background-color"
+          }
         },
         "color": {
           "value": "{color.on-background.@.value}",
-          "type": "color"
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of the accordion badge. This determines what color the badge text appears in.<br>CSS variable: --wm-accordion-badge-color"
+          }
+        }
+      },
+      "title": {
+        "icon": {
+          "color": {
+            "value": "#333333",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the icon color of the accordion title. This determines what color the icon within the accordion title appears in.<br>CSS variable: --wm-accordion-title-icon-color"
+            }
+          },
+          "size": {
+            "value": "18px",
+            "type": "font",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls the size of the icon in the accordion title. This affects how large the accordion title icon appears.<br>CSS variable: --wm-accordion-title-icon-size"
+            }
+          }
         }
       },
       "states": {
@@ -159,36 +295,80 @@
             "border": {
               "color": {
                 "value": "{color.primary.@.value}",
-                "type": "color"
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the border color of the active accordion header. This determines what color the border appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-header-border-color"
+                }
               }
             },
             "background-color": {
               "value": "{color.primary.@.value}",
-              "type": "color"
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the background color of the active accordion header. This is the background color that appears when the accordion is expanded.<br>CSS variable: --wm-accordion-active-header-background-color"
+              }
             }
           },
           "text": {
             "color": {
               "value": "{color.white.@.value}",
-              "type": "color"
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the text color of the active accordion content. This determines what color the text appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-text-color"
+              }
+            }
+          },
+          "title": {
+            "icon": {
+              "color": {
+                "value": "{color.white.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the icon color of the active accordion title. This determines what color the icon appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-title-icon-color"
+                }
+              }
             }
           },
           "icon": {
             "color": {
               "value": "{color.white.@.value}",
-              "type": "color"
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the color of the active accordion icon. This determines what color the icon appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-icon-color"
+              }
             }
           },
           "badge": {
             "border": {
               "color": {
                 "value": "{color.white.@.value}",
-                "type": "color"
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the border color of the active accordion badge. This determines what color the border appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-badge-border-color"
+                }
               }
             },
+            "background-color": {
+              "value": "transparent",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the background color of the active accordion badge of default type. This is the background color that appears behind the badge content.<br>CSS variable: --wm-accordion-badge-background-color"
+              }
+        },
             "color": {
               "value": "{color.white.@.value}",
-              "type": "color"
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the text color of the active accordion badge. This determines what color the badge text appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-badge-color"
+              }
             }
           }
         }

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

@@ -12,59 +12,107 @@
             "color": {
                 "@": {
                     "value": "{color.primary.@.value}",
-                    "type": "color"
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the text color of anchor links (clickable text elements that navigate to other pages or sections). This determines what color the anchor text appears in.<br>CSS variable: --wm-anchor-color"
+                    }
                 }
             },
             "font-size": {
                 "value": "{body.medium.font-size.value}",
-                "type": "font"
+                "type": "font",
+                "attributes": {
+                    "subtype": "font-size",
+                    "description": "Controls the size of the text in anchor links. This affects how large the anchor text appears.<br>CSS variable: --wm-anchor-font-size"
+                }
             },
             "font-family": {
                 "value": "{body.medium.font-family.value}",
-                "type": "font"
+                "type": "font",
+                "attributes": {
+                    "subtype": "font-family",
+                    "description": "Sets the typeface (font style) for anchor link text. This determines whether the anchor text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-anchor-font-family"
+                }
             },
             "font-weight": {
                 "value": "{body.medium.font-weight.value}",
-                "type": "font"
+                "type": "font",
+                "attributes": {
+                    "subtype": "font-weight",
+                    "description": "Controls how thick or bold the anchor link text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-anchor-font-weight"
+                }
             },
             "line-height": {
                 "value": "{body.medium.line-height.value}",
-                "type": "font"
+                "type": "font",
+                "attributes": {
+                    "subtype": "line-height",
+                    "description": "Controls the vertical spacing between lines when anchor link text wraps to multiple lines. This ensures proper spacing for the anchor text.<br>CSS variable: --wm-anchor-line-height"
+                }
             },
             "letter-spacing": {
                 "value": "{body.medium.letter-spacing.value}",
-                "type": "font"
+                "type": "font",
+                "attributes": {
+                    "subtype": "letter-spacing",
+                    "description": "Controls the horizontal spacing between individual characters in anchor link text. This can help make the anchor text more readable and properly spaced.<br>CSS variable: --wm-anchor-letter-spacing"
+                }
             },
             "text-transform": {
                 "value": "none",
-                "type": "radius"
+                "type": "radius",
+                "attributes": {
+                    "subtype": "text-transform",
+                    "description": "Controls text transformation for anchor link text. 'none' keeps the original case, 'uppercase' makes all text uppercase, 'lowercase' makes all text lowercase, and 'capitalize' capitalizes the first letter of each word.<br>CSS variable: --wm-anchor-text-transform"
+                }
             },
             "text": {
                 "decoration": {
                     "@": {
                         "value": "none",
-                        "type": "radius"
+                        "type": "radius",
+                        "attributes": {
+                            "subtype": "text-decoration",
+                            "description": "Controls the text decoration (underline, overline, line-through) for anchor links. 'none' removes all decorations, 'underline' adds an underline, 'overline' adds a line above, and 'line-through' adds a line through the text.<br>CSS variable: --wm-anchor-text-decoration"
+                        }
                     }
                 }
             },
             "gap": {
                 "value": "{space.1.value}",
-                "type": "space"
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Sets spacing between icon and text content in anchor links. This creates visual separation between the icon and the anchor text.<br>CSS variable: --wm-anchor-gap"
+                }
             },
             "icon": {
                 "size": {
                     "value": "{icon.size.@.value}",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "icon-size",
+                        "description": "Controls the size of icons in anchor links. This affects how large the icon appears next to the anchor text.<br>CSS variable: --wm-anchor-icon-size"
+                    }
                 }
             },
             "image": {
                 "size": {
                     "value": "{icon.size.@.value}",
-                    "type": "space"
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "icon-size",
+                        "description": "Controls the size of images in anchor links. This affects how large the image appears next to the anchor text.<br>CSS variable: --wm-anchor-image-size"
+                    }
                 },
                 "radius": {
                     "value": "{radius.circle.value}",
-                    "type": "radius"
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "radius",
+                        "description": "Controls the border radius of images in anchor links. This makes the image appear with rounded corners.<br>CSS variable: --wm-anchor-image-radius"
+                    }
                 }
             }
         },

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

@@ -3,7 +3,11 @@
         "mapping": {
             "width": {
                 "value": "300px",
-                "type": "space"
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the width of the audio component. This determines how wide the audio player appears on the screen.<br>CSS variable: --wm-audio-width"
+                }
             }
         },
         "appearances": {}