npm - @wavemaker/foundation-css - Versions diffs - 12.0.0-next.25480 → 12.0.0-next.28533 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (236) hide show

package/src/tokens/web/components/calendar/calendar.json CHANGED Viewed

@@ -8,224 +8,494 @@
       }
     },
     "mapping": {
-      "view": {
-        "shadow": {
-          "value": "{elevation.shadow.1.value}",
+      "shadow": {
+        "value": "{elevation.shadow.1.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "elevation",
+          "description": "Controls the shadow of the calendar view container.<br>CSS variable: --wm-calendar-view-shadow"
+        }
+      },
+      "border": {
+        "color": {
+          "value": "{color.border.translucent.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the border color of the calendar view.<br>CSS variable: --wm-calendar-view-border-color"
+          }
+        },
+        "style": {
+          "value": "{border.style.base.value}",
           "type": "radius",
           "attributes": {
-            "subtype": "elevation",
-            "description": "Controls the shadow of the calendar view container.<br>CSS variable: --wm-calendar-view-shadow"
+            "subtype": "border-style",
+            "description": "Controls the border style of the calendar view. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-calendar-view-border-style"
           }
         },
-        "border": {
-          "color": {
-            "value": "{color.border.translucent.value}",
+        "width": {
+          "value": "{border.width.base.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the border width of the calendar view.<br>CSS variable: --wm-calendar-view-border-width"
+          }
+        }
+      },
+      "radius": {
+        "value": "{radius.md.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "radius",
+          "description": "Controls the border radius of the calendar view.<br>CSS variable: --wm-calendar-view-radius"
+        }
+      },
+      "background": {
+        "value": "{color.transparent.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Controls the background color of the calendar view.<br>CSS variable: --wm-calendar-view-background"
+        }
+      },
+      "toolbar-title": {
+        "font-weight": {
+          "value": "{font.weight.700.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls the font weight of the calendar title. <br>CSS variable: --wm-calendar-toolbar-title-font-weight"
+          }
+        },
+        "font-family": {
+          "value": "{body.medium.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Controls the font family of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-font-family"
+          }
+        },
+        "font-size": {
+          "value": "{body.medium.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the font size of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-font-size"
+          }
+        },
+        "letter-spacing": {
+          "value": "{body.medium.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the letter spacing of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-letter-spacing"
+          }
+        },
+        "line-height": {
+          "value": "{body.medium.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the line height of the calendar title.<br>CSS variable: --wm-calendar-toolbar-title-line-height"
+          }
+        }
+      },
+      "button": {
+        "background": {
+          "value": "{color.on-surface.variant.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Controls the background color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-background"
+          }
+        },
+        "color": {
+          "value": "{color.white.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Controls the text color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-color"
+          }
+        },
+        "border-color": {
+          "value": "{color.border.translucent.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Controls the border color of the buttons in the calendar toolbar.<br>CSS variable: --wm-calendar-button-border-color"
+          }
+        },
+        "font-weight": {
+          "value": "{body.small.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls the font weight of the button captions in the calendar toolbar.<br>CSS variable: --wm-calendar-button-font-weight"
+          }
+        },
+        "font-family": {
+          "value": "{body.small.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Controls the font family of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-font-family"
+          }
+        },
+        "font-size": {
+          "value": "{body.small.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the font size of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-font-size"
+          }
+        },
+        "letter-spacing": {
+          "value": "{body.small.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the letter spacing of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-letter-spacing"
+          }
+        },
+        "line-height": {
+          "value": "{body.small.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the line height of the button captions in the calendar toolbar<br>CSS variable: --wm-calendar-button-line-height"
+          }
+        },
+        "border-width": {
+          "value": "{border.width.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the border width of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-width"
+          }
+        },
+        "border-style": {
+          "value": "{border.style.base.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Controls the border style of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-style"
+          }
+        },
+        "border-radius": {
+          "value": "{radius.xxs.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the border radius of the buttons in the calendar toolbar<br>CSS variable: --wm-calendar-button-border-radius"
+          }
+        },
+        "active": {
+          "background": {
+            "value": "{color.on-surface.variant.@.value}",
             "type": "color",
             "attributes": {
               "subtype": "color",
-              "description": "Sets the border color of the calendar view.<br>CSS variable: --wm-calendar-view-border-color"
+              "description": "Controls the background color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-background"
             }
           },
-          "style": {
+          "border-color": {
+            "value": "{color.on-surface.variant.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Controls the border color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-border-color"
+            }
+          },
+          "border-width": {
+            "value": "{border.width.1.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the border width of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-border-width"
+            }
+          },
+          "border-style": {
             "value": "{border.style.base.value}",
             "type": "radius",
             "attributes": {
               "subtype": "border-style",
-              "description": "Controls the border style of the calendar view. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-calendar-view-border-style"
+              "description": "Controls the border style of the active button in the calendar toolbar<br>CSS variable: --wm-calendar-button-active-border-style"
             }
           },
