first commit

ui/src/design/_colors.scss

@@ -0,0 +1,16 @@
+// CONTENT
+$color-body-bg: #f9f7f5;
+$color-text: #444;
+$color-heading-text: #35495e;
+
+// LINKS
+$color-link-text: #39a275;
+$color-link-text-active: $color-text;
+
+// INPUTS
+$color-input-border: lighten($color-heading-text, 50%);
+
+// BUTTONS
+$color-button-bg: $color-link-text;
+$color-button-disabled-bg: darken(desaturate($color-button-bg, 20%), 10%);
+$color-button-text: white;

ui/src/design/_durations.scss

@@ -0,0 +1 @@
+$duration-animation-base: 300ms;

ui/src/design/_fonts.scss

@@ -0,0 +1,21 @@
+$system-default-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI',
+  'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+  'Segoe UI Symbol';
+
+$heading-font-family: $system-default-font-family;
+$heading-font-weight: 600;
+
+$content-font-family: $system-default-font-family;
+$content-font-weight: 400;
+
+%font-heading {
+  font-family: $heading-font-family;
+  font-weight: $heading-font-weight;
+  color: $color-heading-text;
+}
+
+%font-content {
+  font-family: $content-font-family;
+  font-weight: $content-font-weight;
+  color: $color-text;
+}

ui/src/design/_layers.scss

@@ -0,0 +1,6 @@
+$layer-negative-z-index: -1;
+$layer-page-z-index: 1;
+$layer-dropdown-z-index: 2;
+$layer-modal-z-index: 3;
+$layer-popover-z-index: 4;
+$layer-tooltip-z-index: 5;

ui/src/design/_sizes.scss

@@ -0,0 +1,19 @@
+// GRID
+$size-grid-padding: 1.3rem;
+
+// CONTENT
+$size-content-width-max: 50rem;
+$size-content-width-min: 25rem;
+
+// INPUTS
+$size-input-padding-vertical: 0.75em;
+$size-input-padding-horizontal: 1em;
+$size-input-padding: $size-input-padding-vertical $size-input-padding-horizontal;
+$size-input-border: 1px;
+$size-input-border-radius: (1em + $size-input-padding-vertical * 2) / 10;
+
+// BUTTONS
+$size-button-padding-vertical: $size-grid-padding / 2;
+$size-button-padding-horizontal: $size-grid-padding / 1.5;
+$size-button-padding: $size-button-padding-vertical
+  $size-button-padding-horizontal;

ui/src/design/_typography.scss

