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

package/tokens/components/tree-select.json

@@ -0,0 +1,224 @@
+{
+  "tree-select": {
+    "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"
+        }
+      }
+    },
+    "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": "320px",
+        "type": "dimension"
+      }
+    },
+    "node": {
+      "padding": {
+        "x": {
+          "value": "{space.m}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{space.s}",
+          "type": "dimension"
+        }
+      },
+      "gap": {
+        "value": "{space.s}",
+        "type": "dimension"
+      },
+      "indent": {
+        "value": "{space.l}",
+        "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"
+        }
+      }
+    },
+    "toggler": {
+      "size": {
+        "value": "20px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{neutral.700}",
+          "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/tree.json

@@ -0,0 +1,153 @@
+{
+  "tree": {
+    "padding": {
+      "value": "{space.s}",
+      "type": "dimension",
+      "description": "Container padding"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Container border radius"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.300}",
+          "type": "color",
+          "description": "Default border color"
+        },
+        "disabled": {
+          "value": "{neutral.200}",
+          "type": "color",
+          "description": "Disabled border color"
+        }
+      }
+    },
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Default background"
+      },
+      "disabled": {
+        "value": "{neutral.100}",
+        "type": "color",
+        "description": "Disabled background"
+      }
+    },
+    "maxHeight": {
+      "value": "400px",
+      "type": "dimension",
+      "description": "Maximum height before scrolling"
+    },
+    "node": {
+      "padding": {
+        "x": {
+          "value": "{space.m}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{space.s}",
+          "type": "dimension"
+        }
+      },
+      "gap": {
+        "value": "{space.s}",
+        "type": "dimension"
+      },
+      "indent": {
+        "value": "{space.l}",
+        "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"
+        }
+      },
+      "text": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        },
+        "selected": {
+          "value": "{neutral.0}",
+          "type": "color"
+        }
+      }
+    },
+    "toggler": {
+      "size": {
+        "value": "20px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{neutral.700}",
+          "type": "color"
+        }
+      }
+    },
+    "checkbox": {
+      "size": {
+        "value": "18px",
+        "type": "dimension"
+      },
+      "border": {
+        "value": "{neutral.300}",
+        "type": "color"
+      },
+      "background": {
+        "checked": {
+          "value": "{brand.primary}",
+          "type": "color"
+        }
+      }
+    },
+    "filter": {
+      "padding": {
+        "value": "{space.s}",
+        "type": "dimension"
+      },
+      "marginBottom": {
+        "value": "{space.s}",
+        "type": "dimension"
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{brand.primary}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "1px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/tokens/components/treetable.json

@@ -0,0 +1,155 @@
+{
+  "treetable": {
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Container border radius"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.300}",
+          "type": "color"
+        }
+      }
+    },
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color"
+      }
+    },
+    "header": {
+      "padding": {
+        "x": {
+          "value": "{space.m}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{space.s}",
+          "type": "dimension"
+        }
+      },
+      "background": {
+        "value": "{neutral.50}",
+        "type": "color"
+      },
+      "text": {
+        "value": "{text.default}",
+        "type": "color"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "dimension"
+      },
+      "borderColor": {
+        "value": "{neutral.200}",
+        "type": "color"
+      }
+    },
+    "row": {
+      "padding": {
+        "x": {
+          "value": "{space.m}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{space.s}",
+          "type": "dimension"
+        }
+      },
+      "background": {
+        "default": {
+          "value": "{surface.canvas}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{neutral.50}",
+          "type": "color"
+        },
+        "selected": {
+          "value": "{brand.primary}",
+          "type": "color"
+        },
+        "stripe": {
+          "value": "{surface.muted}",
+          "type": "color"
+        }
+      },
+      "text": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        },
+        "selected": {
+          "value": "{neutral.0}",
+          "type": "color"
+        }
+      },
+      "borderColor": {
+        "value": "{neutral.200}",
+        "type": "color"
+      }
+    },
+    "cell": {
+      "padding": {
+        "x": {
+          "value": "{space.m}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{space.s}",
+          "type": "dimension"
+        }
+      }
+    },
+    "toggler": {
+      "size": {
+        "value": "20px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.500}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{neutral.700}",
+          "type": "color"
+        }
+      },
+      "marginRight": {
+        "value": "{space.s}",
+        "type": "dimension"
+      }
+    },
+    "indent": {
+      "value": "{space.l}",
+      "type": "dimension"
+    },
+    "checkbox": {
+      "size": {
+        "value": "18px",
+        "type": "dimension"
+      },
+      "marginRight": {
+        "value": "{space.s}",
+        "type": "dimension"
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{brand.primary}",
+        "type": "color"
+      }
+    }
+  }
+}

package/tokens/components/virtualscroller.json

@@ -0,0 +1,95 @@
+{
+  "virtualscroller": {
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Default background"
+      }
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.300}",
+          "type": "color"
+        }
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension"
+      }
+    },
+    "item": {
+      "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"
+        },
+        "stripe": {
+          "value": "{surface.muted}",
+          "type": "color"
+        }
+      },
+      "text": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        }
+      },
+      "borderColor": {
+        "value": "{neutral.200}",
+        "type": "color"
+      }
+    },
+    "loader": {
+      "padding": {
+        "value": "{space.m}",
+        "type": "dimension"
+      },
+      "text": {
+        "value": "{text.muted}",
+        "type": "color"
+      },
+      "background": {
+        "value": "{neutral.50}",
+        "type": "color"
+      }
+    },
+    "scrollbar": {
+      "width": {
+        "value": "8px",
+        "type": "dimension"
+      },
+      "track": {
+        "value": "{neutral.100}",
+        "type": "color"
+      },
+      "thumb": {
+        "value": "{neutral.300}",
+        "type": "color"
+      },
+      "thumbHover": {
+        "value": "{neutral.400}",
+        "type": "color"
+      }
+    }
+  }
+}