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

package/tokens/components/organization-chart.json

@@ -0,0 +1,188 @@
+{
+  "organizationChart": {
+    "background": {
+      "value": "transparent",
+      "type": "color",
+      "description": "Chart container background"
+    },
+    "padding": {
+      "value": "{space.l}",
+      "type": "dimension",
+      "description": "Chart container padding"
+    },
+    "node": {
+      "background": {
+        "default": {
+          "value": "{surface.panel}",
+          "type": "color",
+          "description": "Node default background"
+        },
+        "hover": {
+          "value": "{surface.elevated}",
+          "type": "color",
+          "description": "Node hover background"
+        },
+        "selected": {
+          "value": "{surface.accent}",
+          "type": "color",
+          "description": "Node selected background"
+        }
+      },
+      "border": {
+        "width": {
+          "value": "1px",
+          "type": "dimension",
+          "description": "Node border width"
+        },
+        "color": {
+          "default": {
+            "value": "{border.subtle}",
+            "type": "color",
+            "description": "Node default border color"
+          },
+          "hover": {
+            "value": "{border.default}",
+            "type": "color",
+            "description": "Node hover border color"
+          },
+          "selected": {
+            "value": "{brand.primary}",
+            "type": "color",
+            "description": "Node selected border color"
+          }
+        }
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Node border radius"
+      },
+      "padding": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Node content padding"
+      },
+      "shadow": {
+        "default": {
+          "value": "{shadow.xs}",
+          "type": "shadow",
+          "description": "Node default shadow"
+        },
+        "hover": {
+          "value": "{shadow.s}",
+          "type": "shadow",
+          "description": "Node hover shadow"
+        }
+      },
+      "minWidth": {
+        "value": "160px",
+        "type": "dimension",
+        "description": "Node minimum width"
+      }
+    },
+    "nodeContent": {
+      "gap": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Gap between node content elements"
+      },
+      "title": {
+        "color": {
+          "value": "{text.heading}",
+          "type": "color",
+          "description": "Node title color"
+        },
+        "fontSize": {
+          "value": "14px",
+          "type": "dimension",
+          "description": "Node title font size"
+        },
+        "fontWeight": {
+          "value": "600",
+          "type": "fontWeight",
+          "description": "Node title font weight"
+        }
+      },
+      "subtitle": {
+        "color": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Node subtitle color"
+        },
+        "fontSize": {
+          "value": "12px",
+          "type": "dimension",
+          "description": "Node subtitle font size"
+        },
+        "fontWeight": {
+          "value": "400",
+          "type": "fontWeight",
+          "description": "Node subtitle font weight"
+        }
+      }
+    },
+    "connector": {
+      "color": {
+        "value": "{border.default}",
+        "type": "color",
+        "description": "Connector line color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Connector line width"
+      },
+      "style": {
+        "value": "solid",
+        "type": "string",
+        "description": "Connector line style"
+      }
+    },
+    "spacing": {
+      "horizontal": {
+        "value": "{space.xl}",
+        "type": "dimension",
+        "description": "Horizontal spacing between nodes"
+      },
+      "vertical": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Vertical spacing between levels"
+      }
+    },
+    "toggleButton": {
+      "size": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Toggle button size"
+      },
+      "background": {
+        "value": "{surface.panel}",
+        "type": "color",
+        "description": "Toggle button background"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Toggle button border color"
+      },
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Toggle button icon color"
+      },
+      "radius": {
+        "value": "9999px",
+        "type": "dimension",
+        "description": "Toggle button border radius"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}

package/tokens/components/overlay-panel.json

@@ -0,0 +1,94 @@
+{
+  "overlayPanel": {
+    "padding": {
+      "x": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "background": {
+      "value": "{surface.canvas}",
+      "type": "color",
+      "description": "Panel background color"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Panel border radius"
+    },
+    "shadow": {
+      "value": "{shadow.l}",
+      "type": "shadow",
+      "description": "Panel elevation shadow"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Panel border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Panel border width"
+      }
+    },
+    "closeButton": {
+      "size": {
+        "value": "28px",
+        "type": "dimension",
+        "description": "Close button size"
+      },
+      "iconSize": {
+        "value": "14px",
+        "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.subtle}",
+        "type": "dimension",
+        "description": "Close button border radius"
+      }
+    },
+    "offset": {
+      "value": "10px",
+      "type": "dimension",
+      "description": "Distance from trigger element"
+    },
+    "maxWidth": {
+      "value": "400px",
+      "type": "dimension",
+      "description": "Maximum width"
+    },
+    "zIndex": {
+      "value": "1100",
+      "type": "number",
+      "description": "Z-index for stacking"
+    }
+  }
+}

