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

package/tokens/components/message.json

@@ -0,0 +1,151 @@
+{
+  "message": {
+    "padding": {
+      "x": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "gap": {
+      "value": "{space.s}",
+      "type": "dimension",
+      "description": "Gap between icon and text"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Border radius"
+    },
+    "fontSize": {
+      "value": "14px",
+      "type": "dimension",
+      "description": "Message text font size"
+    },
+    "fontWeight": {
+      "value": "400",
+      "type": "fontWeight",
+      "description": "Message text font weight"
+    },
+    "iconSize": {
+      "value": "20px",
+      "type": "dimension",
+      "description": "Icon size"
+    },
+    "closeButtonSize": {
+      "value": "24px",
+      "type": "dimension",
+      "description": "Close button size"
+    },
+    "borderWidth": {
+      "value": "1px",
+      "type": "dimension",
+      "description": "Border width"
+    },
+    "background": {
+      "success": {
+        "value": "{feedback.successSubtle}",
+        "type": "color",
+        "description": "Success message background"
+      },
+      "info": {
+        "value": "{feedback.infoSubtle}",
+        "type": "color",
+        "description": "Info message background"
+      },
+      "warn": {
+        "value": "{feedback.warningSubtle}",
+        "type": "color",
+        "description": "Warning message background"
+      },
+      "error": {
+        "value": "{feedback.errorSubtle}",
+        "type": "color",
+        "description": "Error message background"
+      }
+    },
+    "text": {
+      "success": {
+        "value": "{feedback.successEmphasis}",
+        "type": "color",
+        "description": "Success message text color"
+      },
+      "info": {
+        "value": "{feedback.infoEmphasis}",
+        "type": "color",
+        "description": "Info message text color"
+      },
+      "warn": {
+        "value": "{feedback.warningEmphasis}",
+        "type": "color",
+        "description": "Warning message text color"
+      },
+      "error": {
+        "value": "{feedback.errorEmphasis}",
+        "type": "color",
+        "description": "Error message text color"
+      }
+    },
+    "icon": {
+      "success": {
+        "value": "{feedback.success}",
+        "type": "color",
+        "description": "Success icon color"
+      },
+      "info": {
+        "value": "{feedback.info}",
+        "type": "color",
+        "description": "Info icon color"
+      },
+      "warn": {
+        "value": "{feedback.warning}",
+        "type": "color",
+        "description": "Warning icon color"
+      },
+      "error": {
+        "value": "{feedback.error}",
+        "type": "color",
+        "description": "Error icon color"
+      }
+    },
+    "border": {
+      "success": {
+        "value": "{feedback.success}",
+        "type": "color",
+        "description": "Success message border color"
+      },
+      "info": {
+        "value": "{feedback.info}",
+        "type": "color",
+        "description": "Info message border color"
+      },
+      "warn": {
+        "value": "{feedback.warning}",
+        "type": "color",
+        "description": "Warning message border color"
+      },
+      "error": {
+        "value": "{feedback.error}",
+        "type": "color",
+        "description": "Error message border color"
+      }
+    },
+    "closeButton": {
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Close button icon color"
+      },
+      "hoverColor": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Close button icon hover color"
+      }
+    }
+  }
+}

package/tokens/components/meter-group.json

@@ -0,0 +1,108 @@
+{
+  "meter-group": {
+    "track": {
+      "height": {
+        "value": "8px",
+        "type": "dimension",
+        "description": "Height of the meter track"
+      },
+      "background": {
+        "value": "{neutral.200}",
+        "type": "color",
+        "description": "Background color of the meter track"
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension",
+        "description": "Border radius of the meter track"
+      }
+    },
+    "meter": {
+      "gap": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Gap between meters in the group"
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension",
+        "description": "Border radius of individual meters"
+      }
+    },
+    "label": {
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Label text color"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Label font size"
+      },
+      "fontWeight": {
+        "value": "500",
+        "type": "fontWeight",
+        "description": "Label font weight"
+      },
+      "gap": {
+        "value": "{space.xs}",
+        "type": "dimension",
+        "description": "Gap between label and meter"
+      }
+    },
+    "valueText": {
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Value text color"
+      },
+      "fontSize": {
+        "value": "12px",
+        "type": "dimension",
+        "description": "Value font size"
+      }
+    },
+    "legend": {
+      "gap": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Gap between legend items"
+      },
+      "marker": {
+        "size": {
+          "value": "8px",
+          "type": "dimension",
+          "description": "Size of the legend color marker"
+        },
+        "radius": {
+          "value": "{radius.pill}",
+          "type": "dimension",
+          "description": "Border radius of the legend marker"
+        }
+      }
+    },
+    "colors": {
+      "primary": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Primary meter color"
+      },
+      "success": {
+        "value": "{feedback.success}",
+        "type": "color",
+        "description": "Success meter color"
+      },
+      "warning": {
+        "value": "{feedback.warning}",
+        "type": "color",
+        "description": "Warning meter color"
+      },
+      "danger": {
+        "value": "{feedback.error}",
+        "type": "color",
+        "description": "Danger meter color"
+      }
+    }
+  }
+}

