@for-the-people-initiative/design-system 1.3.1

package/tokens/components/mega-menu.json

@@ -0,0 +1,283 @@
+{
+  "mega-menu": {
+    "root": {
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Menu bar background"
+      },
+      "padding": {
+        "x": {
+          "value": "{space.m}",
+          "type": "dimension",
+          "description": "Menu bar horizontal padding"
+        },
+        "y": {
+          "value": "{space.xs}",
+          "type": "dimension",
+          "description": "Menu bar vertical padding"
+        }
+      },
+      "gap": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Gap between root items"
+      }
+    },
+    "rootItem": {
+      "padding": {
+        "x": {
+          "value": "{space.m}",
+          "type": "dimension",
+          "description": "Root item horizontal padding"
+        },
+        "y": {
+          "value": "{space.s}",
+          "type": "dimension",
+          "description": "Root item vertical padding"
+        }
+      },
+      "text": {
+        "color": {
+          "default": {
+            "value": "{text.default}",
+            "type": "color",
+            "description": "Root item text color"
+          },
+          "hover": {
+            "value": "{brand.primary}",
+            "type": "color",
+            "description": "Root item hover text color"
+          },
+          "active": {
+            "value": "{brand.primary}",
+            "type": "color",
+            "description": "Active root item text color"
+          }
+        },
+        "fontSize": {
+          "value": "14px",
+          "type": "dimension",
+          "description": "Root item font size"
+        },
+        "fontWeight": {
+          "default": {
+            "value": "500",
+            "type": "number",
+            "description": "Root item font weight"
+          },
+          "active": {
+            "value": "600",
+            "type": "number",
+            "description": "Active root item font weight"
+          }
+        }
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Root item background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Root item hover background"
+        },
+        "active": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Active root item background"
+        }
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Root item border radius"
+      },
+      "indicator": {
+        "height": {
+          "value": "2px",
+          "type": "dimension",
+          "description": "Active indicator height"
+        },
+        "color": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Active indicator color"
+        }
+      }
+    },
+    "panel": {
+      "background": {
+        "value": "{surface.elevated}",
+        "type": "color",
+        "description": "Dropdown panel background"
+      },
+      "border": {
+        "color": {
+          "value": "{border.subtle}",
+          "type": "color",
+          "description": "Panel border color"
+        },
+        "width": {
+          "value": "1px",
+          "type": "dimension",
+          "description": "Panel border width"
+        }
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Panel border radius"
+      },
+      "shadow": {
+        "value": "{shadow.m}",
+        "type": "shadow",
+        "description": "Panel shadow"
+      },
+      "padding": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Panel padding"
+      },
+      "gap": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Gap between columns"
+      },
+      "maxWidth": {
+        "value": "960px",
+        "type": "dimension",
+        "description": "Maximum panel width"
+      },
+      "zIndex": {
+        "value": "1050",
+        "type": "number",
+        "description": "Panel z-index"
+      }
+    },
+    "column": {
+      "minWidth": {
+        "value": "200px",
+        "type": "dimension",
+        "description": "Minimum column width"
+      },
+      "gap": {
+        "value": "{space.xs}",
+        "type": "dimension",
+        "description": "Gap between column items"
+      }
+    },
+    "category": {
+      "text": {
+        "color": {
+          "value": "{text.heading}",
+          "type": "color",
+          "description": "Category heading color"
+        },
+        "fontSize": {
+          "value": "12px",
+          "type": "dimension",
+          "description": "Category heading font size"
+        },
+        "fontWeight": {
+          "value": "600",
+          "type": "number",
+          "description": "Category heading font weight"
+        },
+        "textTransform": {
+          "value": "uppercase",
+          "type": "string",
+          "description": "Category text transform"
+        },
+        "letterSpacing": {
+          "value": "0.5px",
+          "type": "dimension",
+          "description": "Category letter spacing"
+        }
+      },
+      "margin": {
+        "bottom": {
+          "value": "{space.s}",
+          "type": "dimension",
+          "description": "Space below category heading"
+        }
+      }
+    },
+    "item": {
+      "padding": {
+        "x": {
+          "value": "{space.s}",
+          "type": "dimension",
+          "description": "Item horizontal padding"
+        },
+        "y": {
+          "value": "{space.xs}",
+          "type": "dimension",
+          "description": "Item vertical padding"
+        }
+      },
+      "text": {
+        "color": {
+          "default": {
+            "value": "{text.default}",
+            "type": "color",
+            "description": "Item text color"
+          },
+          "hover": {
+            "value": "{brand.primary}",
+            "type": "color",
+            "description": "Item hover text color"
+          }
+        },
+        "fontSize": {
+          "value": "14px",
+          "type": "dimension",
+          "description": "Item font size"
+        }
+      },
+      "background": {
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Item hover background"
+        }
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Item border radius"
+      },
+      "icon": {
+        "size": {
+          "value": "16px",
+          "type": "dimension",
+          "description": "Item icon size"
+        },
+        "color": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Item icon color"
+        },
+        "gap": {
+          "value": "{space.s}",
+          "type": "dimension",
+          "description": "Gap between icon and text"
+        }
+      },
+      "description": {
+        "color": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Item description color"
+        },
+        "fontSize": {
+          "value": "12px",
+          "type": "dimension",
+          "description": "Item description font size"
+        }
+      }
+    }
+  }
+}

