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

package/tokens/components/toast.json

@@ -0,0 +1,281 @@
+{
+  "toast": {
+    "container": {
+      "gap": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Gap between stacked toasts"
+      },
+      "padding": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Container padding from screen edge"
+      },
+      "zIndex": {
+        "value": "1200",
+        "type": "number",
+        "description": "Toast container z-index"
+      },
+      "maxWidth": {
+        "value": "400px",
+        "type": "dimension",
+        "description": "Maximum toast width"
+      }
+    },
+    "background": {
+      "default": {
+        "value": "{surface.elevated}",
+        "type": "color",
+        "description": "Default toast background"
+      },
+      "success": {
+        "value": "{feedback.successSubtle}",
+        "type": "color",
+        "description": "Success toast background"
+      },
+      "info": {
+        "value": "{feedback.infoSubtle}",
+        "type": "color",
+        "description": "Info toast background"
+      },
+      "warning": {
+        "value": "{feedback.warningSubtle}",
+        "type": "color",
+        "description": "Warning toast background"
+      },
+      "error": {
+        "value": "{feedback.errorSubtle}",
+        "type": "color",
+        "description": "Error toast background"
+      }
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Toast border width"
+      },
+      "color": {
+        "default": {
+          "value": "{border.subtle}",
+          "type": "color",
+          "description": "Default border color"
+        },
+        "success": {
+          "value": "{feedback.success}",
+          "type": "color",
+          "description": "Success border color"
+        },
+        "info": {
+          "value": "{feedback.info}",
+          "type": "color",
+          "description": "Info border color"
+        },
+        "warning": {
+          "value": "{feedback.warning}",
+          "type": "color",
+          "description": "Warning border color"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color",
+          "description": "Error border color"
+        }
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Toast border radius"
+    },
+    "shadow": {
+      "value": "{shadow.l}",
+      "type": "shadow",
+      "description": "Toast elevation shadow"
+    },
+    "padding": {
+      "x": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Default icon color"
+        },
+        "success": {
+          "value": "{feedback.success}",
+          "type": "color",
+          "description": "Success icon color"
+        },
+        "info": {
+          "value": "{feedback.info}",
+          "type": "color",
+          "description": "Info icon color"
+        },
+        "warning": {
+          "value": "{feedback.warning}",
+          "type": "color",
+          "description": "Warning icon color"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color",
+          "description": "Error icon color"
+        }
+      },
+      "gap": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Gap between icon and content"
+      }
+    },
+    "content": {
+      "gap": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Gap between summary and detail"
+      }
+    },
+    "summary": {
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Summary text color"
+        },
+        "success": {
+          "value": "{feedback.successEmphasis}",
+          "type": "color",
+          "description": "Success summary color"
+        },
+        "info": {
+          "value": "{feedback.infoEmphasis}",
+          "type": "color",
+          "description": "Info summary color"
+        },
+        "warning": {
+          "value": "{feedback.warningEmphasis}",
+          "type": "color",
+          "description": "Warning summary color"
+        },
+        "error": {
+          "value": "{feedback.errorEmphasis}",
+          "type": "color",
+          "description": "Error summary color"
+        }
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Summary font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "number",
+        "description": "Summary font weight"
+      }
+    },
+    "detail": {
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Detail text color"
+      },
+      "fontSize": {
+        "value": "13px",
+        "type": "dimension",
+        "description": "Detail font size"
+      }
+    },
+    "closeButton": {
+      "size": {
+        "value": "28px",
+        "type": "dimension",
+        "description": "Close button size"
+      },
+      "iconSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Close icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Close button color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Close button hover color"
+        }
+      },
+      "background": {
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Close button hover background"
+        }
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Close button border radius"
+      }
+    },
+    "progress": {
+      "height": {
+        "value": "3px",
+        "type": "dimension",
+        "description": "Progress bar height"
+      },
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Progress bar track background"
+      },
+      "fill": {
+        "default": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Default progress fill"
+        },
+        "success": {
+          "value": "{feedback.success}",
+          "type": "color",
+          "description": "Success progress fill"
+        },
+        "info": {
+          "value": "{feedback.info}",
+          "type": "color",
+          "description": "Info progress fill"
+        },
+        "warning": {
+          "value": "{feedback.warning}",
+          "type": "color",
+          "description": "Warning progress fill"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color",
+          "description": "Error progress fill"
+        }
+      }
+    }
+  }
+}