-          "width": {
-            "value": "{border.width.base.value}",
-            "type": "space",
+          "border-radius": {
+            "value": "{radius.xxs.value}",
+            "type": "radius",
             "attributes": {
-              "subtype": "border-width",
-              "description": "Controls the border width of the calendar view.<br>CSS variable: --wm-calendar-view-border-width"
+              "subtype": "radius",
+              "description": "Controls the border radius of the active button in the calendar toolbar<br>CSS variable: --wm-calendar-button-active-border-radius"
+            }
+          },
+          "color": {
+            "value": "{color.white.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Controls the text color of the active button in the calendar toolbar.<br>CSS variable: --wm-calendar-button-active-color"
             }
           }
+        }
+      },
+      "date": {
+        "padding": {
+          "value": "{space.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the padding of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-padding"
+          }
         },
-        "radius": {
-          "value": "{radius.md.value}",
-          "type": "radius",
+        "font-weight": {
+          "value": "{body.small.font-weight.value}",
+          "type": "font",
           "attributes": {
-            "subtype": "radius",
-            "description": "Controls the border radius of the calendar view.<br>CSS variable: --wm-calendar-view-radius"
+            "subtype": "font-weight",
+            "description": "Controls the font weight of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-weight"
           }
-        }
-      },
-      "fc": {
-        "header": {
-          "vertical": {
-            "padding": {
-              "value": "{space.4.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls vertical padding of the calendar header.<br>CSS variable: --wm-calendar-fc-header-vertical-padding"
-              }
-            }
-          },
-          "horizontal": {
-            "padding": {
-              "value": "{space.5.value}",
-              "type": "space",
-              "attributes": {
-                "subtype": "space",
-                "description": "Controls horizontal padding of the calendar header.<br>CSS variable: --wm-calendar-fc-header-horizontal-padding"
-              }
+        },
+        "font-family": {
+          "value": "{body.small.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Controls the font family of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-family"
+          }
+        },
+        "font-size": {
+          "value": "{body.small.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the font size of the date cells in the calendar.<br>CSS variable: --wm-calendar-date-font-size"
+          }
+        },
+        "color": {
+          "value": "{color.on-background.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of calendar anchor elements.<br>CSS variable: --wm-calendar-anchor-color"
+          }
+        },
+        "today": {
+          "background": {
+            "value": "{color.warning.container.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Controls the background color of current day cell in the calendar.<br>CSS variable: --wm-calendar-daygrid-today-background"
             }
           },
           "text": {
-            "font-weight": {
-              "value": "{font.weight.700.value}",
-              "type": "font",
+            "color": {
+              "value": "{color.on-background.@.value}",
+              "type": "color",
               "attributes": {
-                "subtype": "font-weight",
-                "description": "Controls the font weight of calendar header text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-fc-header-text-font-weight"
+                "subtype": "color",
+                "description": "Controls the text color of current day cell in the calendar .<br>CSS variable: --wm-calendar-daygrid-today-text-color"
               }
             }
           }
-        },
-        "time": {
-          "text": {
-            "font-weight": {
-              "value": "{font.weight.700.value}",
-              "type": "font",
-              "attributes": {
-                "subtype": "font-weight",
-                "description": "Controls the font weight of calendar time text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-fc-time-text-font-weight"
-              }
+        }
+      },
+      "toolbar": {
+        "vertical": {
+          "padding": {
+            "value": "{space.4.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls vertical padding of the calendar header.<br>CSS variable: --wm-calendar-toolbar-vertical-padding"
             }
           }
         },
-        "events": {
-          "gap": {
-            "value": "{space.1.value}",
+        "horizontal": {
+          "padding": {
+            "value": "{space.5.value}",
             "type": "space",
             "attributes": {
               "subtype": "space",
-              "description": "Controls spacing between calendar events.<br>CSS variable: --wm-calendar-fc-events-gap"
+              "description": "Controls horizontal padding of the calendar header.<br>CSS variable: --wm-calendar-toolbar-horizontal-padding"
             }
           }
-        },
-        "daygrid": {
-          "event": {
-            "radius": {
-              "value": "{radius.xs.value}",
-              "type": "radius",
-              "attributes": {
-                "subtype": "radius",
-                "description": "Controls the border radius of calendar day grid events.<br>CSS variable: --wm-calendar-fc-daygrid-event-radius"
-              }
+        }
+      },
+      "time": {
+        "text": {
+          "font-weight": {
+            "value": "{font.weight.700.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls the font weight of calendar time text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-time-text-font-weight"
             }
           }
-        },
-        "v": {
-          "event": {
-            "main": {
-              "color": {
-                "value": "{color.primary.@.value}",
-                "type": "color",
-                "attributes": {
-                  "subtype": "color",
-                  "description": "Sets the main color of calendar events.<br>CSS variable: --wm-calendar-fc-v-event-main-color"
-                }
-              }
-            }
+        }
+      },
+      "events": {
+        "gap": {
+          "value": "{space.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls spacing between calendar events.<br>CSS variable: --wm-calendar-events-gap"
           }
-        },
-        "popover": {
+        }
+      },
+      "daygrid": {
+        "event": {
           "radius": {
-            "value": "{radius.sm.value}",
+            "value": "{radius.xs.value}",
             "type": "radius",
             "attributes": {
               "subtype": "radius",
-              "description": "Controls the border radius of calendar popovers.<br>CSS variable: --wm-calendar-fc-popover-radius"
+              "description": "Controls the border radius of calendar day grid events.<br>CSS variable: --wm-calendar-daygrid-event-radius"
             }
-          },
-          "heading": {
-            "padding": {
-              "value": "{space.2.value}",
-              "type": "space",
+          }
+        }
+      },
+      "v": {
+        "event": {
+          "main": {
+            "color": {
+              "value": "{color.primary.@.value}",
+              "type": "color",
               "attributes": {
-                "subtype": "space",
-                "description": "Controls padding of calendar popover headings.<br>CSS variable: --wm-calendar-fc-popover-heading-padding"
+                "subtype": "color",
+                "description": "Sets the main color of calendar events.<br>CSS variable: --wm-calendar-v-event-main-color"
               }
             }
-          },
-          "title": {
-            "font-size": {
-              "value": "{body.medium.font-size.value}",
-              "type": "font",
-              "attributes": {
-                "subtype": "font-size",
-                "description": "Controls the font size of calendar popover titles.<br>CSS variable: --wm-calendar-fc-popover-title-font-size"
-              }
-            },
-            "font-weight": {
-              "value": "{font.weight.700.value}",
-              "type": "font",
-              "attributes": {
-                "subtype": "font-weight",
-                "description": "Controls the font weight of calendar popover titles. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-fc-popover-title-font-weight"
-              }
-            },
-            "font-family": {
-              "value": "{body.medium.font-family.value}",
-              "type": "font",
-              "attributes": {
-                "subtype": "font-family",
-                "description": "Sets the font family of calendar popover titles.<br>CSS variable: --wm-calendar-fc-popover-title-font-family"
-              }
-            },
-            "line-height": {
-              "value": "{body.medium.line-height.value}",
-              "type": "font",
-              "attributes": {
-                "subtype": "line-height",
-                "description": "Controls the line height of calendar popover titles.<br>CSS variable: --wm-calendar-fc-popover-title-line-height"
-              }
+          }
+        }
+      },
+      "popover": {
+        "radius": {
+          "value": "{radius.sm.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the border radius of calendar popovers.<br>CSS variable: --wm-calendar-popover-radius"
+          }
+        },
+        "heading": {
+          "padding": {
+            "value": "{space.2.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls padding of calendar popover headings.<br>CSS variable: --wm-calendar-popover-heading-padding"
             }
           }
         },
-        "event": {
-          "background": {
-            "value": "{color.primary.fixed.@.value}",
-            "type": "color",
+        "title": {
+          "font-size": {
+            "value": "{body.medium.font-size.value}",
+            "type": "font",
             "attributes": {
-              "subtype": "color",
-              "description": "Sets the background color of calendar events.<br>CSS variable: --wm-calendar-fc-event-background"
+              "subtype": "font-size",
+              "description": "Controls the font size of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-font-size"
             }
           },
-          "color": {
-            "value": "{color.surface.tint.@.value}",
-            "type": "color",
+          "font-weight": {
+            "value": "{font.weight.700.value}",
+            "type": "font",
             "attributes": {
-              "subtype": "color",
-              "description": "Sets the text color of calendar events.<br>CSS variable: --wm-calendar-fc-event-color"
+              "subtype": "font-weight",
+              "description": "Controls the font weight of calendar popover titles. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-popover-title-font-weight"
             }
           },
-          "dot": {
-            "color": {
-              "value": "{color.surface.tint.@.value}",
-              "type": "color",
-              "attributes": {
-                "subtype": "color",
-                "description": "Sets the color of calendar event dots.<br>CSS variable: --wm-calendar-fc-event-dot-color"
-              }
+          "font-family": {
+            "value": "{body.medium.font-family.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-family",
+              "description": "Sets the font family of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-font-family"
+            }
+          },
+          "line-height": {
+            "value": "{body.medium.line-height.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "line-height",
+              "description": "Controls the line height of calendar popover titles.<br>CSS variable: --wm-calendar-popover-title-line-height"
             }
           }
+        }
+      },
+      "event": {
+        "background": {
+          "value": "{color.primary.fixed.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of calendar events.<br>CSS variable: --wm-calendar-event-background"
+          }
         },
-        "anchor": {
+        "color": {
+          "value": "{color.surface.tint.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of calendar events.<br>CSS variable: --wm-calendar-event-color"
+          }
+        },
+        "dot": {
           "color": {
-            "value": "{color.on-background.@.value}",
+            "value": "{color.surface.tint.@.value}",
             "type": "color",
             "attributes": {
               "subtype": "color",
-              "description": "Sets the color of calendar anchor elements.<br>CSS variable: --wm-calendar-fc-anchor-color"
+              "description": "Sets the color of calendar event dots.<br>CSS variable: --wm-calendar-event-dot-color"
             }
           }
         }
+      },
+      "header": {
+        "font-weight": {
+          "value": "{body.small.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls the font weight of calendar header columns text. Acceptable values: normal, bold, 100-900.<br>CSS variable: --wm-calendar-header-text-font-weight"
+          }
+        },
+        "font-family": {
+          "value": "{body.small.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Controls the font family of calendar header columns text.<br>CSS variable: --wm-calendar-header-text-font-family"
+          }
+        },
+        "font-size": {
+          "value": "{body.small.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls the font size of calendar header columns text.<br>CSS variable: --wm-calendar-header-text-font-size"
+          }
+        },
+        "color": {
+          "value": "{color.on-background.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Controls the text color of calendar header columns.<br>CSS variable: --wm-calendar-header-color"
+          }
+        },
+        "background": {
+          "value": "{color.transparent.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Controls the background color of calendar header columns.<br>CSS variable: --wm-calendar-header-background"
+          }
+        }
       }
     }
   }
-}
+}