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

package/tokens/components/confirm-dialog.json

@@ -0,0 +1,141 @@
+{
+  "confirmDialog": {
+    "padding": {
+      "header": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Header section padding"
+      },
+      "content": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Content area padding"
+      },
+      "footer": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Footer section padding"
+      }
+    },
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Dialog background color"
+      }
+    },
+    "radius": {
+      "value": "{radius.large}",
+      "type": "dimension",
+      "description": "Dialog border radius"
+    },
+    "shadow": {
+      "value": "{shadow.l}",
+      "type": "shadow",
+      "description": "Dialog elevation shadow"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Dialog border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Dialog border width"
+      }
+    },
+    "header": {
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Header background"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header bottom border color"
+      },
+      "title": {
+        "color": {
+          "value": "{text.heading}",
+          "type": "color",
+          "description": "Header title text color"
+        }
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "48px",
+        "type": "dimension",
+        "description": "Icon size"
+      },
+      "color": {
+        "warning": {
+          "value": "{feedback.warning}",
+          "type": "color",
+          "description": "Warning icon color"
+        },
+        "danger": {
+          "value": "{feedback.error}",
+          "type": "color",
+          "description": "Danger icon color"
+        },
+        "info": {
+          "value": "{feedback.info}",
+          "type": "color",
+          "description": "Info icon color"
+        }
+      }
+    },
+    "message": {
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Message text color"
+      },
+      "fontSize": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Message font size"
+      }
+    },
+    "overlay": {
+      "background": {
+        "value": "{surface.overlay}",
+        "type": "color",
+        "description": "Modal overlay backdrop color"
+      }
+    },
+    "width": {
+      "value": "450px",
+      "type": "dimension",
+      "description": "Dialog width"
+    },
+    "zIndex": {
+      "overlay": {
+        "value": "1000",
+        "type": "number",
+        "description": "Overlay z-index"
+      },
+      "dialog": {
+        "value": "1001",
+        "type": "number",
+        "description": "Dialog z-index"
+      }
+    },
+    "gap": {
+      "content": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Gap between icon and message"
+      },
+      "buttons": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Gap between footer buttons"
+      }
+    }
+  }
+}

package/tokens/components/confirm-popup.json

@@ -0,0 +1,101 @@
+{
+  "confirmPopup": {
+    "padding": {
+      "x": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "background": {
+      "value": "{surface.canvas}",
+      "type": "color",
+      "description": "Popup background color"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Popup border radius"
+    },
+    "shadow": {
+      "value": "{shadow.m}",
+      "type": "shadow",
+      "description": "Popup elevation shadow"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Popup border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Popup border width"
+      }
+    },
+    "message": {
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Message text color"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Message font size"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Icon size"
+      },
+      "color": {
+        "value": "{feedback.warning}",
+        "type": "color",
+        "description": "Icon color"
+      }
+    },
+    "arrow": {
+      "size": {
+        "value": "8px",
+        "type": "dimension",
+        "description": "Arrow/pointer size"
+      }
+    },
+    "offset": {
+      "value": "10px",
+      "type": "dimension",
+      "description": "Distance from target element"
+    },
+    "maxWidth": {
+      "value": "300px",
+      "type": "dimension",
+      "description": "Maximum width"
+    },
+    "zIndex": {
+      "value": "1100",
+      "type": "number",
+      "description": "Z-index for stacking"
+    },
+    "gap": {
+      "content": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Gap between icon/message and buttons"
+      },
+      "buttons": {
+        "value": "{space.xs}",
+        "type": "dimension",
+        "description": "Gap between buttons"
+      }
+    }
+  }
+}

package/tokens/components/context-menu.json

