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

package/tokens/components/checkbox.json

@@ -0,0 +1,130 @@
+{
+  "checkbox": {
+    "size": {
+      "sm": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Small checkbox"
+      },
+      "md": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Medium checkbox (default)"
+      },
+      "lg": {
+        "value": "24px",
+        "type": "dimension",
+        "description": "Large checkbox"
+      }
+    },
+    "iconSize": {
+      "sm": {
+        "value": "10px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "12px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "16px",
+        "type": "dimension"
+      }
+    },
+    "radius": {
+      "value": "{radius.subtle}",
+      "type": "dimension",
+      "description": "Checkbox border radius"
+    },
+    "border": {
+      "width": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{navy.500}",
+          "type": "color",
+          "description": "Visible on dark backgrounds"
+        },
+        "hover": {
+          "value": "{navy.400}",
+          "type": "color"
+        },
+        "checked": {
+          "value": "{orange.500}",
+          "type": "color",
+          "description": "Accent color when checked"
+        },
+        "focus": {
+          "value": "{orange.500}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{navy.700}",
+          "type": "color"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color"
+        }
+      }
+    },
+    "background": {
+      "default": {
+        "value": "transparent",
+        "type": "color",
+        "description": "Transparent to show dark page background"
+      },
+      "checked": {
+        "value": "{orange.500}",
+        "type": "color",
+        "description": "Bright accent for visibility on dark backgrounds"
+      },
+      "disabled": {
+        "value": "{navy.800}",
+        "type": "color"
+      },
+      "hover": {
+        "value": "{navy.800}",
+        "type": "color"
+      }
+    },
+    "checkmark": {
+      "color": {
+        "value": "{neutral.0}",
+        "type": "color"
+      }
+    },
+    "label": {
+      "gap": {
+        "value": "{space.s}",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color"
+        }
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{orange.500}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/tokens/components/chip.json

@@ -0,0 +1,100 @@
+{
+  "chip": {
+    "padding": {
+      "x": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "gap": {
+      "value": "{space.2xs}",
+      "type": "dimension",
+      "description": "Gap between chip elements"
+    },
+    "radius": {
+      "value": "{radius.pill}",
+      "type": "dimension",
+      "description": "Border radius (pill shape)"
+    },
+    "background": {
+      "default": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Default chip background"
+      },
+      "hover": {
+        "value": "{neutral.200}",
+        "type": "color",
+        "description": "Hover background for removable chips"
+      }
+    },
+    "text": {
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Chip text color"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Chip text size"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Icon size"
+      },
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Icon color"
+      }
+    },
+    "image": {
+      "size": {
+        "value": "24px",
+        "type": "dimension",
+        "description": "Avatar/image size"
+      }
+    },
+    "remove": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Remove button size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Remove icon default color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Remove icon hover color"
+        }
+      },
+      "background": {
+        "hover": {
+          "value": "{neutral.300}",
+          "type": "color",
+          "description": "Remove button hover background"
+        }
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension",
+        "description": "Remove button border radius"
+      }
+    }
+  }
+}

package/tokens/components/color-picker.json

@@ -0,0 +1,196 @@
+{
+  "color-picker": {
+    "width": {
+      "value": "240px",
+      "type": "dimension"
+    },
+    "padding": {
+      "value": "{space.m}",
+      "type": "dimension"
+    },
+    "gap": {
+      "value": "{space.m}",
+      "type": "dimension"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension"
+    },
+    "background": {
+      "value": "{surface.canvas}",
+      "type": "color"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension"
+      },
+      "color": {
+        "value": "{neutral.200}",
+        "type": "color"
+      }
+    },
+    "shadow": {
+      "value": "{shadow.m}",
+      "type": "shadow"
+    },
+    "trigger": {
+      "size": {
+        "sm": {
+          "value": "24px",
+          "type": "dimension"
+        },
+        "md": {
+          "value": "32px",
+          "type": "dimension"
+        },
+        "lg": {
+          "value": "40px",
+          "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"
+          }
+        }
+      }
+    },
+    "gradient": {
+      "height": {
+        "value": "150px",
+        "type": "dimension"
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension"
+      }
+    },
+    "hue": {
+      "height": {
+        "value": "12px",
+        "type": "dimension"
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension"
+      }
+    },
+    "slider": {
+      "size": {
+        "value": "16px",
+        "type": "dimension"
+      },
+      "border": {
+        "width": {
+          "value": "2px",
+          "type": "dimension"
+        },
+        "color": {
+          "value": "{neutral.0}",
+          "type": "color"
+        }
+      },
+      "shadow": {
+        "value": "{shadow.s}",
+        "type": "shadow"
+      }
+    },
+    "input": {
+      "height": {
+        "value": "32px",
+        "type": "dimension"
+      },
+      "padding": {
+        "x": {
+          "value": "{space.s}",
+          "type": "dimension"
+        }
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension"
+      },
+      "fontSize": {
+        "value": "13px",
+        "type": "dimension"
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color"
+      },
+      "border": {
+        "color": {
+          "value": "{neutral.300}",
+          "type": "color"
+        }
+      },
+      "text": {
+        "value": "{text.default}",
+        "type": "color"
+      }
+    },
+    "preset": {
+      "size": {
+        "value": "24px",
+        "type": "dimension"
+      },
+      "gap": {
+        "value": "{space.xs}",
+        "type": "dimension"
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension"
+      },
+      "border": {
+        "width": {
+          "value": "2px",
+          "type": "dimension"
+        },
+        "color": {
+          "default": {
+            "value": "transparent",
+            "type": "color"
+          },
+          "selected": {
+            "value": "{brand.primary}",
+            "type": "color"
+          }
+        }
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{brand.primary}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "1px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/tokens/components/column-group.json

@@ -0,0 +1,45 @@
+{
+  "column-group": {
+    "header": {
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Column group header background"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Column group header border color"
+      },
+      "borderWidth": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Column group header border width"
+      }
+    },
+    "footer": {
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Column group footer background"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Column group footer border color"
+      },
+      "borderWidth": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Column group footer border width"
+      }
+    },
+    "row": {
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Row border color within group"
+      }
+    }
+  }
+}

package/tokens/components/column.json

@@ -0,0 +1,109 @@
+{
+  "column": {
+    "header": {
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Column header background color"
+      },
+      "color": {
+        "value": "{text.heading}",
+        "type": "color",
+        "description": "Column header text color"
+      },
+      "padding": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Column header padding"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Column header font weight"
+      },
+      "fontSize": {
+        "value": "13px",
+        "type": "dimension",
+        "description": "Column header font size"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Column header border color"
+      }
+    },
+    "body": {
+      "background": {
+        "value": "{surface.panel}",
+        "type": "color",
+        "description": "Column body background color"
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Column body text color"
+      },
+      "padding": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Column body padding"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Column body font size"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Column body border color"
+      }
+    },
+    "footer": {
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Column footer background color"
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Column footer text color"
+      },
+      "padding": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Column footer padding"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Column footer font weight"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Column footer border color"
+      }
+    },
+    "sortIcon": {
+      "color": {
+        "default": {
+          "value": "{neutral.400}",
+          "type": "color",
+          "description": "Sort icon default color"
+        },
+        "active": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Sort icon active color"
+        }
+      },
+      "size": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Sort icon size"
+      }
+    }
+  }
+}