@wavemaker-ai/foundation-css 1.0.0-rc.647469

package/src/tokens/mobile/components/button-group/button-group.json

@@ -0,0 +1,51 @@
+{
+  "button-group": {
+    "meta": {
+      "appearances": {
+        "outlined": {
+          "mapping": {
+            "selector": {
+              "mobile": ".app-buttongroup"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "radius": {
+        "value": "{radius.sm.value}",
+        "type": "radius",
+        "attributes": {
+          "subtype": "radius",
+          "description": "Controls the corner rounding of button groups (connected buttons that appear as a single unit). This makes the outer corners of the button group rounded while keeping the inner buttons connected.<br>CSS variable: --wm-button-group-radius"
+        }
+      },
+      "border": {
+        "width": {
+          "value": "{border.width.base.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the thickness of borders around button groups (connected buttons that appear as a single unit). This determines how thick the border lines appear around the button group container.<br>CSS variable: --wm-button-group-border-width"
+          }
+        },
+        "style": {
+          "value": "{border.style.base.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Sets the visual style of borders around button groups (connected buttons that appear as a single unit). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line.<br>CSS variable: --wm-button-group-border-style"
+          }
+        },
+        "color": {
+          "value": "{color.surface.container.highest.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the color of borders around button groups (connected buttons that appear as a single unit). This determines what color the border lines appear in that outline the button group container.<br>CSS variable: --wm-button-group-border-color"
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,435 @@
+{
+  "calendar": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-calendar"
+        }
+      }
+    },
+    "mapping": {
+      "wrapper": {
+        "shadow": {
+          "value": "{elevation.shadow.1.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "elevation",
+            "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": "color",
+            "attributes": {
+              "subtype": "color",
+              "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": "border-style",
+            "attributes": {
+              "subtype": "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": {
+            "value": "{border.width.base.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "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"
+            }
+          },
+          "radius": {
+            "value": "{radius.md.value}",
+            "type": "radius",
+            "attributes": {
+              "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"
+            }
+          }
+        },
+        "background": {
+          "value": "{color.on-primary.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "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"
+          }
+        }
+      },
+      "width": {
+        "value": "100%",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "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": {
+        "value": "456px",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Sets the minimum height of the calendar, ensuring consistent spacing even with minimal content.<br>CSS variable: --wm-calendar-min-height"
+        }
+      },
+      "header": {
+        "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-header-background-color"
+          }
+        },
+        "border": {
+          "width": {
+            "value": "{border.width.0.value} {border.width.0.value} {border.width.base.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-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": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "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": {
+          "width": {
+            "value": "{border.width.0.value} {border.width.0.value} {border.width.base.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-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": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "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"
+            }
+          }
+        },
+        "padding": {
+          "value": "{radius.xxs.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the spacing around weekday labels, affecting the breathing room between text and container edges.<br>CSS variable: --wm-calendar-weekday-padding"
+          }
+        },
+        "text": {
+          "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-weekday-text-font-family"
+            }
+          },
+          "font-size": {
+            "value": "{space.4.value}",
+            "type": "space",
+            "attributes": {
+              "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"
+            }
+          }
+        }
+      },
+      "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": {
+        "color": {
+          "value": "#666666",
+          "type": "color",
+          "attributes": {
+            "subtype": "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": {
+          "value": "normal",
+          "type": "font",
+          "attributes": {
+            "subtype": "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"
+            }
+          }
+        }
+      },
+      "event-day1": {
+        "color1": {
+          "value": "rgb(117, 150, 255)",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "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": {
+          "value": "rgb(168, 201, 255)",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the second color variant for event days in the calendar. This determines what color appears for the second event indicator.<br>CSS variable: --wm-calendar-event-day1-color2"
+          }
+        },
+        "color3": {
+          "value": "rgb(194, 203, 248)",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the third color variant for event days in the calendar. This determines what color appears for the third event indicator.<br>CSS variable: --wm-calendar-event-day1-color3"
+          }
+        }
+      },
+      "selected-day": {
+        "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-selected-day-background"
+          }
+        },
+        "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

@@ -0,0 +1,73 @@
+{
+    "camera": {
+        "mapping": {
+            "background": {
+                "value": "{color.white.@.value}",
+                "type": "color",
+                "attributes": {
+                    "subtype": "color",
+                    "description": "Sets the background color of the camera component. This is the main background color that appears behind all camera content.<br>CSS variable: --wm-camera-background"
+                }
+            },
+            "color": {
+                "value": "#151420",
+                "type": "color",
+                "attributes": {
+                    "subtype": "color",
+                    "description": "Sets the text and icon color of the camera component. This determines what color the text and icons appear in.<br>CSS variable: --wm-camera-color"
+                }
+            },
+            "border": {
+                "color": {
+                    "value": "#ccc",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the border color of the camera component. This determines what color the border around the camera appears in.<br>CSS variable: --wm-camera-border-color"
+                    }
+                },
+                "width": {
+                    "value": "{border.width.1.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "border-width",
+                        "description": "Controls the border thickness of the camera component. This determines how thick the border around the camera appears.<br>CSS variable: --wm-camera-border-width"
+                    }
+                },
+                "radius": {
+                    "value": "20px",
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "radius",
+                        "description": "Controls the border radius for rounded corners of the camera component. This makes the camera appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-camera-border-radius"
+                    }
+                }
+            },
+            "min-height": {
+                "value": "30px",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the minimum height of the camera component. This determines the minimum vertical space the camera occupies.<br>CSS variable: --wm-camera-min-height"
+                }
+            },
+            "min-width": {
+                "value": "40px",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the minimum width of the camera component. This determines the minimum horizontal space the camera occupies.<br>CSS variable: --wm-camera-min-width"
+                }
+            },
+            "padding": {
+                "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": {}
+        }
+    }
+}