@@ -0,0 +1,168 @@
+{
+  "context-menu": {
+    "background": {
+      "value": "{surface.elevated}",
+      "type": "color",
+      "description": "Context menu background"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Context menu border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Context menu border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Context menu border radius"
+    },
+    "shadow": {
+      "value": "{shadow.m}",
+      "type": "shadow",
+      "description": "Context menu elevation shadow"
+    },
+    "padding": {
+      "y": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "minWidth": {
+      "value": "180px",
+      "type": "dimension",
+      "description": "Minimum menu width"
+    },
+    "maxWidth": {
+      "value": "320px",
+      "type": "dimension",
+      "description": "Maximum menu width"
+    },
+    "zIndex": {
+      "value": "1100",
+      "type": "number",
+      "description": "Z-index for stacking"
+    },
+    "item": {
+      "padding": {
+        "x": {
+          "value": "{space.m}",
+          "type": "dimension",
+          "description": "Item horizontal padding"
+        },
+        "y": {
+          "value": "{space.xs}",
+          "type": "dimension",
+          "description": "Item vertical padding"
+        }
+      },
+      "text": {
+        "color": {
+          "default": {
+            "value": "{text.default}",
+            "type": "color",
+            "description": "Item text color"
+          },
+          "hover": {
+            "value": "{text.default}",
+            "type": "color",
+            "description": "Item hover text color"
+          },
+          "disabled": {
+            "value": "{text.subtle}",
+            "type": "color",
+            "description": "Disabled item text color"
+          }
+        },
+        "fontSize": {
+          "value": "14px",
+          "type": "dimension",
+          "description": "Item font size"
+        }
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Item background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Item hover background"
+        },
+        "active": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Active item background"
+        }
+      },
+      "icon": {
+        "size": {
+          "value": "16px",
+          "type": "dimension",
+          "description": "Item icon size"
+        },
+        "color": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Item icon color"
+        },
+        "gap": {
+          "value": "{space.s}",
+          "type": "dimension",
+          "description": "Space between icon and label"
+        }
+      },
+      "shortcut": {
+        "color": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Keyboard shortcut color"
+        },
+        "fontSize": {
+          "value": "12px",
+          "type": "dimension",
+          "description": "Shortcut font size"
+        }
+      }
+    },
+    "separator": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Separator line color"
+      },
+      "margin": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Separator vertical margin"
+      }
+    },
+    "submenu": {
+      "arrow": {
+        "size": {
+          "value": "10px",
+          "type": "dimension",
+          "description": "Submenu arrow size"
+        },
+        "color": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Submenu arrow color"
+        }
+      },
+      "offset": {
+        "value": "-4px",
+        "type": "dimension",
+        "description": "Submenu position offset"
+      }
+    }
+  }
+}

package/tokens/components/data-table.json

@@ -0,0 +1,157 @@
+{
+  "dataTable": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Table background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Table border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Table border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Table border radius"
+    },
+    "header": {
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Header background color"
+      },
+      "color": {
+        "value": "{text.heading}",
+        "type": "color",
+        "description": "Header text color"
+      },
+      "padding": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Header cell padding"
+      },
+      "fontSize": {
+        "value": "14px",
+        "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"
+      }
+    },
+    "body": {
+      "background": {
+        "default": {
+          "value": "{surface.panel}",
+          "type": "color",
+          "description": "Row background color"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Row hover background"
+        },
+        "striped": {
+          "value": "{neutral.50}",
+          "type": "color",
+          "description": "Alternate row background"
+        }
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Body text color"
+      },
+      "padding": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Body cell padding"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Body font size"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Row border color"
+      }
+    },
+    "sortIcon": {
+      "size": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Sort icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Sort icon default color"
+        },
+        "active": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Sort icon active color"
+        }
+      }
+    },
+    "pagination": {
+      "padding": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Pagination area padding"
+      },
+      "gap": {
+        "value": "{space.xs}",
+        "type": "dimension",
+        "description": "Gap between pagination elements"
+      },
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Pagination background"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Pagination border color"
+      }
+    },
+    "empty": {
+      "padding": {
+        "value": "{space.xl}",
+        "type": "dimension",
+        "description": "Empty state padding"
+      },
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Empty state text color"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}