@open-inwoner/design-tokens/src/components/filters.tokens.json

Design tokens for Open Inwoner

{
  "oip": {
    "filter": {
      "wrapper": {
        "gap": {"value": "{oip.spacing.large}"},
        "font-family": {"value": "{oip.typography.sans-serif.font-family}"}
      },
      "button": {
        "background-color": {"value": "{oip.color.bg}"},
        "color": {"value": "{oip.color.fg}"},
        "border-color": {"value": "{oip.color.gray}"},
        "border-radius": {"value": "3px"},
        "font-family": {"value": "{oip.typography.sans-serif.font-family}"},
        "font-size": {"value": "{oip.text.font-size}"},
        "font-weight": {"value": "400"},
        "padding": {"value": "10px 12px"},
        "gap": {"value": "{oip.spacing.large}"},
        "min-width": {"value": "204px"},
        "max-width": {"value": "220px"},
        "icon": {"size": {"value": "20px"}},
        "hover": {"background-color": {"value": "{oip.color.gray-lightest}"}},
        "active": {
          "color": {"value": "{oip.color.primary}"},
          "border-color": {"value": "{oip.color.primary}"},
          "active": {"value": "600"}
        }
      },
      "choices": {
        "background-color": {"value": "{oip.color.bg}"},
        "color": {"value": "{oip.color.fg}"},
        "border-color": {"value": "{oip.color.gray}"},
        "border-radius": {"value": "3px"},
        "box-shadow": {"value": "0 4px 12px rgba(0, 0, 0, 0.15)"},
        "gap": {"value": "{oip.spacing.small}"}
      },
      "dropdown": {"min-width": {"value": "200px"}},
      "mobile": {"gap": {"value": "{oip.spacing.medium}"}},
      "title": {
        "font-size": {"value": "{oip.text.font-size}"},
        "font-weight": {"value": "400"},
        "color": {"value": "{oip.color.fg}"}
      },
      "option": {
        "background-color": {"value": "{oip.color.bg}"},
        "color": {"value": "{oip.color.fg}"},
        "border-color": {"value": "transparent"},
        "border-radius": {"value": "3px"},
        "padding-inline": {"value": "12px"},
        "padding-block": {"value": "8px"},
        "gap": {"value": "8px"},
        "hover": {"background-color": {"value": "{oip.color.gray-lightest}"}},
        "checked": {
          "border-color": {"value": "{oip.color.secondary}"},
          "icon-color": {"value": "{oip.color.secondary}"}
        },
        "icon": {
          "size": {"value": "24px"},
          "color": {"value": "{oip.color.fg}"}
        },
        "label-color": {"value": "{oip.color.fg}"},
        "label-gap": {"value": "{oip.spacing.small}"}
      },
      "chips": {
        "gap": {"value": "{oip.spacing.medium}"},
        "clear-button-font-weight": {"value": "400"}
      },
      "modal": {
        "padding": {"value": "1rem"},
        "gap": {"value": "2rem"},
        "border-radius": {"value": "8px"},
        "background-color": {"value": "{oip.color.gray-lightest}"},
        "header": {"gap": {"value": "2rem"}},
        "heading": {
          "color": {"value": "{oip.color.fg-heading}"},
          "font-size": {"value": "18px"},
          "font-weight": {"value": "500"}
        },
        "close-button-size": {"value": "32px"},
        "content-gap": {"value": "32px"},
        "footer-padding-bottom": {"value": "32px"},
        "backdrop-background-color": {"value": "rgb(0 0 0 / 0.4)"}
      },
      "bar": {
        "background-color": {"value": "transparent"},
        "border-radius": {"value": "3px"},
        "gap": {"value": "1rem"},
        "padding": {
          "block": {"start": {"value": "1rem"}, "end": {"value": "1rem"}},
          "inline": {"start": {"value": "1rem"}, "end": {"value": "1rem"}}
        },
        "label": {
          "color": {"value": "#000"},
          "font-weight": {"value": "400"},
          "font-family": {"value": "{oip.typography.sans-serif.font-family}"}
        }
      },
      "chip": {
        "background-color": {"value": "transparent"},
        "border-color": {"value": "{oip.color.primary}"},
        "border-radius": {"value": "3px"},
        "color": {"value": "{oip.color.fg}"},
        "font-size": {"value": "14px"},
        "gap": {"value": "8px"},
        "line-height": {"value": "20px"},
        "padding": {
          "block": {"start": {"value": "8px"}, "end": {"value": "8px"}},
          "inline": {"start": {"value": "8px"}, "end": {"value": "8px"}}
        },
        "desktop": {
          "font-size": {"value": "{oip.text.font-size}"},
          "line-height": {"value": "{oip.text.line-height}"},
          "padding": {
            "block": {"start": {"value": "8px"}, "end": {"value": "8px"}},
            "inline": {"start": {"value": "1rem"}, "end": {"value": "1rem"}}
          }
        },
        "group": {"font-weight": {"value": "600"}},
        "label": {"font-weight": {"value": "400"}},
        "remove": {"icon": {"size": {"value": "16px"}}}
      }
    }
  }
}