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

package/tokens/components/accordion.json

@@ -0,0 +1,127 @@
+{
+  "accordion": {
+    "header": {
+      "padding": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Header padding"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.panel}",
+          "type": "color",
+          "description": "Header background"
+        },
+        "hover": {
+          "value": "rgba(255, 255, 255, 0.05)",
+          "type": "color",
+          "description": "Header hover background - semi-transparent for dark mode"
+        },
+        "active": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Header active/expanded background"
+        }
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Header text color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Header text color on hover"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Header text color when disabled"
+        }
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Content padding"
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Content background"
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Content text color"
+      }
+    },
+    "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"
+      }
+    },
+    "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"
+        },
+        "disabled": {
+          "value": "rgba(255, 255, 255, 0.25)",
+          "type": "color",
+          "description": "Icon color when disabled"
+        }
+      },
+      "rotation": {
+        "collapsed": {
+          "value": "0deg",
+          "type": "dimension",
+          "description": "Icon rotation when collapsed"
+        },
+        "expanded": {
+          "value": "180deg",
+          "type": "dimension",
+          "description": "Icon rotation when expanded"
+        }
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    },
+    "gap": {
+      "value": "0px",
+      "type": "dimension",
+      "description": "Gap between accordion tabs"
+    }
+  }
+}

package/tokens/components/autocomplete.json

@@ -0,0 +1,238 @@
+{
+  "autocomplete": {
+    "height": {
+      "sm": {
+        "value": "32px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "40px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "48px",
+        "type": "dimension"
+      }
+    },
+    "padding": {
+      "x": {
+        "value": "{space.m}",
+        "type": "dimension"
+      },
+      "y": {
+        "value": "{space.s}",
+        "type": "dimension"
+      }
+    },
+    "gap": {
+      "value": "{space.xs}",
+      "type": "dimension"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.300}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{neutral.400}",
+          "type": "color"
+        },
+        "focus": {
+          "value": "{brand.primary}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{neutral.200}",
+          "type": "color"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color"
+        }
+      }
+    },
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "{neutral.100}",
+        "type": "color"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "{text.default}",
+        "type": "color"
+      },
+      "placeholder": {
+        "value": "{text.muted}",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "{text.muted}",
+        "type": "color"
+      }
+    },
+    "fontSize": {
+      "sm": {
+        "value": "14px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "15px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "16px",
+        "type": "dimension"
+      }
+    },
+    "dropdown": {
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color"
+      },
+      "border": {
+        "value": "{neutral.200}",
+        "type": "color"
+      },
+      "shadow": {
+        "value": "{shadow.m}",
+        "type": "shadow"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension"
+      },
+      "maxHeight": {
+        "value": "280px",
+        "type": "dimension"
+      }
+    },
+    "option": {
+      "padding": {
+        "x": {
+          "value": "{space.m}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{space.s}",
+          "type": "dimension"
+        }
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{neutral.100}",
+          "type": "color"
+        },
+        "selected": {
+          "value": "{brand.primary}",
+          "type": "color"
+        }
+      },
+      "text": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        },
+        "selected": {
+          "value": "{neutral.0}",
+          "type": "color"
+        }
+      }
+    },
+    "chip": {
+      "padding": {
+        "x": {
+          "value": "{space.s}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{space.2xs}",
+          "type": "dimension"
+        }
+      },
+      "gap": {
+        "value": "{space.2xs}",
+        "type": "dimension"
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.muted}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{neutral.200}",
+          "type": "color"
+        }
+      },
+      "text": {
+        "value": "{text.default}",
+        "type": "color"
+      },
+      "fontSize": {
+        "value": "13px",
+        "type": "dimension"
+      }
+    },
+    "remove": {
+      "size": {
+        "value": "14px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color"
+        }
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{brand.primary}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "1px",
+        "type": "dimension"
+      }
+    },
+    "loader": {
+      "size": {
+        "value": "16px",
+        "type": "dimension"
+      },
+      "color": {
+        "value": "{neutral.400}",
+        "type": "color"
+      }
+    }
+  }
+}

package/tokens/components/avatar.json