package/tokens/components/toggle-button.json

@@ -0,0 +1,220 @@
+{
+  "toggleButton": {
+    "height": {
+      "sm": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Small toggle button height"
+      },
+      "md": {
+        "value": "40px",
+        "type": "dimension",
+        "description": "Medium toggle button height"
+      },
+      "lg": {
+        "value": "48px",
+        "type": "dimension",
+        "description": "Large toggle button height"
+      }
+    },
+    "padding": {
+      "sm": {
+        "x": {
+          "value": "{space.s}",
+          "type": "dimension",
+          "description": "Small toggle button horizontal padding"
+        },
+        "y": {
+          "value": "{space.2xs}",
+          "type": "dimension",
+          "description": "Small toggle button vertical padding"
+        }
+      },
+      "md": {
+        "x": {
+          "value": "{space.m}",
+          "type": "dimension",
+          "description": "Medium toggle button horizontal padding"
+        },
+        "y": {
+          "value": "{space.xs}",
+          "type": "dimension",
+          "description": "Medium toggle button vertical padding"
+        }
+      },
+      "lg": {
+        "x": {
+          "value": "{space.l}",
+          "type": "dimension",
+          "description": "Large toggle button horizontal padding"
+        },
+        "y": {
+          "value": "{space.s}",
+          "type": "dimension",
+          "description": "Large toggle button vertical padding"
+        }
+      }
+    },
+    "gap": {
+      "value": "{space.xs}",
+      "type": "dimension",
+      "description": "Gap between icon and label"
+    },
+    "background": {
+      "off": {
+        "default": {
+          "value": "{neutral.200}",
+          "type": "color",
+          "description": "Toggle button off state background"
+        },
+        "hover": {
+          "value": "{neutral.300}",
+          "type": "color",
+          "description": "Toggle button off state hover background"
+        }
+      },
+      "on": {
+        "default": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Toggle button on state background"
+        },
+        "hover": {
+          "value": "{navy.800}",
+          "type": "color",
+          "description": "Toggle button on state hover background"
+        }
+      },
+      "disabled": {
+        "value": "{neutral.100}",
+        "type": "color",
+        "description": "Toggle button disabled background"
+      }
+    },
+    "text": {
+      "off": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Toggle button off state text color"
+        }
+      },
+      "on": {
+        "default": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Toggle button on state text color"
+        }
+      },
+      "disabled": {
+        "value": "{neutral.400}",
+        "type": "color",
+        "description": "Toggle button disabled text color"
+      }
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Toggle button border width"
+      },
+      "off": {
+        "default": {
+          "value": "{neutral.300}",
+          "type": "color",
+          "description": "Toggle button off state border color"
+        },
+        "hover": {
+          "value": "{neutral.400}",
+          "type": "color",
+          "description": "Toggle button off state hover border color"
+        }
+      },
+      "on": {
+        "default": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Toggle button on state border color"
+        },
+        "hover": {
+          "value": "{navy.800}",
+          "type": "color",
+          "description": "Toggle button on state hover border color"
+        }
+      },
+      "disabled": {
+        "value": "{neutral.200}",
+        "type": "color",
+        "description": "Toggle button disabled border color"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Toggle button border radius"
+    },
+    "fontSize": {
+      "sm": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Small toggle button font size"
+      },
+      "md": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Medium toggle button font size"
+      },
+      "lg": {
+        "value": "18px",
+        "type": "dimension",
+        "description": "Large toggle button font size"
+      }
+    },
+    "iconSize": {
+      "sm": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Small toggle button icon size"
+      },
+      "md": {
+        "value": "18px",
+        "type": "dimension",
+        "description": "Medium toggle button icon size"
+      },
+      "lg": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Large toggle button icon size"
+      }
+    },
+    "fontWeight": {
+      "value": "500",
+      "type": "fontWeight",
+      "description": "Toggle button font weight"
+    },
+    "focus": {
+      "ringColor": {
+        "value": "{focus.ring}",
+        "type": "color",
+        "description": "Toggle button focus ring color"
+      },
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Toggle button focus ring width"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Toggle button focus ring offset"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Toggle button transition duration"
+      }
+    }
+  }
+}

