Merge pull request #14 from oddbird/config-scale

[config-scale] add sizes to design tokens config

source/assets/sass/_breakpoints.scss

@@ -1,74 +1,70 @@
-@use 'functions';
+@use 'config';
 
-$sl-breakpoint--small: 480px !default;
-$sl-breakpoint--medium: 640px !default;
-$sl-breakpoint--large: 960px !default;
-$sl-breakpoint--x-large: 1280px !default;
 $sl-breakpoints: (
   // for mixins to span across breakpoints and without one
   none: 0,
-  small: $sl-breakpoint--small,
-  medium: $sl-breakpoint--medium,
-  large: $sl-breakpoint--large,
-  x-large: $sl-breakpoint--x-large
+  small: config.$breakpoint--small,
+  medium: config.$breakpoint--medium,
+  large: config.$breakpoint--large,
+  x-large: config.$breakpoint--x-large
 );
 
 @mixin sl-breakpoint($breakpoint) {
-  @media only screen and (min-width: #{functions.sl-px-to-em($breakpoint)}) {
+  @media only screen and (min-width: $breakpoint) {
     @content;
   }
 }
 
 @mixin sl-breakpoint-max($breakpoint) {
-  @media only screen and (max-width: #{functions.sl-px-to-em($breakpoint)}) {
+  @media only screen and (max-width: $breakpoint) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--small {
-  @include sl-breakpoint($sl-breakpoint--small) {
+  @include sl-breakpoint(config.$breakpoint--small) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--small-max {
-  @include sl-breakpoint-max($sl-breakpoint--small) {
+  @include sl-breakpoint-max(config.$breakpoint--small) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--medium {
-  @include sl-breakpoint($sl-breakpoint--medium) {
+  @include sl-breakpoint(config.$breakpoint--medium) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--medium-max {
-  @include sl-breakpoint-max($sl-breakpoint--medium) {
+  @include sl-breakpoint-max(config.$breakpoint--medium) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--large {
-  @include sl-breakpoint($sl-breakpoint--large) {
+  @include sl-breakpoint(config.$breakpoint--large) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--large-max {
-  @include sl-breakpoint-max($sl-breakpoint--large) {
+  @include sl-breakpoint-max(config.$breakpoint--large) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--x-large {
-  @include sl-breakpoint($sl-breakpoint--x-large) {
+  @include sl-breakpoint(config.$breakpoint--x-large) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--x-large-max {
-  @include sl-breakpoint-max($sl-breakpoint--x-large) {
+  @include sl-breakpoint-max(config.$breakpoint--x-large) {
     @content;
   }
 }

source/assets/sass/components/_alerts.scss

@@ -9,11 +9,11 @@
     color.adjust(theme.$sl-color--hopbush, $lightness: -10%)
   );
   color: theme.$sl-color--white;
-  font-size: typography.$sl-font-size--small;
+  font-size: var(--sl-font-size--small);
 
   padding: {
-    top: var(--alert-padding-block, var(--gutter-minus));
-    bottom: var(--alert-padding-block, var(--gutter-minus));
+    top: var(--alert-padding-block, var(--sl-gutter--minus));
+    bottom: var(--alert-padding-block, var(--sl-gutter--minus));
   }
 
   text-align: var(--alert-align, center);
@@ -60,7 +60,7 @@
 .sl-c-alert--special {
   --alert-align: left;
   --alert-bg: black;
-  --alert-padding-block: var(--gutter-triple);
+  --alert-padding-block: var(--sl-gutter--triple);
 }
 
 .sl-c-alert-title {

source/assets/sass/components/_attribution.scss

@@ -2,11 +2,11 @@
 
 .sl-c-attribution {
   font-weight: typography.$sl-font-weight--light;
-  font-size: typography.$sl-font-size--small;
+  font-size: var(--sl-font-size--small);
 
   &:first-child {
     text-align: center;
-    margin-top: -3em;
-    margin-bottom: 2em;
+    margin-top: var(--sl-gutter--triple-negative);
+    margin-bottom: var(--sl-gutter--double);
   }
 }

source/assets/sass/components/_buttons.scss

@@ -7,11 +7,9 @@
   align-items: center;
   justify-content: center;
   margin: 0;
-  border: 0 {
-    /* stylelint-disable-next-line property-no-unknown */
-    radius: functions.sl-px-to-rem(4px);
-  }
-  padding: var(--gutter-minus) var(--gutter);
+  border: 0;
+  border-radius: var(--sl-border-radius--large);
+  padding: var(--sl-gutter--minus) var(--sl-gutter);
   background: theme.$sl-color--iron;
   box-shadow: 0 2px 1px rgba(theme.$sl-color--midnight-blue, 0.125);
   color: color.adjust(theme.$sl-color--hopbush, $lightness: -10%);

source/assets/sass/components/_callouts.scss

@@ -3,37 +3,39 @@
 @use '../visual-design/theme';
 
 .sl-c-callout {
-  margin: var(--gutter-sesqui) 0;
-  padding: var(--gutter-sesqui) var(--gutter);
+  margin: var(--sl-gutter--sesqui) 0;
+  padding: var(--sl-gutter--sesqui) var(--sl-gutter);
   background: color.adjust(theme.$sl-color--pale-sky, $lightness: 60%);
-  border-radius: 2px;
+  border-radius: var(--sl-border-radius--small);
 
   &--warning {
     background: color.adjust(theme.$sl-color--hopbush, $lightness: 38%);
-    border: 1px solid color.adjust(theme.$sl-color--hopbush, $lightness: 27%);
+    border: var(--sl-border--small) solid
+      color.adjust(theme.$sl-color--hopbush, $lightness: 27%);
   }
 
   &--fun-fact {
     background: color.adjust(theme.$sl-color--patina, $lightness: 47%);
-    border: 1px solid color.adjust(theme.$sl-color--patina, $lightness: 32%);
+    border: var(--sl-border--small) solid
+      color.adjust(theme.$sl-color--patina, $lightness: 32%);
   }
 
   &--function {
-    padding-bottom: var(--gutter-quarter);
+    padding-bottom: var(--sl-gutter--quarter);
     padding-top: 0;
 
     .signature {
       // Make sure permalinks are visible.
       overflow: visible;
-      margin-left: var(--gutter-negative);
-      margin-right: var(--gutter-negative);
+      margin-left: var(--sl-gutter--negative);
+      margin-right: var(--sl-gutter--negative);
     }
   }
 
   &--impl-status {
-    font-size: 0.8em;
-    margin-top: var(--gutter-negative);
-    padding: 0.8rem;
+    font-size: var(--sl-status-text-size);
+    margin-top: var(--sl-gutter--negative);
+    padding: var(--sl-gutter--minus);
 
     .sl-c-callout & {
       background: color.adjust(theme.$sl-color--pale-sky, $lightness: 53%);
@@ -51,10 +53,10 @@
 
 @include breakpoints.sl-breakpoint--medium {
   .sl-l-container--overview {
-    font-size: 1.25rem;
+    font-size: var(--sl-font-size--large);
 
     .sl-c-callout {
-      font-size: 1rem;
+      font-size: var(--sl-font-size--small);
     }
   }
 }

source/assets/sass/components/_inputs.scss

@@ -3,13 +3,13 @@
 
 input {
   display: block;
-  margin: 0 var(--gutter);
-  border: 1px solid theme.$sl-color--iron;
-  padding: var(--gutter-quarter) var(--gutter);
+  margin: 0 var(--sl-gutter);
+  border: var(--sl-border--small) solid theme.$sl-color--iron;
+  padding: var(--sl-gutter--quarter) var(--sl-gutter);
   width: 100%;
 
   @include breakpoints.sl-breakpoint--large {
-    top: var(--gutter-half);
+    top: var(--sl-gutter--half);
     margin: 0;
   }
 }

source/assets/sass/components/_introduction.scss

@@ -7,7 +7,7 @@
   font-weight: typography.$sl-font-weight--light;
 
   @include breakpoints.sl-breakpoint--medium {
-    font-size: typography.$sl-font-size--xx-large;
+    font-size: var(--sl-font-size--xx-large);
   }
 
   &--center {

source/assets/sass/components/_link-header.scss

@@ -12,18 +12,15 @@ h6,
     float: left;
     vertical-align: middle;
     margin-top: -3px;
-    width: var(--gutter-sesqui);
+    width: var(--sl-gutter--sesqui);
     background: none;
     border: 0;
 
     &::after {
-      visibility: hidden;
-      font: {
-        size: 1rem;
-        weight: normal;
-      }
-
       content: '\1F517';
+      font-size: var(--sl-font-size--small);
+      font-weight: normal;
+      visibility: hidden;
     }
   }
 
@@ -39,7 +36,7 @@ h4,
 h5,
 h6 {
   a.anchor {
-    margin-left: var(--gutter-sesqui-negative);
+    margin-left: var(--sl-gutter--sesqui-negative);
   }
 
   &:target {
@@ -60,7 +57,7 @@ h6 {
 
 .signature {
   a.anchor {
-    margin-left: -2.5rem;
+    margin-left: var(--sl-gutter--double-sesqui-negative);
   }
 
   .sl-c-callout--function:target & {