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

package/tokens/components/data-view.json

@@ -0,0 +1,172 @@
+{
+  "dataView": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "DataView container background"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Container border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Container border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Container border radius"
+    },
+    "header": {
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Header background color"
+      },
+      "padding": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Header padding"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header border color"
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Content area padding"
+      }
+    },
+    "grid": {
+      "gap": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Gap between grid items"
+      }
+    },
+    "list": {
+      "gap": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Gap between list items"
+      },
+      "item": {
+        "padding": {
+          "value": "{space.m}",
+          "type": "dimension",
+          "description": "List item padding"
+        },
+        "background": {
+          "default": {
+            "value": "transparent",
+            "type": "color",
+            "description": "List item background"
+          },
+          "hover": {
+            "value": "{surface.muted}",
+            "type": "color",
+            "description": "List item hover background"
+          }
+        },
+        "borderColor": {
+          "value": "{border.subtle}",
+          "type": "color",
+          "description": "List item border color"
+        },
+        "radius": {
+          "value": "{radius.subtle}",
+          "type": "dimension",
+          "description": "List item border radius"
+        }
+      }
+    },
+    "layoutSwitcher": {
+      "gap": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Gap between layout buttons"
+      },
+      "button": {
+        "size": {
+          "value": "32px",
+          "type": "dimension",
+          "description": "Layout button size"
+        },
+        "background": {
+          "default": {
+            "value": "transparent",
+            "type": "color",
+            "description": "Button default background"
+          },
+          "active": {
+            "value": "{surface.muted}",
+            "type": "color",
+            "description": "Button active background"
+          },
+          "hover": {
+            "value": "{neutral.100}",
+            "type": "color",
+            "description": "Button hover background"
+          }
+        },
+        "color": {
+          "default": {
+            "value": "{text.muted}",
+            "type": "color",
+            "description": "Button icon default color"
+          },
+          "active": {
+            "value": "{text.default}",
+            "type": "color",
+            "description": "Button icon active color"
+          }
+        },
+        "radius": {
+          "value": "{radius.subtle}",
+          "type": "dimension",
+          "description": "Button border radius"
+        }
+      }
+    },
+    "pagination": {
+      "padding": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Pagination padding"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Pagination border color"
+      }
+    },
+    "empty": {
+      "padding": {
+        "value": "{space.xl}",
+        "type": "dimension",
+        "description": "Empty state padding"
+      },
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Empty state text color"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}

package/tokens/components/dialog.json

@@ -0,0 +1,151 @@
+{
+  "dialog": {
+    "padding": {
+      "header": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Header section padding"
+      },
+      "content": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Content area padding"
+      },
+      "footer": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Footer section padding"
+      }
+    },
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Dialog background color"
+      }
+    },
+    "radius": {
+      "value": "{radius.large}",
+      "type": "dimension",
+      "description": "Dialog border radius"
+    },
+    "shadow": {
+      "value": "{shadow.l}",
+      "type": "shadow",
+      "description": "Dialog elevation shadow"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Dialog border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Dialog border width"
+      }
+    },
+    "header": {
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Header background"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header bottom border color"
+      },
+      "title": {
+        "color": {
+          "value": "{text.heading}",
+          "type": "color",
+          "description": "Header title text color"
+        }
+      }
+    },
+    "closeButton": {
+      "size": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Close button size"
+      },
+      "iconSize": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Close icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Close button icon color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Close button hover color"
+        }
+      },
+      "background": {
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Close button hover background"
+        }
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Close button border radius"
+      }
+    },
+    "overlay": {
+      "background": {
+        "value": "{surface.overlay}",
+        "type": "color",
+        "description": "Modal overlay backdrop color"
+      }
+    },
+    "width": {
+      "sm": {
+        "value": "400px",
+        "type": "dimension",
+        "description": "Small dialog width"
+      },
+      "md": {
+        "value": "560px",
+        "type": "dimension",
+        "description": "Medium dialog width (default)"
+      },
+      "lg": {
+        "value": "720px",
+        "type": "dimension",
+        "description": "Large dialog width"
+      },
+      "xl": {
+        "value": "960px",
+        "type": "dimension",
+        "description": "Extra large dialog width"
+      }
+    },
+    "maxHeight": {
+      "value": "90vh",
+      "type": "dimension",
+      "description": "Maximum dialog height"
+    },
+    "zIndex": {
+      "overlay": {
+        "value": "1000",
+        "type": "number",
+        "description": "Overlay z-index"
+      },
+      "dialog": {
+        "value": "1001",
+        "type": "number",
+        "description": "Dialog z-index"
+      }
+    }
+  }
+}

package/tokens/components/divider.json

@@ -0,0 +1,45 @@
+{
+  "divider": {
+    "border": {
+      "color": {
+        "value": "{neutral.200}",
+        "type": "color",
+        "description": "Default divider border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Default divider border width"
+      }
+    },
+    "margin": {
+      "horizontal": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Vertical margin for horizontal dividers"
+      },
+      "vertical": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Horizontal margin for vertical dividers"
+      }
+    },
+    "content": {
+      "gap": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Gap between divider line and content"
+      },
+      "color": {
+        "value": "{neutral.500}",
+        "type": "color",
+        "description": "Color of content text within divider"
+      },
+      "background": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Background behind content to cover the line"
+      }
+    }
+  }
+}

package/tokens/components/dock.json

