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

package/tokens/components/split-button.json

@@ -0,0 +1,316 @@
+{
+  "split-button": {
+    "background": {
+      "primary": {
+        "default": {
+          "value": "{intent.action.default}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{intent.action.hover}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{intent.action.active}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{neutral.200}",
+          "type": "color"
+        }
+      },
+      "secondary": {
+        "default": {
+          "value": "{intent.secondary.default}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{intent.secondary.hover}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{neutral.100}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{neutral.100}",
+          "type": "color"
+        }
+      },
+      "outlined": {
+        "default": {
+          "value": "transparent",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{neutral.50}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{neutral.100}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "transparent",
+          "type": "color"
+        }
+      }
+    },
+    "text": {
+      "primary": {
+        "default": {
+          "value": "{text.inverse}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{neutral.400}",
+          "type": "color"
+        }
+      },
+      "secondary": {
+        "default": {
+          "value": "{brand.primary}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{neutral.400}",
+          "type": "color"
+        }
+      },
+      "outlined": {
+        "default": {
+          "value": "{brand.primary}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{neutral.400}",
+          "type": "color"
+        }
+      }
+    },
+    "border": {
+      "primary": {
+        "default": {
+          "value": "{intent.action.default}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{intent.action.hover}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{neutral.200}",
+          "type": "color"
+        }
+      },
+      "secondary": {
+        "default": {
+          "value": "{intent.secondary.border}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{intent.secondary.border}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{neutral.300}",
+          "type": "color"
+        }
+      },
+      "outlined": {
+        "default": {
+          "value": "{brand.primary}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{brand.primary}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{neutral.300}",
+          "type": "color"
+        }
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension"
+    },
+    "divider": {
+      "primary": {
+        "value": "rgba(255, 255, 255, 0.2)",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "{neutral.300}",
+        "type": "color"
+      },
+      "outlined": {
+        "value": "{brand.primary}",
+        "type": "color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension"
+      }
+    },
+    "size": {
+      "sm": {
+        "height": {
+          "value": "32px",
+          "type": "dimension"
+        },
+        "paddingX": {
+          "value": "{space.s}",
+          "type": "dimension"
+        },
+        "fontSize": {
+          "value": "14px",
+          "type": "dimension"
+        },
+        "iconSize": {
+          "value": "16px",
+          "type": "dimension"
+        },
+        "gap": {
+          "value": "{space.2xs}",
+          "type": "dimension"
+        }
+      },
+      "md": {
+        "height": {
+          "value": "40px",
+          "type": "dimension"
+        },
+        "paddingX": {
+          "value": "{space.m}",
+          "type": "dimension"
+        },
+        "fontSize": {
+          "value": "16px",
+          "type": "dimension"
+        },
+        "iconSize": {
+          "value": "18px",
+          "type": "dimension"
+        },
+        "gap": {
+          "value": "{space.xs}",
+          "type": "dimension"
+        }
+      },
+      "lg": {
+        "height": {
+          "value": "48px",
+          "type": "dimension"
+        },
+        "paddingX": {
+          "value": "{space.l}",
+          "type": "dimension"
+        },
+        "fontSize": {
+          "value": "18px",
+          "type": "dimension"
+        },
+        "iconSize": {
+          "value": "20px",
+          "type": "dimension"
+        },
+        "gap": {
+          "value": "{space.s}",
+          "type": "dimension"
+        }
+      }
+    },
+    "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"
+      }
+    },
+    "menu": {
+      "item": {
+        "padding": {
+          "x": {
+            "value": "{space.m}",
+            "type": "dimension"
+          },
+          "y": {
+            "value": "{space.s}",
+            "type": "dimension"
+          }
+        },
+        "gap": {
+          "value": "{space.s}",
+          "type": "dimension"
+        },
+        "background": {
+          "default": {
+            "value": "transparent",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{neutral.100}",
+            "type": "color"
+          }
+        },
+        "text": {
+          "default": {
+            "value": "{text.default}",
+            "type": "color"
+          }
+        },
+        "icon": {
+          "color": {
+            "value": "{text.muted}",
+            "type": "color"
+          },
+          "size": {
+            "value": "16px",
+            "type": "dimension"
+          }
+        }
+      }
+    },
+    "fontWeight": {
+      "value": "600",
+      "type": "fontWeight"
+    },
+    "focus": {
+      "ringColor": {
+        "value": "{focus.ring}",
+        "type": "color"
+      },
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration"
+      }
+    }
+  }
+}

package/tokens/components/splitter.json

