@wavemaker/foundation-css 12.0.0-next.25480 → 12.0.0-next.28533

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

@@ -1,13 +1,54 @@
 {
   "webview": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-webview"
+        }
+      }
+    },
     "mapping": {
-      "container": {
-        "min-height": {
-          "value": "100px",
+      "background": {
+        "color": {
+          "value": "{color.white.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of the webview. When transparent, only the webview is visible. When filled with a color, the webview appears with a colored background.<br>CSS variable: --wm-webview-background-color"
+          }
+        }
+      },
+      "padding": {
+        "top": {
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the top padding (vertical spacing) inside webview. This creates breathing room above the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-top"
+          }
+        },
+        "bottom": {
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the bottom padding (vertical spacing) inside webview. This creates breathing room below the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-bottom"
+          }
+        },
+        "left": {
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the left padding (horizontal spacing) inside webview. This creates breathing room on the left side of the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-left"
+          }
+        },
+        "right": {
+          "value": "{space.2.value}",
           "type": "space",
           "attributes": {
             "subtype": "space",
-            "description": "Controls the minimum height of webview containers (embedded web content viewers that display web pages or HTML content). This ensures the webview is always tall enough to be visible and properly display content.<br>CSS variable: --wm-webview-container-min-height"
+            "description": "Controls the right padding (horizontal spacing) inside webview. This creates breathing room on the right side of the webview. Acceptable units: px.<br>CSS variable: --wm-webview-padding-right"
           }
         }
       }

package/src/tokens/mobile/global/box-shadow/box-shadow.json

@@ -29,6 +29,12 @@
       "attributes": {
         "subtype": "box-shadow"
       }
+    },
+    "none": {
+      "value": "none",
+      "attributes": {
+        "subtype": "box-shadow"
+      }
     }
   }
 }

package/src/tokens/mobile/global/font/font.json

@@ -205,6 +205,38 @@
       "attributes": { "subtype": "letter-spacing" }
     }
   },
+  "p": {
+    "font-family": {
+      "value": "{font.family.brand.value}",
+      "attributes": {
+        "subtype": "font-family"
+      }
+    },
+    "font-weight": {
+      "value": "{font.weight.500.value}",
+      "attributes": {
+        "subtype": "font-weight"
+      }
+    },
+    "font-size": {
+      "value": "12px",
+      "attributes": {
+        "subtype": "font-size"
+      }
+    },
+    "line-height": {
+      "value": "18px",
+      "attributes": {
+        "subtype": "line-height"
+      }
+    },
+    "letter-spacing": {
+      "value": "0.1px",
+      "attributes": {
+        "subtype": "letter-spacing"
+      }
+    }
+  },
   "label": {
     "large": {
       "font-family": {
@@ -342,3 +374,4 @@
     }
   }
 }
+

package/src/tokens/mobile/global/opacity/opacity.json

@@ -1,7 +1,6 @@
 {
   "opacity": {
-    "hover": { "value": "8%", "attributes": { "subtype": "opacity" } },
     "focus": { "value": "12%", "attributes": { "subtype": "opacity" } },
-    "active": { "value": "16%", "attributes": { "subtype": "opacity" } }
+    "active": { "value": "100%", "attributes": { "subtype": "opacity" } }
   }
-}
+}

package/src/tokens/web/components/button/button.json