package/tokens/components/menu.json

@@ -0,0 +1,145 @@
+{
+  "menu": {
+    "background": {
+      "value": "{surface.elevated}",
+      "type": "color",
+      "description": "Menu popup background"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Menu border width"
+      },
+      "color": {
+        "value": "{neutral.200}",
+        "type": "color",
+        "description": "Menu border color"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Menu border radius"
+    },
+    "shadow": {
+      "value": "{shadow.m}",
+      "type": "shadow",
+      "description": "Menu popup shadow"
+    },
+    "padding": {
+      "value": "{space.xs}",
+      "type": "dimension",
+      "description": "Menu content padding"
+    },
+    "minWidth": {
+      "value": "180px",
+      "type": "dimension",
+      "description": "Minimum menu width"
+    },
+    "maxHeight": {
+      "value": "320px",
+      "type": "dimension",
+      "description": "Maximum menu height before scrolling"
+    },
+    "zIndex": {
+      "value": "1000",
+      "type": "number",
+      "description": "Z-index for stacking"
+    },
+    "item": {
+      "padding": {
+        "x": {
+          "value": "{space.m}",
+          "type": "dimension",
+          "description": "Item horizontal padding"
+        },
+        "y": {
+          "value": "{space.s}",
+          "type": "dimension",
+          "description": "Item vertical padding"
+        }
+      },
+      "gap": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Gap between icon and label"
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Item border radius"
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Default item background"
+        },
+        "hover": {
+          "value": "{neutral.100}",
+          "type": "color",
+          "description": "Item hover background"
+        },
+        "active": {
+          "value": "{neutral.200}",
+          "type": "color",
+          "description": "Item active/pressed background"
+        },
+        "disabled": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Disabled item background"
+        }
+      },
+      "text": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Default item text color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Disabled item text color"
+        }
+      },
+      "icon": {
+        "size": {
+          "value": "18px",
+          "type": "dimension",
+          "description": "Item icon size"
+        },
+        "color": {
+          "default": {
+            "value": "{text.muted}",
+            "type": "color",
+            "description": "Default icon color"
+          },
+          "disabled": {
+            "value": "{neutral.300}",
+            "type": "color",
+            "description": "Disabled icon color"
+          }
+        }
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Item font size"
+      }
+    },
+    "separator": {
+      "color": {
+        "value": "{neutral.200}",
+        "type": "color",
+        "description": "Separator line color"
+      },
+      "margin": {
+        "value": "{space.xs}",
+        "type": "dimension",
+        "description": "Separator vertical margin"
+      }
+    }
+  }
+}

package/tokens/components/menubar.json

@@ -0,0 +1,152 @@
+{
+  "menubar": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Menubar background color"
+    },
+    "padding": {
+      "value": "{space.s}",
+      "type": "dimension",
+      "description": "Menubar container padding"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Border width"
+      },
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Border color"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Border radius"
+      }
+    },
+    "item": {
+      "padding": {
+        "value": "{space.xs} {space.s}",
+        "type": "dimension",
+        "description": "Menu item padding"
+      },
+      "gap": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Gap between icon and label"
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Item text color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Item text color on hover"
+        },
+        "active": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Item text color when active"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Item text color when disabled"
+        }
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Item background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Item background on hover"
+        },
+        "active": {
+          "value": "{surface.accent}",
+          "type": "color",
+          "description": "Item background when active"
+        }
+      },
+      "borderRadius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Item border radius"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Icon color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Icon color on hover"
+        }
+      }
+    },
+    "submenu": {
+      "background": {
+        "value": "{surface.panel}",
+        "type": "color",
+        "description": "Submenu background"
+      },
+      "minWidth": {
+        "value": "200px",
+        "type": "dimension",
+        "description": "Submenu minimum width"
+      },
+      "padding": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Submenu container padding"
+      },
+      "borderRadius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Submenu border radius"
+      },
+      "shadow": {
+        "value": "{shadow.m}",
+        "type": "shadow",
+        "description": "Submenu shadow"
+      }
+    },
+    "separator": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Separator color"
+      },
+      "margin": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Separator vertical margin"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}