dynamic scales

[bnjmnrsh]

Rather than generating statically defined colors tied to Tachyons named values, we would be better to define colour suites and type and spacing scales in maps. The current arrangement is a carryover from Tachyons-sass.

Desirables:
-- any 'module' should be replaceable and over-rideable.
-- new definitions should be picked up by the build system with minimal user intervention.
-- sass definition lists should be translated into CSS custom properties as well, and these used in the rules instead of sass vars.
-- property generators and breakpoint generators should be composeable.

Color scales especially could create significant bloat if all hovers links etc were generated for each gradient step, so we should explore how we can offer some granularity.

See also: sass color.scale()
https://medium.com/teutonic-css/css-vars-or-sass-vars-use-both-b84cf70e2c66

Prior art:
Sarah Dayan:
https://gist.github.com/sarahdayan/4d2cc04a636e8039f10a889a0e29fbd9

@mixin modifiers($map, $attribute, $prefix: '-', $separator: '-', $base: 'base') {
  @each $key, $value in $map {
    &#{if($key != $base, #{$prefix}#{$key}, '')} {
      @if type-of($value) == 'map' {
        @include modifiers($value, $attribute, $separator);
      }
      @else {
        #{$attribute}: $value;
      }
    }
  }
}

Our current breakpoint generator:

$bkpt-suffix: "";
@mixin generate-breakpoints {
 @each $breakpoint, $media in $breakpoints {
   @if $breakpoint == "" {
     $bkpt-suffix: $breakpoint !global;
     @content;
   } @else {
     @media #{$media} {
       $bkpt-suffix: "-" + $breakpoint !global;
       @content;
     }
   }
 }
}

Example of a CSS custom property generator:

/**
 * Use this mixin to declare a set of CSS Custom Properties.
 * The variables in $css_variables will be properly prefixed.
 * The use of this mixin is encoraged to keep a good scalability.
 *
 * Usage:
 *
 * @include cssvars((
 *  base-font-size: 65.5%,
 *  font-family: #{"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif},
 *
 *  primary-color: #33b5e5,
 *  secondary-color: #ff500a,
 * ));
 *
 * Will result in
 *
 * root {
 *    --prefix-var-name: value;
 *    --prefix-var-name: value;
 *    --prefix-var-name: value;
 * }
 *
 */
@mixin cssvars($css_property, $prefix: haru) {
    :root {
        @each $name, $value in $css_property {
            --#{$prefix}-#{$name}: #{$value};
        }
    }
}

[bnjmnrsh]

Much of this was addressed with 1d04442

However, more research is needed regarding color.scales().