dynamic scales - Githubissues

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.

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};
        }
    }
}

solus-css / solus-tachyons-sass

dynamic scales #28