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

package/tokens/components/sidebar.json

@@ -0,0 +1,146 @@
+{
+  "sidebar": {
+    "background": {
+      "value": "{navy.800}",
+      "type": "color",
+      "description": "Sidebar background color"
+    },
+    "border": {
+      "color": {
+        "value": "{navy.600}",
+        "type": "color",
+        "description": "Sidebar border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Sidebar border width"
+      }
+    },
+    "shadow": {
+      "value": "{shadow.l}",
+      "type": "shadow",
+      "description": "Sidebar shadow"
+    },
+    "header": {
+      "padding": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Header section padding"
+      },
+      "background": {
+        "value": "{navy.800}",
+        "type": "color",
+        "description": "Header background"
+      },
+      "borderColor": {
+        "value": "{navy.600}",
+        "type": "color",
+        "description": "Header bottom border color"
+      },
+      "title": {
+        "color": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Header title text color"
+        },
+        "fontSize": {
+          "value": "18px",
+          "type": "dimension",
+          "description": "Header title font size"
+        },
+        "fontWeight": {
+          "value": "600",
+          "type": "fontWeight",
+          "description": "Header title font weight"
+        }
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{space.l}",
+        "type": "dimension",
+        "description": "Content area padding"
+      },
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Content text color"
+      }
+    },
+    "closeButton": {
+      "size": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Close button size"
+      },
+      "iconSize": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Close icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{navy.300}",
+          "type": "color",
+          "description": "Close button icon color"
+        },
+        "hover": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Close button hover color"
+        }
+      },
+      "background": {
+        "hover": {
+          "value": "{navy.700}",
+          "type": "color",
+          "description": "Close button hover background"
+        }
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Close button border radius"
+      }
+    },
+    "overlay": {
+      "background": {
+        "value": "{surface.overlay}",
+        "type": "color",
+        "description": "Overlay backdrop color"
+      }
+    },
+    "width": {
+      "default": {
+        "value": "320px",
+        "type": "dimension",
+        "description": "Default sidebar width"
+      },
+      "fullScreen": {
+        "value": "100%",
+        "type": "dimension",
+        "description": "Full screen width"
+      }
+    },
+    "zIndex": {
+      "overlay": {
+        "value": "1000",
+        "type": "number",
+        "description": "Overlay z-index"
+      },
+      "sidebar": {
+        "value": "1001",
+        "type": "number",
+        "description": "Sidebar z-index"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "300ms",
+        "type": "duration",
+        "description": "Slide animation duration"
+      }
+    }
+  }
+}

package/tokens/components/skeleton.json

@@ -0,0 +1,26 @@
+{
+  "skeleton": {
+    "background": {
+      "value": "{neutral.200}",
+      "type": "color",
+      "description": "Base skeleton background color"
+    },
+    "highlight": {
+      "value": "{neutral.300}",
+      "type": "color",
+      "description": "Animation highlight/shimmer color"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Default border radius for rectangle skeleton"
+    },
+    "animation": {
+      "duration": {
+        "value": "1.5s",
+        "type": "duration",
+        "description": "Wave animation duration"
+      }
+    }
+  }
+}

package/tokens/components/slider.json

@@ -0,0 +1,82 @@
+{
+  "slider": {
+    "track": {
+      "height": {
+        "value": "6px",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "rgba(255, 255, 255, 0.15)",
+          "type": "color",
+          "description": "Inactive track - semi-transparent white works on any dark background"
+        },
+        "fill": {
+          "value": "{orange.500}",
+          "type": "color",
+          "description": "Active/filled track - visible accent color"
+        },
+        "disabled": {
+          "value": "rgba(255, 255, 255, 0.08)",
+          "type": "color",
+          "description": "Disabled track - subtle semi-transparent"
+        }
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension"
+      }
+    },
+    "thumb": {
+      "size": {
+        "value": "20px",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "{orange.500}",
+          "type": "color",
+          "description": "Thumb - visible accent color"
+        },
+        "hover": {
+          "value": "{orange.400}",
+          "type": "color",
+          "description": "Thumb hover - lighter accent"
+        },
+        "disabled": {
+          "value": "rgba(255, 255, 255, 0.25)",
+          "type": "color",
+          "description": "Disabled thumb - semi-transparent"
+        }
+      },
+      "border": {
+        "width": {
+          "value": "0px",
+          "type": "dimension"
+        },
+        "color": {
+          "value": "transparent",
+          "type": "color"
+        }
+      },
+      "shadow": {
+        "value": "0 2px 4px rgba(0, 0, 0, 0.3)",
+        "type": "shadow"
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{orange.500}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/tokens/components/speed-dial.json

@@ -0,0 +1,144 @@
+{
+  "speed-dial": {
+    "button": {
+      "size": {
+        "value": "56px",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "{intent.action.default}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{intent.action.hover}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{intent.action.active}",
+          "type": "color"
+        }
+      },
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color"
+      },
+      "radius": {
+        "value": "9999px",
+        "type": "dimension"
+      },
+      "shadow": {
+        "value": "{shadow.m}",
+        "type": "shadow"
+      },
+      "iconSize": {
+        "value": "24px",
+        "type": "dimension"
+      }
+    },
+    "action": {
+      "size": {
+        "value": "48px",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.canvas}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{neutral.100}",
+          "type": "color"
+        }
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{brand.primary}",
+          "type": "color"
+        }
+      },
+      "border": {
+        "width": {
+          "value": "1px",
+          "type": "dimension"
+        },
+        "color": {
+          "value": "{neutral.200}",
+          "type": "color"
+        }
+      },
+      "radius": {
+        "value": "9999px",
+        "type": "dimension"
+      },
+      "shadow": {
+        "value": "{shadow.s}",
+        "type": "shadow"
+      },
+      "iconSize": {
+        "value": "20px",
+        "type": "dimension"
+      },
+      "gap": {
+        "value": "{space.s}",
+        "type": "dimension"
+      }
+    },
+    "label": {
+      "background": {
+        "value": "{neutral.800}",
+        "type": "color"
+      },
+      "color": {
+        "value": "{neutral.0}",
+        "type": "color"
+      },
+      "padding": {
+        "x": {
+          "value": "{space.s}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{space.2xs}",
+          "type": "dimension"
+        }
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension"
+      },
+      "fontSize": {
+        "value": "13px",
+        "type": "dimension"
+      },
+      "offset": {
+        "value": "{space.s}",
+        "type": "dimension"
+      }
+    },
+    "focus": {
+      "ringColor": {
+        "value": "{focus.ring}",
+        "type": "color"
+      },
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration"
+      }
+    }
+  }
+}