@@ -0,0 +1,416 @@
+// Interpolate v1.0
+
+// This mixin generates CSS for interpolation of length properties.
+// It has 5 required values, including the target property, initial
+// screen size, initial value, final screen size and final value.
+
+// It has two optional values which include an easing property,
+// which is a string, representing a CSS animation-timing-function
+// and finally a number of bending-points, that determines how many
+// interpolations steps are applied along the easing function.
+
+// Author: Mike Riethmuller - @MikeRiethmuller
+// More information: http://codepen.io/MadeByMike/pen/a2249946658b139b7625b2a58cf03a65?editors=0100
+
+///
+/// @param {String} $property - The CSS property to interpolate
+/// @param {Unit} $min-screen - A CSS length unit
+/// @param {Unit} $min-value - A CSS length unit
+/// @param {Unit} $max-screen - Value to be parsed
+/// @param {Unit} $max-value - Value to be parsed
+/// @param {String} $easing - Value to be parsed
+/// @param {Integer} $bending-points - Value to be parsed
+///
+
+// Examples on line 258
+
+// Issues:
+
+// - kubic-bezier requires whitespace
+// - kubic-bezier cannot parse negative values
+
+// stylelint-disable scss/dollar-variable-pattern
+@mixin typography-interpolate(
+  $property,
+  $min-screen,
+  $min-value,
+  $max-screen,
+  $max-value,
+  $easing: 'linear',
+  $bending-points: 2
+) {
+  // Default Easing 'Linear'
+  $p0: 0;
+  $p1: 0;
+  $p2: 1;
+  $p3: 1;
+
+  // Parse Cubic Bezier string
+  @if (str-slice($easing, 1, 12) == 'kubic-bezier') {
+    // Get the values between the brackets
+    // TODO: Deal with different whitespace
+    $i: str-index($easing, ')'); // Get index of closing bracket
+    $values: str-slice($easing, 14, $i - 1); // Extract values between brackts
+    $list: typography-explode($values, ', '); // Split the values into a list
+
+    @debug ($list);
+
+    // Cast values to numebrs
+    $p0: typography-number(nth($list, 1));
+    $p1: typography-number(nth($list, 2));
+    $p2: typography-number(nth($list, 3));
+    $p3: typography-number(nth($list, 4));
+  }
+
+  @if ($easing == 'ease') {
+    $p0: 0.25;
+    $p1: 1;
+    $p2: 0.25;
+    $p3: 1;
+  }
+
+  @if ($easing == 'ease-in-out') {
+    $p0: 0.42;
+    $p1: 0;
+    $p2: 0.58;
+    $p3: 1;
+  }
+
+  @if ($easing == 'ease-in') {
+    $p0: 0.42;
+    $p1: 0;
+    $p2: 1;
+    $p3: 1;
+  }
+
+  @if ($easing == 'ease-out') {
+    $p0: 0;
+    $p1: 0;
+    $p2: 0.58;
+    $p3: 1;
+  }
+
+  #{$property}: $min-value;
+
+  @if ($easing == 'linear' or $bending-points < 1) {
+    @media screen and (min-width: $min-screen) {
+      #{$property}: typography-calc-interpolation(
+        $min-screen,
+        $min-value,
+        $max-screen,
+        $max-value
+      );
+    }
+  } @else {
+    // Loop through bending points
+    $t: 1 / ($bending-points + 1);
+    $i: 1;
+    $prev-screen: $min-screen;
+    $prev-value: $min-value;
+
+    @while $t * $i <= 1 {
+      $bending-point: $t * $i;
+      $value: typography-cubic-bezier($p0, $p1, $p2, $p3, $bending-point);
+      $screen-int: typography-lerp($min-screen, $max-screen, $bending-point);
+      $value-int: typography-lerp($min-value, $max-value, $value);
+
+      @media screen and (min-width: $prev-screen) {
+        #{$property}: typography-calc-interpolation(
+          $prev-screen,
+          $prev-value,
+          $screen-int,
+          $value-int
+        );
+      }
+
+      $prev-screen: $screen-int;
+      $prev-value: $value-int;
+      $i: $i + 1;
+    }
+  }
+
+  @media screen and (min-width: $max-screen) {
+    #{$property}: $max-value;
+  }
+}
+
+// Requires several helper functions including: pow, calc-interpolation, kubic-bezier, number and explode
+
+// Math functions:
+
+// Linear interpolations in CSS as a Sass function
+// Author: Mike Riethmuller | https://madebymike.com.au/writing/precise-control-responsive-typography/ I
+
+@function typography-calc-interpolation(
+  $min-screen,
+  $min-value,
+  $max-screen,
+  $max-value
+) {
+  $a: ($max-value - $min-value) / ($max-screen - $min-screen);
+  $b: $min-value - $a * $min-screen;
+
+  $sign: '+';
+
+  @if ($b < 0) {
+    $sign: '-';
+    $b: abs($b);
+  }
+
+  @return calc(#{$a * 100}vw #{$sign} #{$b});
+}
+
+// This is a crude Sass port webkits cubic-bezier function. Looking to simplify this if you can help.
+@function typography-solve-bexier-x($p1x, $p1y, $p2x, $p2y, $x) {
+  $cx: 3 * $p1x;
+  $bx: 3 * ($p2x - $p1x) - $cx;
+  $ax: 1 - $cx - $bx;
+
+  $t0: 0;
+  $t1: 1;
+  $t2: $x;
+  $x2: 0;
+  $res: 1000;
+
+  @while ($t0 < $t1 or $break) {
+    $x2: (($ax * $t2 + $bx) * $t2 + $cx) * $t2;
+
+    @if (abs($x2 - $x) < $res) {
+      @return $t2;
+    }
+
+    @if ($x > $x2) {
+      $t0: $t2;
+    } @else {
+      $t1: $t2;
+    }
+    $t2: ($t1 - $t0) * 0.5 + $t0;
+  }
+
+  @return $t2;
+}
+
+@function typography-cubic-bezier($p1x, $p1y, $p2x, $p2y, $x) {
+  $cy: 3 * $p1y;
+  $by: 3 * ($p2y - $p1y) - $cy;
+  $ay: 1 - $cy - $by;
+  $t: typography-solve-bexier-x($p1x, $p1y, $p2x, $p2y, $x);
+
+  @return (($ay * $t + $by) * $t + $cy) * $t;
+}
+
+// A stright up lerp
+// Credit: Ancient Greeks possibly Hipparchus of Rhodes
+@function typography-lerp($a, $b, $t) {
+  @return $a + ($b - $a) * $t;
+}
+
+// String functions:
+
+// Cast string to number
+// Credit: Hugo Giraudel | https://www.sassmeister.com/gist/9fa19d254864f33d4a80
+@function typography-number($value) {
+  @if type-of($value) == 'number' {
+    @return $value;
+  } @else if type-of($value) != 'string' {
+    $_: log('Value for `to-number` should be a number or a string.');
+  }
+
+  $result: 0;
+  $digits: 0;
+  $minus: str-slice($value, 1, 1) == '-';
+  $numbers: (
+    '0': 0,
+    '1': 1,
+    '2': 2,
+    '3': 3,
+    '4': 4,
+    '5': 5,
+    '6': 6,
+    '7': 7,
+    '8': 8,
+    '9': 9,
+  );
+
+  @for $i from if($minus, 2, 1) through str-length($value) {
+    $character: str-slice($value, $i, $i);
+
+    @if not(index(map-keys($numbers), $character) or $character == '.') {
+      @return to-length(if($minus, -$result, $result), str-slice($value, $i));
+    }
+
+    @if $character == '.' {
+      $digits: 1;
+    } @else if $digits == 0 {
+      $result: $result * 10 + map-get($numbers, $character);
+    } @else {
+      $digits: $digits * 10;
+      $result: $result + map-get($numbers, $character) / $digits;
+    }
+  }
+
+  @return if($minus, -$result, $result);
+}
+
+// Explode a string by a delimiter
+// Credit: https://gist.github.com/danielpchen/3677421ea15dcf2579ff
+@function typography-explode($string, $delimiter) {
+  $result: ();
+
+  @if $delimiter == '' {
+    @for $i from 1 through str-length($string) {
+      $result: append($result, str-slice($string, $i, $i));
+    }
+
+    @return $result;
+  }
+  $exploding: true;
+
+  @while $exploding {
+    $d-index: str-index($string, $delimiter);
+
+    @if $d-index {
+      @if $d-index > 1 {
+        $result: append($result, str-slice($string, 1, $d-index - 1));
+        $string: str-slice($string, $d-index + str-length($delimiter));
+      } @else if $d-index == 1 {
+        $string: str-slice($string, 1, $d-index + str-length($delimiter));
+      } @else {
+        $result: append($result, $string);
+        $exploding: false;
+      }
+    } @else {
+      $result: append($result, $string);
+      $exploding: false;
+    }
+  }
+
+  @return $result;
+}
+
+// Using vertical rhythm methods from https://scotch.io/tutorials/aesthetic-sass-3-typography-and-vertical-rhythm
+// Using perfect 8/9 for low contrast and perfect fifth 2/3 for high
+$typography-type-scale: (
+  -1: 0.889rem,
+  0: 1rem,
+  1: 1.125rem,
+  2: 1.266rem,
+  3: 1.424rem
+);
+
+@function typography-type-scale($level) {
+  @if map-has-key($typography-type-scale, $level) {
+    @return map-get($typography-type-scale, $level);
+  }
+
+  @warn 'Unknown `#{$level}` in $typography-type-scale.';
+
+  @return null;
+}
+
+$typography-type-scale-contrast: (
+  -1: 1rem,
+  0: 1.3333rem,
+  1: 1.777rem,
+  2: 2.369rem,
+  3: 3.157rem
+);
+
+@function typography-type-scale-contrast($level) {
+  @if map-has-key($typography-type-scale-contrast, $level) {
+    @return map-get($typography-type-scale-contrast, $level);
+  }
+
+  @warn 'Unknown `#{$level}` in $typography-type-scale-contrast.';
+
+  @return null;
+}
+
+$typography-base-font-size: 1rem;
+$typography-base-line-height: $typography-base-font-size * 1.25;
+
+$typography-line-heights: (
+  -1: $typography-base-line-height,
+  0: $typography-base-line-height,
+  1: $typography-base-line-height * 1.5,
+  2: $typography-base-line-height * 1.5,
+  3: $typography-base-line-height * 1.5
+);
+
+@function typography-line-height($level) {
+  @if map-has-key($typography-line-heights, $level) {
+    @return map-get($typography-line-heights, $level);
+  }
+
+  @warn 'Unknown `#{$level}` in $line-height.';
+
+  @return null;
+}
+
+$typography-base-line-height-contrast: $typography-base-line-height;
+
+$typography-line-heights-contrast: (
+  -1: $typography-base-line-height-contrast,
+  0: $typography-base-line-height-contrast * 2,
+  1: $typography-base-line-height-contrast * 2,
+  2: $typography-base-line-height-contrast * 2,
+  3: $typography-base-line-height * 3
+);
+
+@function typography-line-height-contrast($level) {
+  @if map-has-key($typography-line-heights-contrast, $level) {
+    @return map-get($typography-line-heights-contrast, $level);
+  }
+
+  @warn 'Unknown `#{$level}` in $typography-line-heights-contrast.';
+
+  @return null;
+}
+
+// Mixing these two sets of mixins ala Rachel:
+@mixin typography-got-rhythm($level: 0) {
+  @include typography-interpolate(
+    'font-size',
+    $size-content-width-min,
+    typography-type-scale($level),
+    $size-content-width-max,
+    typography-type-scale-contrast($level)
+  );
+  @include typography-interpolate(
+    'line-height',
+    $size-content-width-min,
+    typography-line-height($level),
+    $size-content-width-max,
+    typography-line-height-contrast($level)
+  );
+}
+
+%typography-xxlarge {
+  @include typography-got-rhythm(3);
+
+  @extend %font-heading;
+}
+
+%typography-xlarge {
+  @include typography-got-rhythm(2);
+
+  @extend %font-heading;
+}
+
+%typography-large {
+  @include typography-got-rhythm(1);
+
+  @extend %font-heading;
+}
+
+%typography-medium {
+  @include typography-got-rhythm(0);
+
+  @extend %font-content;
+}
+
+%typography-small {
+  @include typography-got-rhythm(-1);
+
+  @extend %font-content;
+}

ui/src/design/index.scss

@@ -0,0 +1,22 @@
+@import 'colors';
+@import 'durations';
+@import 'fonts';
+@import 'layers';
+@import 'sizes';
+@import 'typography';
+
+:export {
+  // Any values that need to be accessible from JavaScript
+  // outside of a Vue component can be defined here, prefixed
+  // with `global-` to avoid conflicts with classes. For
+  // example:
+  //
+  // global-grid-padding: $size-grid-padding;
+  //
+  // Then in a JavaScript file, you can import this object
+  // as you would normally with:
+  //
+  // import design from '@design'
+  //
+  // console.log(design['global-grid-padding'])
+}