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

package/tokens/components/galleria.json

@@ -0,0 +1,235 @@
+{
+  "galleria": {
+    "container": {
+      "background": {
+        "value": "{surface.panel}",
+        "type": "color",
+        "description": "Galleria container background"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Galleria container border radius"
+      },
+      "border": {
+        "color": {
+          "value": "{border.subtle}",
+          "type": "color",
+          "description": "Container border color"
+        },
+        "width": {
+          "value": "1px",
+          "type": "dimension",
+          "description": "Container border width"
+        }
+      }
+    },
+    "preview": {
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Preview area background"
+      },
+      "padding": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Preview area padding"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Preview image border radius"
+      }
+    },
+    "thumbnail": {
+      "container": {
+        "gap": {
+          "value": "{space.xs}",
+          "type": "dimension",
+          "description": "Gap between thumbnails"
+        },
+        "padding": {
+          "value": "{space.s}",
+          "type": "dimension",
+          "description": "Thumbnail container padding"
+        }
+      },
+      "item": {
+        "width": {
+          "value": "80px",
+          "type": "dimension",
+          "description": "Thumbnail width"
+        },
+        "height": {
+          "value": "60px",
+          "type": "dimension",
+          "description": "Thumbnail height"
+        },
+        "radius": {
+          "value": "{radius.subtle}",
+          "type": "dimension",
+          "description": "Thumbnail border radius"
+        },
+        "opacity": {
+          "default": {
+            "value": "0.6",
+            "type": "number",
+            "description": "Thumbnail opacity"
+          },
+          "hover": {
+            "value": "0.8",
+            "type": "number",
+            "description": "Thumbnail hover opacity"
+          },
+          "active": {
+            "value": "1",
+            "type": "number",
+            "description": "Active thumbnail opacity"
+          }
+        },
+        "border": {
+          "color": {
+            "default": {
+              "value": "transparent",
+              "type": "color",
+              "description": "Thumbnail border color"
+            },
+            "active": {
+              "value": "{brand.primary}",
+              "type": "color",
+              "description": "Active thumbnail border color"
+            }
+          },
+          "width": {
+            "value": "2px",
+            "type": "dimension",
+            "description": "Thumbnail border width"
+          }
+        }
+      }
+    },
+    "navigator": {
+      "size": {
+        "value": "40px",
+        "type": "dimension",
+        "description": "Navigator button size"
+      },
+      "iconSize": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Navigator icon size"
+      },
+      "background": {
+        "default": {
+          "value": "rgba(0, 0, 0, 0.3)",
+          "type": "color",
+          "description": "Navigator background"
+        },
+        "hover": {
+          "value": "rgba(0, 0, 0, 0.5)",
+          "type": "color",
+          "description": "Navigator hover background"
+        }
+      },
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Navigator icon color"
+      },
+      "radius": {
+        "value": "50%",
+        "type": "dimension",
+        "description": "Navigator border radius"
+      }
+    },
+    "indicator": {
+      "size": {
+        "value": "10px",
+        "type": "dimension",
+        "description": "Indicator dot size"
+      },
+      "gap": {
+        "value": "{space.xs}",
+        "type": "dimension",
+        "description": "Gap between indicators"
+      },
+      "background": {
+        "default": {
+          "value": "rgba(255, 255, 255, 0.5)",
+          "type": "color",
+          "description": "Indicator background"
+        },
+        "active": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Active indicator background"
+        }
+      }
+    },
+    "fullscreen": {
+      "background": {
+        "value": "{surface.overlay}",
+        "type": "color",
+        "description": "Fullscreen overlay background"
+      },
+      "zIndex": {
+        "value": "1100",
+        "type": "number",
+        "description": "Fullscreen z-index"
+      },
+      "closeButton": {
+        "size": {
+          "value": "40px",
+          "type": "dimension",
+          "description": "Close button size"
+        },
+        "color": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Close button color"
+        },
+        "background": {
+          "default": {
+            "value": "rgba(0, 0, 0, 0.3)",
+            "type": "color",
+            "description": "Close button background"
+          },
+          "hover": {
+            "value": "rgba(0, 0, 0, 0.5)",
+            "type": "color",
+            "description": "Close button hover background"
+          }
+        }
+      }
+    },
+    "caption": {
+      "background": {
+        "value": "rgba(0, 0, 0, 0.5)",
+        "type": "color",
+        "description": "Caption background"
+      },
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Caption text color"
+      },
+      "padding": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Caption padding"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Caption font size"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "300ms",
+        "type": "duration",
+        "description": "Transition duration"
+      }
+    }
+  }
+}

package/tokens/components/image-compare.json

