@synergy-design-system/tokens/src/figma-tokens/semantic/input.json

Design tokens for Synergy, the SICK Design System

{
  "input": {
    "color": {
      "value": "{neutral.950}",
      "type": "color"
    },
    "color-hover": {
      "value": "{neutral.950}",
      "type": "color"
    },
    "color-focus": {
      "value": "{neutral.950}",
      "type": "color"
    },
    "color-disabled": {
      "value": "{neutral.950}",
      "type": "color"
    },
    "background": {
      "color": {
        "value": "{neutral.0}",
        "type": "color"
      },
      "color-hover": {
        "value": "{input.background.color}",
        "type": "color"
      },
      "color-focus": {
        "value": "{input.background.color}",
        "type": "color"
      },
      "color-disabled": {
        "value": "{input.background.color}",
        "type": "color"
      }
    },
    "border": {
      "color": {
        "value": "{neutral.700}",
        "type": "color"
      },
      "color-hover": {
        "value": "{neutral.950}",
        "type": "color"
      },
      "color-focus": {
        "value": "{neutral.950}",
        "type": "color"
      },
      "color-disables": {
        "value": "{neutral.700}",
        "type": "color"
      },
      "radius-small": {
        "value": "{border-radius.none}",
        "type": "borderRadius"
      },
      "radius-medium": {
        "value": "{border-radius.none}",
        "type": "borderRadius"
      },
      "radius-large": {
        "value": "{border-radius.none}",
        "type": "borderRadius"
      },
      "color-focus-error": {
        "value": "{error.700}",
        "type": "color"
      }
    },
    "width": {
      "value": "{border-width.small}",
      "type": "borderWidth"
    },
    "icon": {
      "color": {
        "value": "{neutral.800}",
        "type": "color"
      },
      "color-hover": {
        "value": "{neutral.800}",
        "type": "color"
      },
      "color-focus": {
        "value": "{neutral.800}",
        "type": "color"
      },
      "icon-clearable": {
        "color": {
          "value": "{neutral.500}",
          "type": "color"
        },
        "color-hover": {
          "value": "{neutral.500}",
          "type": "color"
        },
        "color-focus": {
          "value": "{neutral.500}",
          "type": "color"
        }
      }
    },
    "placeholder": {
      "color": {
        "value": "{neutral.500}",
        "type": "color"
      },
      "color-disabled": {
        "value": "{neutral.500}",
        "type": "color"
      }
    },
    "required": {
      "content": {
        "value": "*",
        "type": "text"
      },
      "content-color": {
        "value": "{input.label.color}",
        "type": "color"
      },
      "content-offset": {
        "value": "-2px",
        "type": "spacing"
      }
    },
    "label": {
      "color": {
        "value": "{neutral.950}",
        "type": "color"
      },
      "font-size": {
        "small": {
          "value": "{font-size.small}",
          "type": "fontSizes"
        },
        "medium": {
          "value": "{font-size.medium}",
          "type": "fontSizes"
        },
        "large": {
          "value": "{font-size.large}",
          "type": "fontSizes"
        }
      }
    },
    "spacing": {
      "small": {
        "value": "{spacing.small}",
        "type": "spacing"
      },
      "medium": {
        "value": "{spacing.medium}",
        "type": "spacing"
      },
      "large": {
        "value": "{spacing.large}",
        "type": "spacing"
      }
    },
    "focus-ring": {
      "color": {
        "value": "{primary.400}",
        "type": "color"
      },
      "offset": {
        "value": "0",
        "type": "spacing"
      },
      "error": {
        "value": "{error.400}",
        "type": "color"
      }
    },
    "disabled-opacity": {
      "value": "50%",
      "type": "opacity"
    },
    "readonly-background": {
      "color": {
        "value": "{neutral.50}",
        "type": "color"
      },
      "color-hover": {
        "value": "{neutral.50}",
        "type": "color"
      },
      "color-focus": {
        "value": "{neutral.50}",
        "type": "color"
      },
      "color-disabled": {
        "value": "{neutral.50}",
        "type": "color"
      }
    },
    "help-text": {
      "color": {
        "value": "{neutral.800}",
        "type": "color"
      },
      "color-error": {
        "value": "{error.700}",
        "type": "color"
      },
      "font-size": {
        "small": {
          "value": "{font-size.x-small}",
          "type": "fontSizes"
        },
        "medium": {
          "value": "{font-size.small}",
          "type": "fontSizes"
        },
        "large": {
          "value": "{font-size.medium}",
          "type": "fontSizes"
        }
      }
    },
    "height": {
      "small": {
        "value": "36px",
        "type": "spacing"
      },
      "medium": {
        "value": "{spacing.2x-large}",
        "type": "spacing"
      },
      "large": {
        "value": "{spacing.3x-large}",
        "type": "spacing"
      }
    },
    "readonly": {
      "color": {
        "value": "{neutral.800}",
        "type": "color"
      },
      "color-disabled": {
        "value": "{neutral.800}",
        "type": "color"
      },
      "color-hover": {
        "value": "{neutral.950}",
        "type": "color"
      },
      "color-focus": {
        "value": "{neutral.950}",
        "type": "color"
      }
    },
    "font-size": {
      "small": {
        "value": "{font-size.small}",
        "type": "fontSizes"
      },
      "medium": {
        "value": "{font-size.medium}",
        "type": "fontSizes"
      },
      "large": {
        "value": "{font-size.large}",
        "type": "fontSizes"
      }
    }
  }
}