@@ -0,0 +1,88 @@
+{
+  "splitter": {
+    "background": {
+      "value": "{surface.canvas}",
+      "type": "color",
+      "description": "Splitter container background"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Splitter border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Splitter border width"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Splitter border radius"
+      }
+    },
+    "gutter": {
+      "size": {
+        "value": "{space.s}",
+        "type": "dimension",
+        "description": "Default gutter width/height"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Gutter background color"
+        },
+        "hover": {
+          "value": "{neutral.200}",
+          "type": "color",
+          "description": "Gutter hover background"
+        },
+        "active": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Gutter active/dragging background"
+        }
+      },
+      "handle": {
+        "size": {
+          "value": "24px",
+          "type": "dimension",
+          "description": "Gutter handle indicator size"
+        },
+        "color": {
+          "default": {
+            "value": "{neutral.400}",
+            "type": "color",
+            "description": "Gutter handle color"
+          },
+          "hover": {
+            "value": "{neutral.500}",
+            "type": "color",
+            "description": "Gutter handle hover color"
+          },
+          "active": {
+            "value": "{neutral.0}",
+            "type": "color",
+            "description": "Gutter handle active color"
+          }
+        }
+      }
+    },
+    "panel": {
+      "minSize": {
+        "value": "50px",
+        "type": "dimension",
+        "description": "Minimum panel size"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Gutter state transition duration"
+      }
+    }
+  }
+}

package/tokens/components/steps.json

@@ -0,0 +1,154 @@
+{
+  "steps": {
+    "gap": {
+      "value": "{space.m}",
+      "type": "dimension",
+      "description": "Gap between step items"
+    },
+    "connector": {
+      "height": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Connector line height"
+      },
+      "color": {
+        "incomplete": {
+          "value": "{navy.600}",
+          "type": "color",
+          "description": "Incomplete connector color"
+        },
+        "complete": {
+          "value": "{orange.500}",
+          "type": "color",
+          "description": "Completed connector color"
+        }
+      }
+    },
+    "marker": {
+      "size": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Step marker size"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Step number font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Step number font weight"
+      },
+      "background": {
+        "incomplete": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Incomplete step marker background"
+        },
+        "active": {
+          "value": "{orange.500}",
+          "type": "color",
+          "description": "Active step marker background"
+        },
+        "complete": {
+          "value": "{orange.500}",
+          "type": "color",
+          "description": "Completed step marker background"
+        }
+      },
+      "text": {
+        "incomplete": {
+          "value": "{navy.400}",
+          "type": "color",
+          "description": "Incomplete step number color"
+        },
+        "active": {
+          "value": "{neutral.0}",
+          "type": "color",
+          "description": "Active step number color"
+        },
+        "complete": {
+          "value": "{neutral.0}",
+          "type": "color",
+          "description": "Completed step number/icon color"
+        }
+      },
+      "border": {
+        "width": {
+          "value": "2px",
+          "type": "dimension",
+          "description": "Marker border width"
+        },
+        "color": {
+          "incomplete": {
+            "value": "{navy.600}",
+            "type": "color",
+            "description": "Incomplete marker border color"
+          },
+          "active": {
+            "value": "{orange.500}",
+            "type": "color",
+            "description": "Active marker border color"
+          },
+          "complete": {
+            "value": "{orange.500}",
+            "type": "color",
+            "description": "Completed marker border color"
+          }
+        }
+      }
+    },
+    "label": {
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Step label font size"
+      },
+      "fontWeight": {
+        "value": "500",
+        "type": "fontWeight",
+        "description": "Step label font weight"
+      },
+      "color": {
+        "incomplete": {
+          "value": "{navy.400}",
+          "type": "color",
+          "description": "Incomplete step label color"
+        },
+        "active": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Active step label color"
+        },
+        "complete": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Completed step label color"
+        }
+      },
+      "gap": {
+        "value": "{space.xs}",
+        "type": "dimension",
+        "description": "Gap between marker and label"
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Focus ring width"
+      },
+      "ringColor": {
+        "value": "{orange.500}",
+        "type": "color",
+        "description": "Focus ring color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Focus ring offset"
+      }
+    }
+  }
+}

package/tokens/components/tabmenu.json

@@ -0,0 +1,103 @@
+{
+  "tabmenu": {
+    "background": {
+      "value": "transparent",
+      "type": "color",
+      "description": "TabMenu container background"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Bottom border width"
+      },
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Bottom border color"
+      }
+    },
+    "item": {
+      "padding": {
+        "value": "{space.s} {space.m}",
+        "type": "dimension",
+        "description": "Tab item padding"
+      },
+      "gap": {
+        "value": "{space.2xs}",
+        "type": "dimension",
+        "description": "Gap between icon and label"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Tab text color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Tab text color on hover"
+        },
+        "active": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Active tab text color"
+        },
+        "disabled": {
+          "value": "{neutral.400}",
+          "type": "color",
+          "description": "Disabled tab text color"
+        }
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Tab background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Tab background on hover"
+        },
+        "active": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Active tab background"
+        }
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Icon size"
+      }
+    },
+    "inkbar": {
+      "height": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Active indicator height"
+      },
+      "color": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Active indicator color"
+      },
+      "borderRadius": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Active indicator border radius"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}