[@thumbtack/thumbprint-scss]: Make responsive mixins easier to use from memory

In my opinion, it’s difficult to use the tp-respond-below and tp-respond-above mixins purely from memory because with the $tp variables, it’s actually quite verbose. I generally resort to copying and pasting them from some other code, which is a minor annoyance.

On the helpcenter repo we’ve been using the following convenience methods, which I find a lot easier to remember:

@import 'node_modules/@thumbtack/thumbprint-scss/mixins';

$breakpoints: (
  small: $tp-breakpoint__small,
  medium: $tp-breakpoint__medium,
  large: $tp-breakpoint__large,
);

@mixin respond-above($width) {
  @include tp-respond-above(map-get($breakpoints, $width)) {
    @content;
  }
}

@mixin respond-below($width) {
  @include tp-respond-below(map-get($breakpoints, $width)) {
    @content;
  }
}

// Usage:

.component {
  @include respond-above(medium) {
    // ...
  }
}

[tomgenoni]

Yeah, we do global migrations caused by breaking changes somewhat regularly. At this point our tp-* classes are only used on legacy pages or as backups where the React component either doesn’t exist or is insufficient, so converting this to something terser, like we did with the Atomic classes, makes sense.

[tomgenoni]

Yeah, doesn’t look like the usage of these is frequent enough to warrant a big change.