@@ -0,0 +1,173 @@
+{
+  "dock": {
+    "background": {
+      "value": "{surface.elevated}",
+      "type": "color",
+      "description": "Dock background"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Dock border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Dock border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.large}",
+      "type": "dimension",
+      "description": "Dock border radius"
+    },
+    "shadow": {
+      "value": "{shadow.l}",
+      "type": "shadow",
+      "description": "Dock elevation shadow"
+    },
+    "padding": {
+      "value": "{space.s}",
+      "type": "dimension",
+      "description": "Dock inner padding"
+    },
+    "gap": {
+      "value": "{space.2xs}",
+      "type": "dimension",
+      "description": "Gap between dock items"
+    },
+    "zIndex": {
+      "value": "1000",
+      "type": "number",
+      "description": "Z-index for stacking"
+    },
+    "position": {
+      "offset": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Distance from screen edge"
+      }
+    },
+    "item": {
+      "size": {
+        "default": {
+          "value": "48px",
+          "type": "dimension",
+          "description": "Default item size"
+        },
+        "magnified": {
+          "value": "72px",
+          "type": "dimension",
+          "description": "Magnified item size on hover"
+        }
+      },
+      "radius": {
+        "value": "{radius.rounded}",
+        "type": "dimension",
+        "description": "Item border radius"
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Item background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Item hover background"
+        },
+        "active": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Active item background"
+        }
+      },
+      "icon": {
+        "size": {
+          "default": {
+            "value": "28px",
+            "type": "dimension",
+            "description": "Default icon size"
+          },
+          "magnified": {
+            "value": "42px",
+            "type": "dimension",
+            "description": "Magnified icon size"
+          }
+        },
+        "color": {
+          "default": {
+            "value": "{text.default}",
+            "type": "color",
+            "description": "Icon color"
+          },
+          "hover": {
+            "value": "{brand.primary}",
+            "type": "color",
+            "description": "Icon hover color"
+          }
+        }
+      }
+    },
+    "tooltip": {
+      "offset": {
+        "value": "{space.xs}",
+        "type": "dimension",
+        "description": "Tooltip distance from dock"
+      },
+      "background": {
+        "value": "{surface.inverse}",
+        "type": "color",
+        "description": "Tooltip background"
+      },
+      "text": {
+        "color": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Tooltip text color"
+        },
+        "fontSize": {
+          "value": "12px",
+          "type": "dimension",
+          "description": "Tooltip font size"
+        }
+      },
+      "padding": {
+        "x": {
+          "value": "{space.s}",
+          "type": "dimension",
+          "description": "Tooltip horizontal padding"
+        },
+        "y": {
+          "value": "{space.2xs}",
+          "type": "dimension",
+          "description": "Tooltip vertical padding"
+        }
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Tooltip border radius"
+      }
+    },
+    "indicator": {
+      "size": {
+        "value": "4px",
+        "type": "dimension",
+        "description": "Active indicator dot size"
+      },
+      "color": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Active indicator color"
+      },
+      "gap": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Gap between item and indicator"
+      }
+    }
+  }
+}

package/tokens/components/drawer.json

@@ -0,0 +1,163 @@
+{
+  "drawer": {
+    "background": {
+      "value": "{surface.canvas}",
+      "type": "color",
+      "description": "Drawer background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Drawer border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Drawer border width"
+      }
+    },
+    "shadow": {
+      "value": "{shadow.l}",
+      "type": "shadow",
+      "description": "Drawer shadow"
+    },
+    "header": {
+      "padding": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Header section padding"
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Header background"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header bottom border color"
+      },
+      "title": {
+        "color": {
+          "value": "{text.heading}",
+          "type": "color",
+          "description": "Header title text color"
+        },
+        "fontSize": {
+          "value": "18px",
+          "type": "dimension",
+          "description": "Header title font size"
+        },
+        "fontWeight": {
+          "value": "600",
+          "type": "fontWeight",
+          "description": "Header title font weight"
+        }
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Content area padding"
+      }
+    },
+    "footer": {
+      "padding": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Footer section padding"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Footer top border color"
+      }
+    },
+    "closeButton": {
+      "size": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Close button size"
+      },
+      "iconSize": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Close icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Close button icon color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Close button hover color"
+        }
+      },
+      "background": {
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Close button hover background"
+        }
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Close button border radius"
+      }
+    },
+    "overlay": {
+      "background": {
+        "value": "{surface.overlay}",
+        "type": "color",
+        "description": "Overlay backdrop color"
+      }
+    },
+    "size": {
+      "sm": {
+        "value": "280px",
+        "type": "dimension",
+        "description": "Small drawer size"
+      },
+      "md": {
+        "value": "400px",
+        "type": "dimension",
+        "description": "Medium drawer size (default)"
+      },
+      "lg": {
+        "value": "560px",
+        "type": "dimension",
+        "description": "Large drawer size"
+      },
+      "xl": {
+        "value": "720px",
+        "type": "dimension",
+        "description": "Extra large drawer size"
+      }
+    },
+    "zIndex": {
+      "overlay": {
+        "value": "1000",
+        "type": "number",
+        "description": "Overlay z-index"
+      },
+      "drawer": {
+        "value": "1001",
+        "type": "number",
+        "description": "Drawer z-index"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "300ms",
+        "type": "duration",
+        "description": "Slide animation duration"
+      }
+    }
+  }
+}