package/tokens/components/multi-select.json

@@ -0,0 +1,244 @@
+{
+  "multi-select": {
+    "height": {
+      "sm": {
+        "value": "32px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "40px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "48px",
+        "type": "dimension"
+      }
+    },
+    "minHeight": {
+      "value": "40px",
+      "type": "dimension"
+    },
+    "padding": {
+      "x": {
+        "value": "{space.m}",
+        "type": "dimension"
+      },
+      "y": {
+        "value": "{space.s}",
+        "type": "dimension"
+      }
+    },
+    "fontSize": {
+      "sm": {
+        "value": "14px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "15px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "16px",
+        "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"
+      },
+      "hover": {
+        "value": "{surface.canvas}",
+        "type": "color"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "{text.default}",
+        "type": "color"
+      },
+      "placeholder": {
+        "value": "{text.muted}",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "{text.muted}",
+        "type": "color"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.500}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{neutral.300}",
+          "type": "color"
+        }
+      }
+    },
+    "chip": {
+      "gap": {
+        "value": "{space.2xs}",
+        "type": "dimension"
+      },
+      "padding": {
+        "x": {
+          "value": "{space.xs}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{space.3xs}",
+          "type": "dimension"
+        }
+      },
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color"
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension"
+      },
+      "fontSize": {
+        "value": "13px",
+        "type": "dimension"
+      },
+      "remove": {
+        "size": {
+          "value": "14px",
+          "type": "dimension"
+        },
+        "color": {
+          "default": {
+            "value": "{text.muted}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{text.default}",
+            "type": "color"
+          }
+        }
+      }
+    },
+    "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"
+        }
+      },
+      "gap": {
+        "value": "{space.s}",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{neutral.100}",
+          "type": "color"
+        }
+      },
+      "text": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        }
+      }
+    },
+    "filter": {
+      "padding": {
+        "value": "{space.s}",
+        "type": "dimension"
+      },
+      "borderColor": {
+        "value": "{neutral.200}",
+        "type": "color"
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{brand.primary}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "1px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/tokens/components/order-list.json

@@ -0,0 +1,193 @@
+{
+  "orderList": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "OrderList 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"
+      },
+      "color": {
+        "value": "{text.heading}",
+        "type": "color",
+        "description": "Header text color"
+      },
+      "fontSize": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Header font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Header font weight"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header border color"
+      }
+    },
+    "list": {
+      "padding": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "List container padding"
+      },
+      "gap": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Gap between list items"
+      }
+    },
+    "item": {
+      "padding": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Item padding"
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Item default background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Item hover background"
+        },
+        "selected": {
+          "value": "{surface.accent}",
+          "type": "color",
+          "description": "Item selected background"
+        },
+        "dragging": {
+          "value": "{surface.elevated}",
+          "type": "color",
+          "description": "Item dragging background"
+        }
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Item text color"
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Item border radius"
+      },
+      "borderColor": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Item default border"
+        },
+        "selected": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Item selected border"
+        }
+      }
+    },
+    "controls": {
+      "gap": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Gap between control buttons"
+      },
+      "padding": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Controls area padding"
+      }
+    },
+    "button": {
+      "size": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Button size"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Button default background"
+        },
+        "hover": {
+          "value": "{neutral.200}",
+          "type": "color",
+          "description": "Button hover background"
+        },
+        "disabled": {
+          "value": "{neutral.100}",
+          "type": "color",
+          "description": "Button disabled background"
+        }
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Button icon color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Button disabled icon color"
+        }
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Button border radius"
+      }
+    },
+    "dragHandle": {
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Drag handle color"
+      },
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Drag handle icon size"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}