package/tokens/components/toggle-switch.json

@@ -0,0 +1,95 @@
+{
+  "toggleSwitch": {
+    "width": {
+      "sm": {
+        "value": "36px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "44px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "52px",
+        "type": "dimension"
+      }
+    },
+    "height": {
+      "sm": {
+        "value": "20px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "24px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "28px",
+        "type": "dimension"
+      }
+    },
+    "thumb": {
+      "size": {
+        "sm": {
+          "value": "16px",
+          "type": "dimension"
+        },
+        "md": {
+          "value": "20px",
+          "type": "dimension"
+        },
+        "lg": {
+          "value": "24px",
+          "type": "dimension"
+        }
+      },
+      "offset": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.0}",
+          "type": "color"
+        }
+      },
+      "shadow": {
+        "value": "0 1px 3px rgba(0, 0, 0, 0.2)",
+        "type": "shadow"
+      }
+    },
+    "track": {
+      "background": {
+        "off": {
+          "value": "rgba(255, 255, 255, 0.15)",
+          "type": "color",
+          "description": "Off state - semi-transparent for dark backgrounds"
+        },
+        "on": {
+          "value": "{orange.500}",
+          "type": "color",
+          "description": "On state - visible accent color"
+        },
+        "disabled": {
+          "value": "rgba(255, 255, 255, 0.08)",
+          "type": "color",
+          "description": "Disabled state - subtle semi-transparent"
+        }
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{orange.500}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/tokens/components/toolbar.json

@@ -0,0 +1,41 @@
+{
+  "toolbar": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Toolbar background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Toolbar border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Toolbar border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Toolbar border radius"
+    },
+    "padding": {
+      "value": "{space.m}",
+      "type": "dimension",
+      "description": "Toolbar inner padding"
+    },
+    "gap": {
+      "value": "{space.m}",
+      "type": "dimension",
+      "description": "Gap between toolbar items"
+    },
+    "minHeight": {
+      "value": "48px",
+      "type": "dimension",
+      "description": "Minimum toolbar height"
+    }
+  }
+}

package/tokens/components/tooltip.json

@@ -0,0 +1,60 @@
+{
+  "tooltip": {
+    "padding": {
+      "x": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{space.xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "background": {
+      "value": "{surface.inverse}",
+      "type": "color",
+      "description": "Tooltip background color (dark)"
+    },
+    "text": {
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Tooltip text color (light on dark)"
+      },
+      "fontSize": {
+        "value": "13px",
+        "type": "dimension",
+        "description": "Tooltip font size"
+      }
+    },
+    "radius": {
+      "value": "{radius.subtle}",
+      "type": "dimension",
+      "description": "Border radius"
+    },
+    "arrow": {
+      "size": {
+        "value": "6px",
+        "type": "dimension",
+        "description": "Arrow/pointer size"
+      }
+    },
+    "offset": {
+      "value": "8px",
+      "type": "dimension",
+      "description": "Distance from trigger element"
+    },
+    "maxWidth": {
+      "value": "250px",
+      "type": "dimension",
+      "description": "Maximum width before wrapping"
+    },
+    "zIndex": {
+      "value": "1100",
+      "type": "number",
+      "description": "Z-index for stacking"
+    }
+  }
+}