@@ -0,0 +1,220 @@
+{
+  "avatar": {
+    "background": {
+      "default": {
+        "value": "{neutral.200}",
+        "type": "color",
+        "description": "Default avatar background"
+      },
+      "muted": {
+        "value": "{neutral.100}",
+        "type": "color",
+        "description": "Subtle avatar background"
+      },
+      "brand": {
+        "value": "{navy.600}",
+        "type": "color",
+        "description": "Brand-colored avatar"
+      },
+      "accent": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Warm accent avatar"
+      },
+      "success": {
+        "value": "{green.500}",
+        "type": "color",
+        "description": "Success state avatar"
+      },
+      "warning": {
+        "value": "{amber.500}",
+        "type": "color",
+        "description": "Warning state avatar"
+      },
+      "error": {
+        "value": "{red.500}",
+        "type": "color",
+        "description": "Error state avatar"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "{neutral.700}",
+        "type": "color",
+        "description": "Text on light backgrounds"
+      },
+      "inverse": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Text on dark backgrounds"
+      },
+      "brand": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Text on brand background"
+      }
+    },
+    "border": {
+      "default": {
+        "value": "{neutral.300}",
+        "type": "color",
+        "description": "Default border color"
+      },
+      "ring": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Ring/outline around avatar"
+      },
+      "width": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Border width"
+      }
+    },
+    "radius": {
+      "square": {
+        "value": "{radius.rounded}",
+        "type": "dimension",
+        "description": "Rounded square avatar"
+      },
+      "circle": {
+        "value": "{radius.pill}",
+        "type": "dimension",
+        "description": "Circular avatar"
+      }
+    },
+    "size": {
+      "xs": {
+        "value": "24px",
+        "type": "dimension",
+        "description": "Extra small avatar"
+      },
+      "sm": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Small avatar"
+      },
+      "md": {
+        "value": "40px",
+        "type": "dimension",
+        "description": "Medium avatar (default)"
+      },
+      "lg": {
+        "value": "56px",
+        "type": "dimension",
+        "description": "Large avatar"
+      },
+      "xl": {
+        "value": "80px",
+        "type": "dimension",
+        "description": "Extra large avatar"
+      },
+      "2xl": {
+        "value": "96px",
+        "type": "dimension",
+        "description": "2x large avatar"
+      }
+    },
+    "iconSize": {
+      "xs": {
+        "value": "10px",
+        "type": "dimension"
+      },
+      "sm": {
+        "value": "12px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "16px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "24px",
+        "type": "dimension"
+      },
+      "xl": {
+        "value": "32px",
+        "type": "dimension"
+      },
+      "2xl": {
+        "value": "40px",
+        "type": "dimension"
+      }
+    },
+    "fontSize": {
+      "xs": {
+        "value": "10px",
+        "type": "dimension"
+      },
+      "sm": {
+        "value": "12px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "14px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "20px",
+        "type": "dimension"
+      },
+      "xl": {
+        "value": "28px",
+        "type": "dimension"
+      },
+      "2xl": {
+        "value": "36px",
+        "type": "dimension"
+      }
+    },
+    "status": {
+      "size": {
+        "sm": {
+          "value": "8px",
+          "type": "dimension"
+        },
+        "md": {
+          "value": "10px",
+          "type": "dimension"
+        },
+        "lg": {
+          "value": "12px",
+          "type": "dimension"
+        }
+      },
+      "online": {
+        "value": "{green.500}",
+        "type": "color"
+      },
+      "offline": {
+        "value": "{neutral.400}",
+        "type": "color"
+      },
+      "busy": {
+        "value": "{red.500}",
+        "type": "color"
+      },
+      "away": {
+        "value": "{amber.500}",
+        "type": "color"
+      }
+    },
+    "group": {
+      "overlap": {
+        "value": "-8px",
+        "type": "dimension",
+        "description": "Overlap amount for avatar groups"
+      },
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Ring width in groups"
+      },
+      "ringColor": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Ring color matches canvas"
+      }
+    }
+  }
+}

package/tokens/components/badge.json

@@ -0,0 +1,119 @@
+{
+  "badge": {
+    "background": {
+      "primary": {
+        "value": "{orange.500}",
+        "type": "color",
+        "description": "Primary badge background - visible accent color"
+      },
+      "success": {
+        "value": "{feedback.success}",
+        "type": "color",
+        "description": "Success badge background"
+      },
+      "warning": {
+        "value": "{feedback.warning}",
+        "type": "color",
+        "description": "Warning badge background"
+      },
+      "danger": {
+        "value": "{feedback.error}",
+        "type": "color",
+        "description": "Danger badge background"
+      },
+      "info": {
+        "value": "{feedback.info}",
+        "type": "color",
+        "description": "Info badge background"
+      }
+    },
+    "text": {
+      "primary": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Text on primary badge - white"
+      },
+      "success": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Text on success badge"
+      },
+      "warning": {
+        "value": "{neutral.900}",
+        "type": "color",
+        "description": "Text on warning badge (dark for contrast)"
+      },
+      "danger": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Text on danger badge"
+      },
+      "info": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Text on info badge"
+      }
+    },
+    "size": {
+      "sm": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Small badge min height"
+      },
+      "md": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Medium badge min height"
+      },
+      "lg": {
+        "value": "24px",
+        "type": "dimension",
+        "description": "Large badge min height"
+      }
+    },
+    "fontSize": {
+      "sm": {
+        "value": "10px",
+        "type": "dimension",
+        "description": "Small badge font size"
+      },
+      "md": {
+        "value": "12px",
+        "type": "dimension",
+        "description": "Medium badge font size"
+      },
+      "lg": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Large badge font size"
+      }
+    },
+    "padding": {
+      "sm": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Small badge horizontal padding"
+      },
+      "md": {
+        "value": "{space.xs}",
+        "type": "dimension",
+        "description": "Medium badge horizontal padding"
+      },
+      "lg": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Large badge horizontal padding"
+      }
+    },
+    "radius": {
+      "value": "{radius.pill}",
+      "type": "dimension",
+      "description": "Badge border radius (pill shape)"
+    },
+    "fontWeight": {
+      "value": "600",
+      "type": "fontWeight",
+      "description": "Badge font weight"
+    }
+  }
+}