feat(css) fluid type scale: use clamp() to reduce involved code

What does this MR do?

Makes use of clamp() function for gl-typescale-ui mixin. The function scales between 768px (start of min value) and 1200px (max value is used). Which removes the need of breakpoints to achive the same behavior.

See Codepen example: https://codepen.io/saschaeggi/pen/ZExxYzP

@function clamp-between($min, $max, $min-width: $breakpoint-md, $max-width: $breakpoint-xl) {
  $min-width: px-to-rem($min-width);
  $max-width: px-to-rem($max-width);

  $slope: ($max - $min) / ($max-width - $min-width);
  $intersection: (-$min-width * $slope) + $min;

  @return clamp(#{$min}, #{$intersection} + #{$slope * 100vw}, #{$max});
}

/**
* Declares a property with a fluid value that decreases or
* rises depending on the viewport’s size. The property type
* should be numeric.
*
* Values are expected in rem units.
* Fluid range: between 768px – 1200px.
*
* @param $property Property name, i.e. line-height, font-size, width, height, etc.
* @param $min Property value lower bound.
* @param $max Property value upper bound.
*/
@mixin gl-responsive-property($property, $min, $max) {
  #{$property}: clamp-between($min, $max);
}

Test page: http://localhost:9001/iframe.html?args=&id=scss-typescale--default&viewMode=story

Blocks gitlab!88536 (closed)