@yandex/ui/Textinput/Textinput.tokens/Textinput.tokens.yml

Yandex UI components

textinput:
  fontFamily:
    value: "{typography.controls.fontFamily.value}"

  border:
    width:
      value: 2px
    radius:
      value: 4px

  size:
    s:
      fontSize:
        value: "{typography.controls.size.s.fontSize.value}"
        comment: "Размер текста у s-textinput"
      height:
        value: 32px
        comment: "Высота самого s-textinput"
      spaceAll:
        value: 0 8px
        comment: "Размер внутреннего отступа самого s-textinput "

      withIcon:
        spaceRight:
          value: 32px
          comment: "Размер внутреннего правого отступа под размер иконки или крестика у s-textinput"
        spaceLeft:
          value: 32px
          comment: "Размер внутреннего левого отступа под размер иконки или крестика у s-textinput"

      icon:
        width:
          value: 32px
        height:
          value: 32px

      hint:
        fontSize:
          value: 12px

    m:
      fontSize:
        value: "{typography.controls.size.m.fontSize.value}"
        comment: "Размер текста у m-textinput"
      height:
        value: 36px
        comment: "Высота самого m-textinput"
      spaceAll:
        value: 0 10px
        comment: "`--textinput-size-m-control-spaceAll` *— Размер внутреннего отступа самого m-textinput*"

      withIcon:
        spaceRight:
          value: 36px
          comment: "Размер внутреннего правого отступа под размер иконки или крестика у m-textinput"
        spaceLeft:
          value: 36px
          comment: "Размер внутреннего правого отступа правого отступа под размер иконки или крестика у m-textinput"

      icon:
        width:
          value: 36px
        height:
          value: 36px

      hint:
        fontSize:
          value: 13px

  viewMaterial:
    typoColor:
      base:
        value: "#000"
      disabled:
        value: rgba(0, 0, 0, 0.4)
    borderColor:
      base:
        value: rgba(0, 0, 0, 0.1)
      stateError:
        value: "#FF3737"
    fontSize:
      value: 1rem
    space:
      all:
        value: 12px 0 10px
      left:
        value: 16px
      right:
        value: 16px
      top:
        value: 16px
    icon:
      fillColor:
        base:
          value: rgba(0, 0, 0, 0.8)
        disabled:
          value: rgba(0, 0, 0, 0.5)
      width:
        value: 24px
      height:
        value: 24px
    hint:
      fontSize:
        value: 0.75rem
      typoColor:
        base:
          value: rgba(0, 0, 0, 0.4)
        stateError:
          value: "#FF3737"
    caretColor:
      base:
        value: "#067AFF"
      stateError:
        value: "#FF3737"
    placeholder:
      typoColor:
        base:
          value: "{color.control.typo.ghost.value}"
    labelColor:
      base:
        value: rgba(0, 0, 0, 0.25)
      stateError:
        value: "#FF3737"
      floated:
        base:
          value: rgba(0, 0, 0, 0.4)

    variant:
      filled:
        borderColor:
          focused:
            value: "#067AFF"
        fillColor:
          value: rgba(0, 0, 0, 0.05)
        labelColor:
          floated:
            value: "#067AFF"

      outlined:
        borderColor:
          base:
            value: rgba(0, 0, 0, 0.1)
          focused:
            value: "#067AFF"
        labelColor:
            floated:
              value: "#067AFF"

  viewDefault:
    fillColor:
      base:
        value: "{color.control.type.blank.fillColor.base.value}"
      disabled:
        value: "{color.control.type.blank.fillColor.disable.value}"
      hovered:
        value: "{color.control.type.blank.fillColor.hover.value}"

    typoColor:
      base:
        value: "{color.control.typo.primary.value}"
      disabled:
        value: "{color.control.typo.disable.value}"

    placeholder:
      typoColor:
        base:
          value: "{color.control.typo.ghost.value}"
        disabled:
          value: "{color.control.typo.disable.value}"

    icon:
      fillColor:
        base:
          value: "{color.control.typo.ghost.value}"

    clear:
      fillColor:
        base:
          value: "{color.control.typo.ghost.value}"
        hovered:
          value: "{color.control.typo.primary.value}"

    hint:
      typoColor:
        stateError:
          base:
            value: "{color.control.typo.error.value}"

    borderColor:
      base:
        value: "{color.control.type.blank.borderColor.base.value}"
      disabled:
        value: "{color.control.type.blank.borderColor.disable.value}"
      focused:
        value: "{color.control.borderColor.focus.value}"
      hovered:
        value: "{color.control.type.blank.borderColor.hover.value}"
      stateError:
        base:
          value: "{color.control.type.default.borderColor.error.base.value}"
        hovered:
          value: "{color.control.type.default.borderColor.error.hover.value}"