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

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

@@ -0,0 +1,328 @@
+{
+  "datepicker": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-date"
+        },
+        "states": {
+          "hover": {
+            "selector": {
+              "web": " span:hover"
+            }
+          },
+          "active": {
+            "selector": {
+              "web": " span:active"
+            }
+          },
+          "focus": {
+            "selector": {
+              "web": " span:focus"
+            }
+          },
+          "select": {
+            "selector": {
+              "web": " span.selected"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "color": {
+        "value": "{color.on-surface.@.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the text color of date picker elements (calendar interface where users select dates). This determines what color the date picker text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-datepicker-color"
+        }
+      },
+      "background": {
+        "value": "{color.surface.container.high.@.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the background color of date picker elements (calendar interface where users select dates). This is the main background color that appears behind the calendar interface.<br>CSS variable: --wm-datepicker-background"
+        }
+      },
+      "border": {
+        "radius": {
+          "value": "{radius.lg.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the corner rounding of date picker elements (calendar interface where users select dates). This makes the date picker appear with rounded corners for a softer appearance.<br>CSS variable: --wm-datepicker-border-radius"
+          }
+        }
+      },
+      "previous": {
+        "icon": {
+          "value": "\"\\f30f\"",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Sets the icon for previous navigation in date picker (the arrow button that moves to the previous month). This determines which icon symbol is displayed for the previous month button.<br>CSS variable: --wm-datepicker-previous-icon"
+          }
+        }
+      },
+      "next": {
+        "icon": {
+          "value": "\"\\f310\"",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Sets the icon for next navigation in date picker (the arrow button that moves to the next month). This determines which icon symbol is displayed for the next month button.<br>CSS variable: --wm-datepicker-next-icon"
+          }
+        }
+      },
+      "font-family": {
+        "value": "{body.medium.font-family.value}",
+        "type": "font",
+        "attributes": {
+          "subtype": "font-family",
+          "description": "Sets the typeface (font style) for date picker text (calendar interface where users select dates). This determines whether the date picker text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-datepicker-font-family"
+        }
+      },
+      "font-size": {
+        "value": "{body.medium.font-size.value}",
+        "type": "font",
+        "attributes": {
+          "subtype": "font-size",
+          "description": "Controls how large the date picker text appears (calendar interface where users select dates). This affects the size of the text that users see in the date picker.<br>CSS variable: --wm-datepicker-font-size"
+        }
+      },
+      "font-weight": {
+        "value": "{body.medium.font-weight.value}",
+        "type": "font",
+        "attributes": {
+          "subtype": "font-weight",
+          "description": "Controls how thick or bold the date picker text appears (calendar interface where users select dates). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-datepicker-font-weight"
+        }
+      },
+      "line-height": {
+        "value": "{body.medium.line-height.value}",
+        "type": "font",
+        "attributes": {
+          "subtype": "line-height",
+          "description": "Controls the vertical spacing between lines when date picker text wraps to multiple lines. This ensures proper spacing for the text displayed in the date picker.<br>CSS variable: --wm-datepicker-line-height"
+        }
+      },
+      "letter-spacing": {
+        "value": "{body.medium.letter-spacing.value}",
+        "type": "font",
+        "attributes": {
+          "subtype": "letter-spacing",
+          "description": "Controls the horizontal spacing between individual characters in date picker text. This can help make the date picker text more readable and properly spaced.<br>CSS variable: --wm-datepicker-letter-spacing"
+        }
+      },
+      "date": {
+        "width": {
+          "value": "{space.8.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls how wide date cells appear in the date picker (individual date boxes in the calendar grid). This determines the horizontal size of each date cell that users can click to select dates.<br>CSS variable: --wm-datepicker-date-width"
+          }
+        },
+        "height": {
+          "value": "{space.8.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls how tall date cells appear in the date picker (individual date boxes in the calendar grid). This determines the vertical size of each date cell that users can click to select dates.<br>CSS variable: --wm-datepicker-date-height"
+          }
+        },
+        "color": {
+          "value": "{color.on-surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of date cells (individual date boxes in the calendar grid). This determines what color the date numbers appear in, which should contrast well with the background for readability.<br>CSS variable: --wm-datepicker-date-color"
+          }
+        },
+        "background": {
+          "value": "{color.surface.container.high.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of date cells (individual date boxes in the calendar grid). This is the main background color that appears behind each date number.<br>CSS variable: --wm-datepicker-date-background"
+          }
+        },
+        "border": {
+          "width": {
+            "value": "{border.width.base.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around date cells (individual date boxes in the calendar grid). This creates the outline that defines each date cell shape.<br>CSS variable: --wm-datepicker-date-border-width"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the style of the border around date cells (individual date boxes in the calendar grid). 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots, 'none' removes the border.<br>CSS variable: --wm-datepicker-date-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.surface.container.high.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the border around date cells (individual date boxes in the calendar grid). This determines the color of the outline that defines each date cell shape.<br>CSS variable: --wm-datepicker-date-border-color"
+            }
+          },
+          "radius": {
+            "value": "{radius.pill.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of date cells (individual date boxes in the calendar grid). When set to 'pill', the date cells appear with fully rounded corners, creating a pill-shaped appearance.<br>CSS variable: --wm-datepicker-date-border-radius"
+            }
+          }
+        },
+        "font-family": {
+          "value": "{body.medium.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for date cell text (the numbers that appear in each date box). This determines whether the date numbers appear in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-datepicker-date-font-family"
+          }
+        },
+        "font-size": {
+          "value": "{body.medium.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large the date cell text appears (the numbers that appear in each date box). This affects the size of the date numbers that users see and interact with.<br>CSS variable: --wm-datepicker-date-font-size"
+          }
+        },
+        "font-weight": {
+          "value": "{body.medium.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the date cell text appears (the numbers that appear in each date box). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-datepicker-date-font-weight"
+          }
+        },
+        "line-height": {
+          "value": "{body.medium.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when date cell text wraps to multiple lines. This ensures proper spacing for the date numbers displayed in each cell.<br>CSS variable: --wm-datepicker-date-line-height"
+          }
+        },
+        "other": {
+          "month": {
+            "color": {
+              "value": "{color.on-surface.variant.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the color of other month dates (dates from previous/next months that appear in the current month view). This determines what color these dates appear in to distinguish them from the current month's dates.<br>CSS variable: --wm-datepicker-date-other-month-color"
+              }
+            }
+          }
+        },
+        "state": {
+          "layer": {
+            "opacity": {
+              "value": "0",
+              "type": "radius",
+              "attributes": {
+                "subtype": "opacity",
+                "description": "Controls the transparency of the state layer that appears during user interactions with date cells (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-datepicker-date-state-layer-opacity"
+              }
+            },
+            "color": {
+              "value": "{color.on-surface.variant.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the color of the state layer that appears when users hover, focus, or interact with date cells. This creates visual feedback to show that the date cell is interactive and responsive to user actions.<br>CSS variable: --wm-datepicker-date-state-layer-color"
+              }
+            }
+          }
+        }
+      },
+      "states": {
+        "hover": {
+          "date": {
+            "state": {
+              "layer": {
+                "opacity": {
+                  "value": "{opacity.hover.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "opacity"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "focus": {
+          "date": {
+            "state": {
+              "layer": {
+                "opacity": {
+                  "value": "{opacity.focus.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "opacity"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "active": {
+          "date": {
+            "state": {
+              "layer": {
+                "opacity": {
+                  "value": "{opacity.active.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "opacity"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "select": {
+          "date": {
+            "color": {
+              "value": "{color.surface.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            },
+            "background": {
+              "value": "{color.secondary.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            },
+            "border": {
+              "color": {
+                "value": "{color.secondary.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "appearances": {}
+  }
+}

package/src/tokens/web/components/dropdown-menu/Readme.md

@@ -0,0 +1,16 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Dropdown Variants
+
+This component supports the following appearances and variants. To apply them, use the corresponding class(es) on your widget.
+
+---
+
+## Appearance: Default
+
+**Variants:**
+
+| Variant Name | Class |
+|--------------|-------|
+| Vertical | `dropdown  dropdown-menu` |
+| Horizontal | `dropdown  dropdown-menu horizontal` |

package/src/tokens/web/components/dropdown-menu/Token.Readme.md

@@ -0,0 +1,25 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| menu.padding | Controls the internal spacing inside dropdown menu containers (the space between the menu content and its borders). This creates breathing room around the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-padding |
+| menu.inline.submenu.padding | Controls the internal spacing inside inline submenu items (nested menu items that appear within the main dropdown). This creates breathing room around the submenu content.<br>CSS variable: --wm-dropdown-menu-inline-submenu-padding |
+| menu.background | Sets the background color of dropdown menus (lists of options that appear when users click on a button or link). This is the main background color that appears behind the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-background |
+| menu.box-shadow | Controls the drop shadow effect around dropdown menus (lists of options that appear when users click on a button or link). This creates a subtle shadow that makes the dropdown appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-dropdown-menu-box-shadow |
+| menu.border.radius | Controls the corner rounding of dropdown menus (lists of options that appear when users click on a button or link). This makes the dropdown appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-dropdown-menu-border-radius |
+| menu.width | Controls how wide dropdown menus appear (lists of options that appear when users click on a button or link). This determines the horizontal size of the dropdown menu container.<br>CSS variable: --wm-dropdown-menu-width |
+| menu.caret.size | Controls how large dropdown menu caret icons appear (the small arrow symbols that indicate dropdown menus). This affects the size of the arrow symbols that users see in dropdown buttons.<br>CSS variable: --wm-dropdown-menu-caret-size |
+| menu.item.font-family | Sets the typeface (font style) for dropdown menu items (individual options in the dropdown list). This determines whether the menu item text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-dropdown-menu-item-font-family |
+| menu.item.font-size | Controls how large the dropdown menu items appear (individual options in the dropdown list). This affects the size of the text that users see in each menu option.<br>CSS variable: --wm-dropdown-menu-item-font-size |
+| menu.item.font-weight | Controls how thick or bold the dropdown menu items appear (individual options in the dropdown list). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-dropdown-menu-item-font-weight |
+| menu.item.line-height | Controls the vertical spacing between lines when dropdown menu item text wraps to multiple lines. This ensures proper spacing for the menu item text displayed in the dropdown.<br>CSS variable: --wm-dropdown-menu-item-line-height |
+| menu.item.letter-spacing | Controls the horizontal spacing between individual characters in dropdown menu items. This can help make the menu item text more readable and properly spaced.<br>CSS variable: --wm-dropdown-menu-item-letter-spacing |
+| menu.item.color | Sets the text color of dropdown menu items (individual options in the dropdown list). This determines what color the menu item text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-dropdown-menu-item-color |
+| menu.item.gap | Controls the spacing between elements within dropdown menu items (like the space between text and icons). This creates visual separation between different parts of each menu item.<br>CSS variable: --wm-dropdown-menu-item-gap |
+| menu.item.padding | Controls the internal spacing inside dropdown menu items (the space between the menu item content and its borders). This creates breathing room around each menu option.<br>CSS variable: --wm-dropdown-menu-item-padding |
+| menu.item.state.layer.color | Sets the color of the state layer that appears when users hover, focus, or interact with dropdown menu items. This creates visual feedback to show that the menu item is interactive and responsive to user actions.<br>CSS variable: --wm-dropdown-menu-item-state-layer-color |
+| menu.item.state.layer.opacity | Controls the transparency of the state layer that appears during user interactions with dropdown menu items (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-dropdown-menu-item-state-layer-opacity |

package/src/tokens/web/components/dropdown-menu/dropdown-menu.json

@@ -0,0 +1,259 @@
+{
+  "dropdown": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".dropdown"
+        },
+        "states": {
+          "active": {
+            "selector": {
+              "web": " .dropdown-menu .app-menu-item a:active:before, .dropdown-menu li a:active:before"
+            }
+          },
+          "focus": {
+            "selector": {
+              "web": " .dropdown-menu .app-menu-item a:focus:before, .dropdown-menu li a:focus:before"
+            }
+          },
+          "hover": {
+            "selector": {
+              "web": " .dropdown-menu .app-menu-item a:hover:before, .dropdown-menu li a:hover:before"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "menu": {
+        "padding": {
+          "value": "{space.0.value} {space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the internal spacing inside dropdown menu containers (the space between the menu content and its borders). This creates breathing room around the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-padding"
+          }
+        },
+        "inline": {
+          "submenu": {
+            "padding": {
+              "value": "{space.0.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the internal spacing inside inline submenu items (nested menu items that appear within the main dropdown). This creates breathing room around the submenu content.<br>CSS variable: --wm-dropdown-menu-inline-submenu-padding"
+              }
+            }
+          }
+        },
+        "background": {
+          "value": "{color.surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of dropdown menus (lists of options that appear when users click on a button or link). This is the main background color that appears behind the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-background"
+          }
+        },
+        "box-shadow": {
+          "value": "{elevation.shadow.2.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "elevation",
+            "description": "Controls the drop shadow effect around dropdown menus (lists of options that appear when users click on a button or link). This creates a subtle shadow that makes the dropdown appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-dropdown-menu-box-shadow"
+          }
+        },
+        "border": {
+          "radius": {
+            "value": "{radius.xs.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of dropdown menus (lists of options that appear when users click on a button or link). This makes the dropdown appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-dropdown-menu-border-radius"
+            }
+          },
+          "color": {
+            "value": "{color.on-surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style"
+            }
+          },
+          "width": {
+            "value": "{border.width.0.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius"
+            }
+          }
+        },
+        "width": {
+          "value": "220px",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls how wide dropdown menus appear (lists of options that appear when users click on a button or link). This determines the horizontal size of the dropdown menu container.<br>CSS variable: --wm-dropdown-menu-width"
+          }
+        },
+        "caret": {
+          "size": {
+            "value": "{icon.size.sm.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "icon-size",
+              "description": "Controls how large dropdown menu caret icons appear (the small arrow symbols that indicate dropdown menus). This affects the size of the arrow symbols that users see in dropdown buttons.<br>CSS variable: --wm-dropdown-menu-caret-size"
+            }
+          }
+        },
+        "item": {
+          "font-family": {
+            "value": "{body.large.font-family.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-family",
+              "description": "Sets the typeface (font style) for dropdown menu items (individual options in the dropdown list). This determines whether the menu item text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-dropdown-menu-item-font-family"
+            }
+          },
+          "font-size": {
+            "value": "{body.large.font-size.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-size",
+              "description": "Controls how large the dropdown menu items appear (individual options in the dropdown list). This affects the size of the text that users see in each menu option.<br>CSS variable: --wm-dropdown-menu-item-font-size"
+            }
+          },
+          "font-weight": {
+            "value": "{body.large.font-weight.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "font-weight",
+              "description": "Controls how thick or bold the dropdown menu items appear (individual options in the dropdown list). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-dropdown-menu-item-font-weight"
+            }
+          },
+          "line-height": {
+            "value": "{body.large.line-height.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "line-height",
+              "description": "Controls the vertical spacing between lines when dropdown menu item text wraps to multiple lines. This ensures proper spacing for the menu item text displayed in the dropdown.<br>CSS variable: --wm-dropdown-menu-item-line-height"
+            }
+          },
+          "letter-spacing": {
+            "value": "{body.large.letter-spacing.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "letter-spacing",
+              "description": "Controls the horizontal spacing between individual characters in dropdown menu items. This can help make the menu item text more readable and properly spaced.<br>CSS variable: --wm-dropdown-menu-item-letter-spacing"
+            }
+          },
+          "color": {
+            "value": "{color.on-surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the text color of dropdown menu items (individual options in the dropdown list). This determines what color the menu item text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-dropdown-menu-item-color"
+            }
+          },
+          "gap": {
+            "value": "{space.3.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the spacing between elements within dropdown menu items (like the space between text and icons). This creates visual separation between different parts of each menu item.<br>CSS variable: --wm-dropdown-menu-item-gap"
+            }
+          },
+          "padding": {
+            "value": "{space.3.value} {space.4.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the internal spacing inside dropdown menu items (the space between the menu item content and its borders). This creates breathing room around each menu option.<br>CSS variable: --wm-dropdown-menu-item-padding"
+            }
+          },
+          "state": {
+            "layer": {
+              "color": {
+                "value": "{color.on-surface.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the color of the state layer that appears when users hover, focus, or interact with dropdown menu items. This creates visual feedback to show that the menu item is interactive and responsive to user actions.<br>CSS variable: --wm-dropdown-menu-item-state-layer-color"
+                }
+              },
+              "opacity": {
+                "value": "0",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "opacity",
+                  "description": "Controls the transparency of the state layer that appears during user interactions with dropdown menu items (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-dropdown-menu-item-state-layer-opacity"
+                }
+              }
+            }
+          }
+        }
+      },
+      "states": {
+        "hover": {
+          "menu": {
+            "item": {
+              "state": {
+                "layer": {
+                  "opacity": {
+                    "hover": {
+                      "value": "{opacity.hover.value}",
+                      "type": "radius",
+                      "attributes": {
+                        "subtype": "opacity"
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        },
+        "focus": {
+          "menu": {
+            "item": {
+              "state": {
+                "layer": {
+                  "opacity": {
+                    "value": "{opacity.focus.value}",
+                    "type": "radius",
+                    "attributes": {
+                      "subtype": "opacity"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        },
+        "active": {
+          "menu": {
+            "item": {
+              "state": {
+                "layer": {
+                  "opacity": {
+                    "value": "{opacity.active.value}",
+                    "type": "radius",
+                    "attributes": {
+                      "subtype": "opacity"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "appearances": {}
+  }
+}