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

package/tokens/components/dropdown.json

@@ -0,0 +1,230 @@
+{
+  "dropdown": {
+    "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"
+      }
+    },
+    "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"
+        }
+      }
+    },
+    "panel": {
+      "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"
+      },
+      "padding": {
+        "value": "{space.xs}",
+        "type": "dimension"
+      }
+    },
+    "filter": {
+      "height": {
+        "value": "36px",
+        "type": "dimension"
+      },
+      "padding": {
+        "x": {
+          "value": "{space.s}",
+          "type": "dimension"
+        }
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color"
+      },
+      "border": {
+        "value": "{neutral.200}",
+        "type": "color"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension"
+      },
+      "marginBottom": {
+        "value": "{space.xs}",
+        "type": "dimension"
+      }
+    },
+    "option": {
+      "padding": {
+        "x": {
+          "value": "{space.m}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{space.s}",
+          "type": "dimension"
+        }
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{neutral.100}",
+          "type": "color"
+        },
+        "selected": {
+          "value": "{brand.primary}",
+          "type": "color"
+        },
+        "focus": {
+          "value": "{neutral.100}",
+          "type": "color"
+        }
+      },
+      "text": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        },
+        "selected": {
+          "value": "{neutral.0}",
+          "type": "color"
+        }
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{brand.primary}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "1px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/tokens/components/editor.json

@@ -0,0 +1,170 @@
+{
+  "editor": {
+    "minHeight": {
+      "value": "200px",
+      "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"
+      }
+    },
+    "toolbar": {
+      "padding": {
+        "x": {
+          "value": "{space.s}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{space.xs}",
+          "type": "dimension"
+        }
+      },
+      "gap": {
+        "value": "{space.xs}",
+        "type": "dimension"
+      },
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color"
+      },
+      "border": {
+        "color": {
+          "value": "{neutral.200}",
+          "type": "color"
+        }
+      }
+    },
+    "button": {
+      "size": {
+        "value": "32px",
+        "type": "dimension"
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{neutral.200}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{neutral.300}",
+          "type": "color"
+        }
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{brand.primary}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color"
+        }
+      }
+    },
+    "separator": {
+      "width": {
+        "value": "1px",
+        "type": "dimension"
+      },
+      "color": {
+        "value": "{neutral.300}",
+        "type": "color"
+      },
+      "margin": {
+        "value": "{space.xs}",
+        "type": "dimension"
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{space.m}",
+        "type": "dimension"
+      },
+      "text": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        },
+        "placeholder": {
+          "value": "{text.muted}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color"
+        }
+      },
+      "fontSize": {
+        "value": "15px",
+        "type": "dimension"
+      },
+      "lineHeight": {
+        "value": "1.6",
+        "type": "number"
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{brand.primary}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "1px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/tokens/components/field-set.json

@@ -0,0 +1,115 @@
+{
+  "field-set": {
+    "padding": {
+      "value": "{space.l}",
+      "type": "dimension",
+      "description": "Content padding"
+    },
+    "background": {
+      "value": "{surface.canvas}",
+      "type": "color",
+      "description": "FieldSet background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Border width"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Border radius"
+      }
+    },
+    "legend": {
+      "padding": {
+        "x": {
+          "value": "{space.m}",
+          "type": "dimension",
+          "description": "Legend horizontal padding"
+        },
+        "y": {
+          "value": "{space.s}",
+          "type": "dimension",
+          "description": "Legend vertical padding"
+        }
+      },
+      "background": {
+        "value": "{surface.panel}",
+        "type": "color",
+        "description": "Legend background"
+      },
+      "color": {
+        "value": "{text.heading}",
+        "type": "color",
+        "description": "Legend text color"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Legend font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Legend font weight"
+      },
+      "border": {
+        "color": {
+          "value": "{border.subtle}",
+          "type": "color",
+          "description": "Legend border color"
+        },
+        "width": {
+          "value": "1px",
+          "type": "dimension",
+          "description": "Legend border width"
+        },
+        "radius": {
+          "value": "{radius.default}",
+          "type": "dimension",
+          "description": "Legend border radius"
+        }
+      }
+    },
+    "toggle": {
+      "icon": {
+        "size": {
+          "value": "16px",
+          "type": "dimension",
+          "description": "Toggle icon size"
+        },
+        "color": {
+          "default": {
+            "value": "{text.muted}",
+            "type": "color",
+            "description": "Toggle icon color"
+          },
+          "hover": {
+            "value": "{text.default}",
+            "type": "color",
+            "description": "Toggle icon hover color"
+          }
+        }
+      },
+      "gap": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Gap between legend text and toggle icon"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Collapse/expand transition duration"
+      }
+    }
+  }
+}