package/tokens/components/paginator.json

@@ -0,0 +1,186 @@
+{
+  "paginator": {
+    "background": {
+      "value": "{surface.canvas}",
+      "type": "color",
+      "description": "Paginator container background"
+    },
+    "padding": {
+      "value": "{space.s}",
+      "type": "dimension",
+      "description": "Paginator container padding"
+    },
+    "gap": {
+      "value": "{space.xs}",
+      "type": "dimension",
+      "description": "Gap between paginator elements"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Border width"
+      },
+      "color": {
+        "value": "{neutral.200}",
+        "type": "color",
+        "description": "Border color"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Border radius"
+      }
+    },
+    "page": {
+      "size": {
+        "value": "36px",
+        "type": "dimension",
+        "description": "Page button size"
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Page button default background"
+        },
+        "hover": {
+          "value": "{neutral.100}",
+          "type": "color",
+          "description": "Page button hover background"
+        },
+        "active": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Active page button background"
+        }
+      },
+      "text": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Page button default text color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Page button hover text color"
+        },
+        "active": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Active page button text color"
+        },
+        "disabled": {
+          "value": "{neutral.400}",
+          "type": "color",
+          "description": "Disabled page button text color"
+        }
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Page button font size"
+      },
+      "fontWeight": {
+        "value": "500",
+        "type": "fontWeight",
+        "description": "Page button font weight"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Page button border radius"
+      }
+    },
+    "nav": {
+      "size": {
+        "value": "36px",
+        "type": "dimension",
+        "description": "Navigation button size"
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Nav button default background"
+        },
+        "hover": {
+          "value": "{neutral.100}",
+          "type": "color",
+          "description": "Nav button hover background"
+        },
+        "disabled": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Nav button disabled background"
+        }
+      },
+      "icon": {
+        "color": {
+          "default": {
+            "value": "{text.muted}",
+            "type": "color",
+            "description": "Nav icon default color"
+          },
+          "hover": {
+            "value": "{text.default}",
+            "type": "color",
+            "description": "Nav icon hover color"
+          },
+          "disabled": {
+            "value": "{neutral.400}",
+            "type": "color",
+            "description": "Nav icon disabled color"
+          }
+        },
+        "size": {
+          "value": "18px",
+          "type": "dimension",
+          "description": "Nav icon size"
+        }
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Nav button border radius"
+      }
+    },
+    "info": {
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Info text color"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Info text font size"
+      }
+    },
+    "focus": {
+      "ringColor": {
+        "value": "{focus.ring}",
+        "type": "color",
+        "description": "Focus ring color"
+      },
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Focus ring width"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Focus ring offset"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Transition duration"
+      }
+    }
+  }
+}

package/tokens/components/panel.json

@@ -0,0 +1,120 @@
+{
+  "panel": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Panel background color"
+    },
+    "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"
+    },
+    "header": {
+      "padding": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Header section padding"
+      },
+      "background": {
+        "default": {
+          "value": "{navy.800}",
+          "type": "color",
+          "description": "Header background"
+        },
+        "hover": {
+          "value": "{navy.700}",
+          "type": "color",
+          "description": "Header hover background when toggleable"
+        }
+      },
+      "color": {
+        "value": "{text.heading}",
+        "type": "color",
+        "description": "Header text color"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header bottom border color"
+      },
+      "fontSize": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Header font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Header font weight"
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Content area padding"
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Content background"
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Content text color"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Toggle icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Icon color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Icon color on hover"
+        }
+      },
+      "rotation": {
+        "collapsed": {
+          "value": "-90deg",
+          "type": "dimension",
+          "description": "Icon rotation when collapsed"
+        },
+        "expanded": {
+          "value": "0deg",
+          "type": "dimension",
+          "description": "Icon rotation when expanded"
+        }
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}