@@ -0,0 +1,74 @@
+{
+  "image-compare": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Container 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"
+      }
+    },
+    "handle": {
+      "width": {
+        "value": "4px",
+        "type": "dimension",
+        "description": "Handle divider width"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.0}",
+          "type": "color",
+          "description": "Handle color"
+        },
+        "hover": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Handle hover color"
+        }
+      },
+      "shadow": {
+        "value": "{shadow.m}",
+        "type": "shadow",
+        "description": "Handle shadow"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Handle icon container size"
+      },
+      "color": {
+        "value": "{neutral.700}",
+        "type": "color",
+        "description": "Handle icon color"
+      },
+      "background": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Handle icon background"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Handle state transition duration"
+      }
+    }
+  }
+}

package/tokens/components/image.json

@@ -0,0 +1,71 @@
+{
+  "image": {
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Image border radius"
+    },
+    "placeholder": {
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Placeholder background color while loading"
+      }
+    },
+    "preview": {
+      "icon": {
+        "size": {
+          "value": "24px",
+          "type": "dimension",
+          "description": "Preview indicator icon size"
+        },
+        "color": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Preview indicator icon color"
+        },
+        "background": {
+          "value": "rgba(0, 0, 0, 0.5)",
+          "type": "color",
+          "description": "Preview indicator background"
+        }
+      },
+      "overlay": {
+        "background": {
+          "value": "{surface.overlay}",
+          "type": "color",
+          "description": "Preview overlay background"
+        },
+        "zIndex": {
+          "value": "1100",
+          "type": "number",
+          "description": "Preview overlay z-index"
+        }
+      },
+      "closeButton": {
+        "size": {
+          "value": "40px",
+          "type": "dimension",
+          "description": "Close button size in preview"
+        },
+        "color": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Close button color"
+        },
+        "hoverBackground": {
+          "value": "rgba(255, 255, 255, 0.1)",
+          "type": "color",
+          "description": "Close button hover background"
+        }
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Transition duration for hover effects"
+      }
+    }
+  }
+}

package/tokens/components/in-place.json

@@ -0,0 +1,100 @@
+{
+  "in-place": {
+    "display": {
+      "paddingX": {
+        "value": "{space.m}",
+        "type": "dimension",
+        "description": "Display element horizontal padding"
+      },
+      "paddingY": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Display element vertical padding"
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Display background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Display hover background"
+        }
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Display text color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Display hover text color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Display disabled text color"
+        }
+      },
+      "border": {
+        "radius": {
+          "value": "{radius.default}",
+          "type": "dimension",
+          "description": "Display border radius"
+        }
+      }
+    },
+    "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.default}",
+        "type": "dimension",
+        "description": "Close button border radius"
+      },
+      "gap": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Gap between content and close button"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "State transition duration"
+      }
+    }
+  }
+}

package/tokens/components/inline-message.json

@@ -0,0 +1,107 @@
+{
+  "inline-message": {
+    "padding": {
+      "x": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{space.xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "gap": {
+      "value": "{space.xs}",
+      "type": "dimension",
+      "description": "Gap between icon and text"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Border radius"
+    },
+    "fontSize": {
+      "value": "14px",
+      "type": "dimension",
+      "description": "Text font size"
+    },
+    "fontWeight": {
+      "value": "500",
+      "type": "fontWeight",
+      "description": "Text font weight"
+    },
+    "iconSize": {
+      "value": "16px",
+      "type": "dimension",
+      "description": "Icon size"
+    },
+    "background": {
+      "success": {
+        "value": "{feedback.successSubtle}",
+        "type": "color",
+        "description": "Success background"
+      },
+      "info": {
+        "value": "{feedback.infoSubtle}",
+        "type": "color",
+        "description": "Info background"
+      },
+      "warn": {
+        "value": "{feedback.warningSubtle}",
+        "type": "color",
+        "description": "Warning background"
+      },
+      "error": {
+        "value": "{feedback.errorSubtle}",
+        "type": "color",
+        "description": "Error background"
+      }
+    },
+    "text": {
+      "success": {
+        "value": "{feedback.successEmphasis}",
+        "type": "color",
+        "description": "Success text color"
+      },
+      "info": {
+        "value": "{feedback.infoEmphasis}",
+        "type": "color",
+        "description": "Info text color"
+      },
+      "warn": {
+        "value": "{feedback.warningEmphasis}",
+        "type": "color",
+        "description": "Warning text color"
+      },
+      "error": {
+        "value": "{feedback.errorEmphasis}",
+        "type": "color",
+        "description": "Error text color"
+      }
+    },
+    "icon": {
+      "success": {
+        "value": "{feedback.success}",
+        "type": "color",
+        "description": "Success icon color"
+      },
+      "info": {
+        "value": "{feedback.info}",
+        "type": "color",
+        "description": "Info icon color"
+      },
+      "warn": {
+        "value": "{feedback.warning}",
+        "type": "color",
+        "description": "Warning icon color"
+      },
+      "error": {
+        "value": "{feedback.error}",
+        "type": "color",
+        "description": "Error icon color"
+      }
+    }
+  }
+}