@yandex/ui/esm/Tumbler/Tumbler.tokens/Tumbler.tokens.yml

Yandex UI components

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

  button:
    space:
      value: 2px
    opacity:
      disabled:
        value: 1

  size:
    s:
      fontSize:
        value: "{typography.controls.size.s.fontSize.value}"
        comment: "Размер текста s-tumbler"
      lineHeight:
        value: 16px
        comment: "Межстрочный интервал текста у s-tumbler"
      borderRadius:
        value: 8px
      width:
        value: 32px
        comment: "Ширина s-tumbler"
      height:
        value: 16px
        comment: "Высота s-tumbler"

      button:
        borderRadius:
          value: 6px
        width:
          value: 12px
          comment: "Ширина button m-tumbler"
        height:
          value: 12px
          comment: "Высота button m-tumbler"

        pressed:
          width:
            value: 14px

      label:
        indentRight:
          value: 8px
        indentLeft:
          value: 8px

    m:
      fontSize:
        value: "{typography.controls.size.m.fontSize.value}"
        comment: "Размер текста m-tumbler"
      lineHeight:
        value: 20px
        comment: "Межстрочный интервал текста у m-tumbler"
      borderRadius:
        value: 10px
      width:
        value: 40px
        comment: "Ширина m-tumbler"
      height:
        value: 20px
        comment: "Высота m-tumbler"

      button:
        borderRadius:
          value: 8px
        width:
          value: 16px
          comment: "Ширина button m-tumbler"
        height:
          value: 16px
          comment: "Высота button m-tumbler"

        pressed:
          width:
            value: 18px

      label:
        indentRight:
          value: 12px
        indentLeft:
          value: 12px

    l:
      fontSize:
        value: "{typography.controls.size.l.fontSize.value}"
      lineHeight:
        value: 24px
      borderRadius:
        value: 14px
      width:
        value: 56px
      height:
        value: 28px

      button:
        borderRadius:
          value: 12px
        width:
          value: 24px
        height:
          value: 24px

        pressed:
          width:
            value: 26px

      label:
        indentRight:
          value: 16px
        indentLeft:
          value: 16px

  viewDefault:
    outlineColor:
      value: "{color.control.borderColor.prism.value}"

    fillColor:
      base:
        value: "{color.control.type.default.fillColor.base.value}"
      disabled:
        value: "{color.control.type.default.fillColor.disable.value}"
      hovered:
        value: "{color.control.type.default.fillColor.hover.value}"
      checked:
        base:
          value: "{color.control.type.action.fillColor.base.value}"
        disabled:
          value: "{color.control.type.default.fillColor.disable.value}"
        hovered:
          value: "{color.control.type.action.fillColor.hover.value}"

    button:
      fillColor:
        base:
          value: "{color.control.type.faint.fillColor.base.value}"

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