package/tokens/components/file-upload.json

@@ -0,0 +1,193 @@
+{
+  "fileUpload": {
+    "dropzone": {
+      "background": {
+        "default": {
+          "value": "{surface.panel}",
+          "type": "color",
+          "description": "Dropzone background color"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Dropzone hover background"
+        },
+        "active": {
+          "value": "{surface.accent}",
+          "type": "color",
+          "description": "Dropzone active/dragging background"
+        }
+      },
+      "border": {
+        "color": {
+          "default": {
+            "value": "{border.subtle}",
+            "type": "color",
+            "description": "Dropzone border color"
+          },
+          "hover": {
+            "value": "{border.default}",
+            "type": "color",
+            "description": "Dropzone hover border color"
+          },
+          "active": {
+            "value": "{brand.primary}",
+            "type": "color",
+            "description": "Dropzone active border color"
+          }
+        },
+        "width": {
+          "value": "2px",
+          "type": "dimension",
+          "description": "Dropzone border width"
+        },
+        "style": {
+          "value": "dashed",
+          "type": "string",
+          "description": "Dropzone border style"
+        }
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Dropzone border radius"
+      },
+      "padding": {
+        "value": "{space.xl}",
+        "type": "dimension",
+        "description": "Dropzone padding"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "48px",
+        "type": "dimension",
+        "description": "Upload icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Upload icon color"
+        },
+        "active": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Upload icon color when dragging"
+        }
+      }
+    },
+    "text": {
+      "primary": {
+        "color": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Primary text color"
+        },
+        "size": {
+          "value": "16px",
+          "type": "dimension",
+          "description": "Primary text font size"
+        }
+      },
+      "secondary": {
+        "color": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Secondary text color"
+        },
+        "size": {
+          "value": "14px",
+          "type": "dimension",
+          "description": "Secondary text font size"
+        }
+      }
+    },
+    "fileList": {
+      "gap": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Gap between file items"
+      },
+      "item": {
+        "background": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "File item background"
+        },
+        "padding": {
+          "value": "{space.s}",
+          "type": "dimension",
+          "description": "File item padding"
+        },
+        "radius": {
+          "value": "{radius.default}",
+          "type": "dimension",
+          "description": "File item border radius"
+        },
+        "border": {
+          "color": {
+            "value": "{border.subtle}",
+            "type": "color",
+            "description": "File item border color"
+          },
+          "width": {
+            "value": "1px",
+            "type": "dimension",
+            "description": "File item border width"
+          }
+        }
+      },
+      "fileName": {
+        "color": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "File name color"
+        },
+        "size": {
+          "value": "14px",
+          "type": "dimension",
+          "description": "File name font size"
+        }
+      },
+      "fileSize": {
+        "color": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "File size color"
+        },
+        "size": {
+          "value": "12px",
+          "type": "dimension",
+          "description": "File size font size"
+        }
+      },
+      "removeButton": {
+        "color": {
+          "default": {
+            "value": "{text.muted}",
+            "type": "color",
+            "description": "Remove button color"
+          },
+          "hover": {
+            "value": "{feedback.error}",
+            "type": "color",
+            "description": "Remove button hover color"
+          }
+        },
+        "size": {
+          "value": "20px",
+          "type": "dimension",
+          "description": "Remove button icon size"
+        }
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Transition duration"
+      }
+    }
+  }
+}