clean the output from setup-typo a bit

lunelson · Aug 9, 2019 · cd924a6 · cd924a6
1 parent 29ad051
commit cd924a6
Show file tree

Hide file tree

Showing 19 changed files with 1,233 additions and 1,160 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "test:visual": "penny serve tests/_visual"
   },
   "devDependencies": {
-    "@lunelson/penny": "next",
+    "@lunelson/penny": "^2.0.0-alpha.14",
     "@lunelson/sass-calc": "latest",
     "@lunelson/sass-lerp": "latest",
     "@lunelson/sass-maps-next": "latest",

diff --git a/scss/_setup-root.scss b/scss/_setup-root.scss
@@ -15,7 +15,7 @@
       @include --output-medium-props();
     }
   }
-  html {
-    font-size: var(--font-size);
-  }
+  // html {
+  //   font-size: var(--font-size);
+  // }
 }
diff --git a/scss/_setup-theme.scss b/scss/_setup-theme.scss
@@ -40,8 +40,8 @@ $colors: () !default;
   }
 
   body {
-    background-color: rgb(var(--color-#{$type}));
-    color: rgb(var(--contrast-#{$type}));
+    color: rgb(var(--fg-default));
+    background-color: rgb(var(--bg-default));
   }
 
   #{stateful-base-class('fg', false)} {

diff --git a/scss/_setup-typo.scss b/scss/_setup-typo.scss
@@ -13,7 +13,12 @@
 
 @mixin homework-setup-typo( $trim: true, $trim-excl: div table figure img svg video iframe object section aside header footer article ) {
 
-  body { font-family: var(--font-family); }
+  html {
+    // NB: --font-size variable is set in setup-root(), it is responsive by $medium
+    font-size: var(--font-size);
+    font-family: var(--font-family);
+    line-height: var(--line-height);
+  }
 
   // normalize $fonts
   $fonts: if(length($fonts) > 0, $fonts, $fonts-defaults) !global;
@@ -28,9 +33,9 @@
       // make first font in $fonts the default
       @if $f == nth(map-keys($fonts), 1) {
         --font-family: var(--font-family-#{$f});
-        --font-feature-settings: var(--font-feature-settings-#{$f});
         --line-height: var(--line-height-#{$f});
         --letter-spacing: var(--letter-spacing-#{$f});
+        --font-feature-settings: var(--font-feature-settings-#{$f});
       }
 
       $ff: map-get($font, 'font-family');
@@ -40,9 +45,9 @@
 
       // output variant properties
       --font-family-#{$f}: #{$ff};
-      --font-feature-settings-#{$f}: #{inspect($ffs)};
       --line-height-#{$f}: #{decalc($lh)};
       --letter-spacing-#{$f}: #{decalc($ls)};
+      --font-feature-settings-#{$f}: #{inspect($ffs)};
 
       @if $trim {
         $oc: map-get($font, 'dist-capline');
@@ -80,12 +85,10 @@
   #{base-class('f', false)},
   #{selector-combine(base-class('plain'), '*', '>')} {
     font-size: var(--font-size); // TODO allow a lerp calc() expression here too
-
     font-family: var(--font-family);
+    line-height: calc(var(--line-height)); // raw calc values
+    letter-spacing: calc(var(--letter-spacing)); // raw calc values
     font-feature-settings: var(--font-feature-settings);
-    // NB using calc(var()) below because these are raw calc values
-    line-height: calc(var(--line-height));
-    letter-spacing: calc(var(--letter-spacing));
   }
 
   @if $trim {
@@ -116,7 +119,6 @@
 
     #{base-class('f-#{$f}')} {
       --font-family: var(--font-family-#{$f});
-      --line-height: var(--line-height-#{$f});
       --letter-spacing: var(--letter-spacing-#{$f});
       --font-feature-settings: var(--font-feature-settings-#{$f});
 

diff --git a/tests/_visual/app.scss b/tests/_visual/app.scss
@@ -11,17 +11,17 @@
 */
 
 
-@import 'fonts/messina-sans';
-@import 'fonts/messina-serif';
-@import 'fonts/messina-modern';
-
-@import 'fonts/hack';
-@import 'fonts/google';
-@import 'fonts/neutral';
-@import 'fonts/gt-america';
-@import 'fonts/maison-neue';
+// @import 'fonts/messina-sans';
+// @import 'fonts/messina-serif';
+// @import 'fonts/messina-modern';
+
+// @import 'fonts/hack';
+// @import 'fonts/google';
+// @import 'fonts/neutral';
+// @import 'fonts/gt-america';
+// @import 'fonts/maison-neue';
 @import 'fonts/theinhardt';
-@import 'fonts/untitled-sans';
+// @import 'fonts/untitled-sans';
 
 @import 'prism';
 
@@ -80,13 +80,20 @@ $media: (
 
 $fonts: (
   // sans: $theinhardt,
-  sans: $neutral,
-  mono: $hack,
+  sans: (
+    family: ('Arial'),
+    dist-capline: 0.1,
+    dist-baseline: 0.1,
+    spacing: 1px,
+    spacing-max: 0.75,
+    spacing-end: 100
+  ),
+  // mono: $hack,
   // sans: $messina-sans,
   // sans: $source-sans-pro,
-  serif: $messina-serif,
+  // serif: $messina-serif,
   // serif: $source-serif-pro,
-  modern: $messina-modern,
+  // modern: $messina-modern,
   // mono: $source-code-pro
 );
 

diff --git a/tests/_visual/fonts/_neutral.scss b/tests/_visual/fonts/_neutral.scss
@@ -43,7 +43,7 @@
 
 $neutral: (
   font-family: "Neutral",
+  letter-spacing: calc(0.5px - 0.025em),
   dist-capline: 0.1,
   dist-baseline: 0.1,
-  letter-spacing: calc(0.5px - 0.025em),
 );
diff --git a/tests/renders/output-core-root.dartsass.css b/tests/renders/output-core-root.dartsass.css
@@ -87,8 +87,4 @@
   }
 }
 
-html {
-  font-size: var(--font-size);
-}
-
 /* ( a: ( font-size: 16px, inner-x: 1rem, inner-y: 1.5rem, outer-top: 2rem, outer-right: calc(31.25vw + -6.25rem), outer-bottom: 2rem, outer-left: calc(31.25vw + -6.25rem), column-count: 12, font-mods: ( sans: ( m: 18px 1.3, l: 24px 1.2 ), serif: ( m: 18px 1.3, l: 24px 1.2 ) ), inner-mods: ( s: 0.5, m: 1, l: 2 ), inner-y-mods: ( s: 0.5, m: 3.5rem, l: 2 ), outer-width: 30rem, breakpoint: 30em ), b: ( font-size: 16px, inner-x: 1rem, inner-y: 1.5rem, outer-top: 2rem, outer-right: calc(31.25vw + -6.25rem), outer-bottom: 2rem, outer-left: calc(31.25vw + -6.25rem), column-count: 12, font-mods: ( sans: ( m: 18px 1.3, l: 24px 1.2 ), serif: ( m: 18px 1.3, l: 30px 1.1 ) ), inner-mods: ( s: 0.5, m: 1, l: 2 ), inner-y-mods: ( s: 0.5, m: 3.5rem, l: 2 ), outer-width: 40rem, breakpoint: 40em ), c: ( font-size: 18px, inner-x: 1rem, inner-y: 1.5rem, outer-top: 2rem, outer-right: 200px, outer-bottom: 2rem, outer-left: 200px, column-count: 12, font-mods: ( sans: ( m: 18px 1.3, l: 24px 1.2 ), serif: ( m: 18px 1.3, l: 30px 1.1 ) ), inner-mods: ( s: 0.5, m: 1, l: 2 ), inner-y-mods: ( s: 0.5, m: 3.5rem, l: 2 ), outer-width: 53.3333333333rem, breakpoint: 60em ) ) */
diff --git a/tests/renders/output-core-root.libsass.css b/tests/renders/output-core-root.libsass.css
@@ -111,10 +111,6 @@
   }
 }
 
-html {
-  font-size: var(--font-size);
-}
-
 /* (
   a: (
     font-size: 16px,

diff --git a/tests/renders/output-theme.dartsass.css b/tests/renders/output-theme.dartsass.css
@@ -46,8 +46,8 @@
 }
 
 body {
-  background-color: rgb(var(--color-lite));
-  color: rgb(var(--contrast-lite));
+  color: rgb(var(--fg-default));
+  background-color: rgb(var(--bg-default));
 }
 
 [class^=fg-]:not([class$=fg-]), [class*=" fg-"]:not([class$=fg-]), [class*=__fg-]:not([class*=" __fg-"]):not([class*="__fg- "]):not([class$=__fg-]):not([class^=__fg-]) {

diff --git a/tests/renders/output-theme.libsass.css b/tests/renders/output-theme.libsass.css
@@ -46,8 +46,8 @@
 }
 
 body {
-  background-color: rgb(var(--color-lite));
-  color: rgb(var(--contrast-lite));
+  color: rgb(var(--fg-default));
+  background-color: rgb(var(--bg-default));
 }
 
 [class^="fg-"]:not([class$="fg-"]), [class*=" fg-"]:not([class$="fg-"]), [class*="__fg-"]:not([class*=" __fg-"]):not([class*="__fg- "]):not([class$="__fg-"]):not([class^="__fg-"]) {

diff --git a/tests/renders/output-typo.dartsass.css b/tests/renders/output-typo.dartsass.css
@@ -1,32 +1,34 @@
-body {
+html {
+  font-size: var(--font-size);
   font-family: var(--font-family);
+  line-height: var(--line-height);
 }
 
 :root {
   --font-family: var(--font-family-sans);
-  --font-feature-settings: var(--font-feature-settings-sans);
   --line-height: var(--line-height-sans);
   --letter-spacing: var(--letter-spacing-sans);
+  --font-feature-settings: var(--font-feature-settings-sans);
   --font-family-sans: MessinaSans;
-  --font-feature-settings-sans: ();
   --line-height-sans: 1.4em;
   --letter-spacing-sans: 0px;
+  --font-feature-settings-sans: ();
   --dist-capline-sans: 0em;
   --dist-baseline-sans: 0em;
   --trim-sides-sans: 0;
   --trim-adjacent-sans: 0.125em;
   --font-family-serif: MessinaSerif;
-  --font-feature-settings-serif: ();
   --line-height-serif: 1.4em;
   --letter-spacing-serif: 0px;
+  --font-feature-settings-serif: ();
   --dist-capline-serif: 0em;
   --dist-baseline-serif: 0em;
   --trim-sides-serif: 0;
   --trim-adjacent-serif: 0.125em;
   --font-family-modern: MessinaModern;
-  --font-feature-settings-modern: ();
   --line-height-modern: 1.4em;
   --letter-spacing-modern: 0px;
+  --font-feature-settings-modern: ();
   --dist-capline-modern: 0em;
   --dist-baseline-modern: 0em;
   --trim-sides-modern: 0;
@@ -81,9 +83,9 @@ body {
 .plain > *, [class^=plain-]:not([class$=plain-]) > *, [class*=" plain-"]:not([class$=plain-]) > * {
   font-size: var(--font-size);
   font-family: var(--font-family);
-  font-feature-settings: var(--font-feature-settings);
   line-height: calc(var(--line-height));
   letter-spacing: calc(var(--letter-spacing));
+  font-feature-settings: var(--font-feature-settings);
 }
 
 .trim > [class^=f-]:not([class$=f-]), .trim > [class*=" f-"]:not([class$=f-]),
@@ -109,7 +111,6 @@ body {
 
 .f-sans, [class^=f-sans-]:not([class$=f-sans-]), [class*=" f-sans-"]:not([class$=f-sans-]) {
   --font-family: var(--font-family-sans);
-  --line-height: var(--line-height-sans);
   --letter-spacing: var(--letter-spacing-sans);
   --font-feature-settings: var(--font-feature-settings-sans);
   --dist-capline: 0em;
@@ -120,7 +121,6 @@ body {
 
 .f-serif, [class^=f-serif-]:not([class$=f-serif-]), [class*=" f-serif-"]:not([class$=f-serif-]) {
   --font-family: var(--font-family-serif);
-  --line-height: var(--line-height-serif);
   --letter-spacing: var(--letter-spacing-serif);
   --font-feature-settings: var(--font-feature-settings-serif);
   --dist-capline: 0em;
@@ -131,7 +131,6 @@ body {
 
 .f-modern, [class^=f-modern-]:not([class$=f-modern-]), [class*=" f-modern-"]:not([class$=f-modern-]) {
   --font-family: var(--font-family-modern);
-  --line-height: var(--line-height-modern);
   --letter-spacing: var(--letter-spacing-modern);
   --font-feature-settings: var(--font-feature-settings-modern);
   --dist-capline: 0em;

diff --git a/tests/renders/output-typo.libsass.css b/tests/renders/output-typo.libsass.css
@@ -1,32 +1,34 @@
-body {
+html {
+  font-size: var(--font-size);
   font-family: var(--font-family);
+  line-height: var(--line-height);
 }
 
 :root {
   --font-family: var(--font-family-sans);
-  --font-feature-settings: var(--font-feature-settings-sans);
   --line-height: var(--line-height-sans);
   --letter-spacing: var(--letter-spacing-sans);
+  --font-feature-settings: var(--font-feature-settings-sans);
   --font-family-sans: MessinaSans;
-  --font-feature-settings-sans: ();
   --line-height-sans: 1.4em;
   --letter-spacing-sans: 0px;
+  --font-feature-settings-sans: ();
   --dist-capline-sans: 0em;
   --dist-baseline-sans: 0em;
   --trim-sides-sans: 0;
   --trim-adjacent-sans: 0.125em;
   --font-family-serif: MessinaSerif;
-  --font-feature-settings-serif: ();
   --line-height-serif: 1.4em;
   --letter-spacing-serif: 0px;
+  --font-feature-settings-serif: ();
   --dist-capline-serif: 0em;
   --dist-baseline-serif: 0em;
   --trim-sides-serif: 0;
   --trim-adjacent-serif: 0.125em;
   --font-family-modern: MessinaModern;
-  --font-feature-settings-modern: ();
   --line-height-modern: 1.4em;
   --letter-spacing-modern: 0px;
+  --font-feature-settings-modern: ();
   --dist-capline-modern: 0em;
   --dist-baseline-modern: 0em;
   --trim-sides-modern: 0;
@@ -83,9 +85,9 @@ body {
 .plain > *, [class^="plain-"]:not([class$="plain-"]) > *, [class*=" plain-"]:not([class$="plain-"]) > * {
   font-size: var(--font-size);
   font-family: var(--font-family);
-  font-feature-settings: var(--font-feature-settings);
   line-height: calc(var(--line-height));
   letter-spacing: calc(var(--letter-spacing));
+  font-feature-settings: var(--font-feature-settings);
 }
 
 .trim > [class^="f-"]:not([class$="f-"]), .trim > [class*=" f-"]:not([class$="f-"]),
@@ -111,7 +113,6 @@ body {
 
 .f-sans, [class^="f-sans-"]:not([class$="f-sans-"]), [class*=" f-sans-"]:not([class$="f-sans-"]) {
   --font-family: var(--font-family-sans);
-  --line-height: var(--line-height-sans);
   --letter-spacing: var(--letter-spacing-sans);
   --font-feature-settings: var(--font-feature-settings-sans);
   --dist-capline: 0em;
@@ -122,7 +123,6 @@ body {
 
 .f-serif, [class^="f-serif-"]:not([class$="f-serif-"]), [class*=" f-serif-"]:not([class$="f-serif-"]) {
   --font-family: var(--font-family-serif);
-  --line-height: var(--line-height-serif);
   --letter-spacing: var(--letter-spacing-serif);
   --font-feature-settings: var(--font-feature-settings-serif);
   --dist-capline: 0em;
@@ -133,7 +133,6 @@ body {
 
 .f-modern, [class^="f-modern-"]:not([class$="f-modern-"]), [class*=" f-modern-"]:not([class$="f-modern-"]) {
   --font-family: var(--font-family-modern);
-  --line-height: var(--line-height-modern);
   --letter-spacing: var(--letter-spacing-modern);
   --font-feature-settings: var(--font-feature-settings-modern);
   --dist-capline: 0em;

diff --git a/tests/snapshots/output-core-root.scss.md b/tests/snapshots/output-core-root.scss.md
@@ -97,10 +97,6 @@ Generated by [AVA](https://ava.li).
       }␊
     }␊
     ␊
-    html {␊
-      font-size: var(--font-size);␊
-    }␊
-    ␊
     `
 
 ## output-core-root[libsass]
@@ -200,9 +196,5 @@ Generated by [AVA](https://ava.li).
       }␊
     }␊
     ␊
-    html {␊
-      font-size: var(--font-size);␊
-    }␊
-    ␊
     ␊
     `
diff --git a/tests/snapshots/output-core-root.scss.snap b/tests/snapshots/output-core-root.scss.snap
diff --git a/tests/snapshots/output-theme.scss.md b/tests/snapshots/output-theme.scss.md
@@ -56,8 +56,8 @@ Generated by [AVA](https://ava.li).
     }␊
     ␊
     body {␊
-      background-color: rgb(var(--color-lite));␊
-      color: rgb(var(--contrast-lite));␊
+      color: rgb(var(--fg-default));␊
+      background-color: rgb(var(--bg-default));␊
     }␊
     ␊
     [class^=fg-]:not([class$=fg-]), [class*=" fg-"]:not([class$=fg-]), [class*=__fg-]:not([class*=" __fg-"]):not([class*="__fg- "]):not([class$=__fg-]):not([class^=__fg-]) {␊
@@ -5753,8 +5753,8 @@ Generated by [AVA](https://ava.li).
     }␊
     ␊
     body {␊
-      background-color: rgb(var(--color-lite));␊
-      color: rgb(var(--contrast-lite));␊
+      color: rgb(var(--fg-default));␊
+      background-color: rgb(var(--bg-default));␊
     }␊
     ␊
     [class^="fg-"]:not([class$="fg-"]), [class*=" fg-"]:not([class$="fg-"]), [class*="__fg-"]:not([class*=" __fg-"]):not([class*="__fg- "]):not([class$="__fg-"]):not([class^="__fg-"]) {␊

diff --git a/tests/snapshots/output-theme.scss.snap b/tests/snapshots/output-theme.scss.snap
-Original file line number
+Diff line change
@@ Expand Up / @@ -87,8 +87,4 @@ @@
       }
     }
-    html {
-      font-size: var(--font-size);
-    }
     /* ( a: ( font-size: 16px, inner-x: 1rem, inner-y: 1.5rem, outer-top: 2rem, outer-right: calc(31.25vw + -6.25rem), outer-bottom: 2rem, outer-left: calc(31.25vw + -6.25rem), column-count: 12, font-mods: ( sans: ( m: 18px 1.3, l: 24px 1.2 ), serif: ( m: 18px 1.3, l: 24px 1.2 ) ), inner-mods: ( s: 0.5, m: 1, l: 2 ), inner-y-mods: ( s: 0.5, m: 3.5rem, l: 2 ), outer-width: 30rem, breakpoint: 30em ), b: ( font-size: 16px, inner-x: 1rem, inner-y: 1.5rem, outer-top: 2rem, outer-right: calc(31.25vw + -6.25rem), outer-bottom: 2rem, outer-left: calc(31.25vw + -6.25rem), column-count: 12, font-mods: ( sans: ( m: 18px 1.3, l: 24px 1.2 ), serif: ( m: 18px 1.3, l: 30px 1.1 ) ), inner-mods: ( s: 0.5, m: 1, l: 2 ), inner-y-mods: ( s: 0.5, m: 3.5rem, l: 2 ), outer-width: 40rem, breakpoint: 40em ), c: ( font-size: 18px, inner-x: 1rem, inner-y: 1.5rem, outer-top: 2rem, outer-right: 200px, outer-bottom: 2rem, outer-left: 200px, column-count: 12, font-mods: ( sans: ( m: 18px 1.3, l: 24px 1.2 ), serif: ( m: 18px 1.3, l: 30px 1.1 ) ), inner-mods: ( s: 0.5, m: 1, l: 2 ), inner-y-mods: ( s: 0.5, m: 3.5rem, l: 2 ), outer-width: 53.3333333333rem, breakpoint: 60em ) ) */