@@ -709,7 +709,7 @@
           },
           "border": {
             "color": {
-              "value": "none",
+              "value": "{color.transparent.value}",
               "type": "color",
               "attributes": {
                 "subtype": "color"

package/src/tokens/web/components/calendar/Token.Readme.md

@@ -6,25 +6,58 @@ This table lists all tokens for this component:
 
 | Token | Description |
 |-------|------------|
-| view.shadow | Controls the shadow of the calendar view container.<br>CSS variable: --wm-calendar-view-shadow |
-| view.border.color | Sets the border color of the calendar view.<br>CSS variable: --wm-calendar-view-border-color |
-| view.border.style | Controls the border style of the calendar view. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-calendar-view-border-style |
-| view.border.width | Controls the border width of the calendar view.<br>CSS variable: --wm-calendar-view-border-width |
-| view.radius | Controls the border radius of the calendar view.<br>CSS variable: --wm-calendar-view-radius |
-| fc.header.vertical.padding | Controls vertical padding of the calendar header.<br>CSS variable: --wm-calendar-fc-header-vertical-padding |
-| fc.header.horizontal.padding | Controls horizontal padding of the calendar header.<br>CSS variable: --wm-calendar-fc-header-horizontal-padding |
-| fc.header.text.font-weight | Controls the font weight of calendar header text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-fc-header-text-font-weight |
-| fc.time.text.font-weight | Controls the font weight of calendar time text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-fc-time-text-font-weight |
-| fc.events.gap | Controls spacing between calendar events.<br>CSS variable: --wm-calendar-fc-events-gap |
-| fc.daygrid.event.radius | Controls the border radius of calendar day grid events.<br>CSS variable: --wm-calendar-fc-daygrid-event-radius |
-| fc.v.event.main.color | Sets the main color of calendar events.<br>CSS variable: --wm-calendar-fc-v-event-main-color |
-| fc.popover.radius | Controls the border radius of calendar popovers.<br>CSS variable: --wm-calendar-fc-popover-radius |
-| fc.popover.heading.padding | Controls padding of calendar popover headings.<br>CSS variable: --wm-calendar-fc-popover-heading-padding |
-| fc.popover.title.font-size | Controls the font size of calendar popover titles.<br>CSS variable: --wm-calendar-fc-popover-title-font-size |
-| fc.popover.title.font-weight | Controls the font weight of calendar popover titles. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-fc-popover-title-font-weight |
-| fc.popover.title.font-family | Sets the font family of calendar popover titles.<br>CSS variable: --wm-calendar-fc-popover-title-font-family |
-| fc.popover.title.line-height | Controls the line height of calendar popover titles.<br>CSS variable: --wm-calendar-fc-popover-title-line-height |
-| fc.event.background | Sets the background color of calendar events.<br>CSS variable: --wm-calendar-fc-event-background |
-| fc.event.color | Sets the text color of calendar events.<br>CSS variable: --wm-calendar-fc-event-color |
-| fc.event.dot.color | Sets the color of calendar event dots.<br>CSS variable: --wm-calendar-fc-event-dot-color |
-| fc.anchor.color | Sets the color of calendar anchor elements.<br>CSS variable: --wm-calendar-fc-anchor-color |
+| shadow | Controls the shadow of the calendar view container.<br>CSS variable: --wm-calendar-view-shadow |
+| border.color | Sets the border color of the calendar view.<br>CSS variable: --wm-calendar-view-border-color |
+| border.style | Controls the border style of the calendar view. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-calendar-view-border-style |
+| border.width | Controls the border width of the calendar view.<br>CSS variable: --wm-calendar-view-border-width |
+| radius | Controls the border radius of the calendar view.<br>CSS variable: --wm-calendar-view-radius |
+| background | Controls the background color of the calendar view.<br>CSS variable: --wm-calendar-view-background |
+| toolbar-title.font-weight | Controls the font weight of the calendar title. <br>CSS variable: --wm-calendar-toolbar-title-font-weight |
+| toolbar-title.font-family | Controls the font family of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-font-family |
+| toolbar-title.font-size | Controls the font size of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-font-size |
+| toolbar-title.letter-spacing | Controls the letter spacing of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-letter-spacing |
+| toolbar-title.line-height | Controls the line height of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-line-height |
+| button.background | Controls the background color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-background |
+| button.color | Controls the text color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-color |
+| button.border-color | Controls the border color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-border-color |
+| button.font-weight | Controls the font weight of the button captions in the calendar toolbar.<br>CSS variable: --wm-calendar-button-font-weight |
+| button.font-family | Controls the font family of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-font-family |
+| button.font-size | Controls the font size of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-font-size |
+| button.letter-spacing | Controls the letter spacing of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-letter-spacing |
+| button.line-height | Controls the line height of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-line-height |
+| button.border-width | Controls the border width of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-width |
+| button.border-style | Controls the border style of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-style |
+| button.border-radius | Controls the border radius of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-radius |
+| button.active.background | Controls the background color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-background |
+| button.active.border-color | Controls the border color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-border-color |
+| button.active.border-width | Controls the border width of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-border-width |
+| button.active.border-style | Controls the border style of the active button in the calendar toolbar<br>CSS variable: --wm-calendar-button-active-border-style |
+| button.active.border-radius | Controls the border radius of the active button in the calendar toolbar<br>CSS variable: --wm-calendar-button-active-border-radius |
+| button.active.color | Controls the text color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-color |
+| date.padding | Controls the padding of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-padding |
+| date.font-weight | Controls the font weight of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-weight |
+| date.font-family | Controls the font family of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-family |
+| date.font-size | Controls the font size of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-size |
+| date.color | Sets the color of calendar anchor elements.<br>CSS variable: --wm-calendar-anchor-color |
+| date.today.background | Controls the background color of current day cell in the calendar.<br>CSS variable: --wm-calendar-daygrid-today-background |
+| date.today.text.color | Controls the text color of current day cell in the calendar .<br>CSS variable: --wm-calendar-daygrid-today-text-color |
+| toolbar.vertical.padding | Controls vertical padding of the calendar header.<br>CSS variable: --wm-calendar-toolbar-vertical-padding |
+| toolbar.horizontal.padding | Controls horizontal padding of the calendar header.<br>CSS variable: --wm-calendar-toolbar-horizontal-padding |
+| time.text.font-weight | Controls the font weight of calendar time text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-time-text-font-weight |
+| events.gap | Controls spacing between calendar events.<br>CSS variable: --wm-calendar-events-gap |
+| daygrid.event.radius | Controls the border radius of calendar day grid events.<br>CSS variable: --wm-calendar-daygrid-event-radius |
+| v.event.main.color | Sets the main color of calendar events.<br>CSS variable: --wm-calendar-v-event-main-color |
+| popover.radius | Controls the border radius of calendar popovers.<br>CSS variable: --wm-calendar-popover-radius |
+| popover.heading.padding | Controls padding of calendar popover headings.<br>CSS variable: --wm-calendar-popover-heading-padding |
+| popover.title.font-size | Controls the font size of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-font-size |
+| popover.title.font-weight | Controls the font weight of calendar popover titles. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-popover-title-font-weight |
+| popover.title.font-family | Sets the font family of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-font-family |
+| popover.title.line-height | Controls the line height of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-line-height |
+| event.background | Sets the background color of calendar events.<br>CSS variable: --wm-calendar-event-background |
+| event.color | Sets the text color of calendar events.<br>CSS variable: --wm-calendar-event-color |
+| event.dot.color | Sets the color of calendar event dots.<br>CSS variable: --wm-calendar-event-dot-color |
+| header.font-weight | Controls the font weight of calendar header columns text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-header-text-font-weight |
+| header.font-family | Controls the font family of calendar header columns text.<br>CSS variable: --wm-calendar-header-text-font-family |
+| header.font-size | Controls the font size of calendar header columns text.<br>CSS variable: --wm-calendar-header-text-font-size |
+| header.color | Controls the text color of calendar header columns.<br>CSS variable: --wm-calendar-header-color |
+| header.background | Controls the background color of calendar header columns.<br>CSS variable: --wm-calendar-header-background |