Merge pull request #4 from Shopify/small-threads-update

Small update

demo-app/dev/styles/components/_grid.scss

@@ -7,12 +7,12 @@
   @include page-container;
 }
 
-@each $group, $map in map-get($threads-properties, $container-label) {
+@each $group, $map in map-get($threads-properties, $layout-width-label) {
   @if $group == page {
     @each $variant, $value in $map {
       @if $variant != base {
         .#{$group}-container--#{$variant} {
-          max-width: container($group, $variant);
+          max-width: layout-width($group, $variant);
         }
       }
     }

demo-app/dev/styles/index.scss

@@ -1,24 +1,23 @@
-// ==|== styles manifest > global ==============================================
-// =============================================================================
+////
+/// Styles Manifest
+/// Global
+////
 
-// --- Reset --- //
+///
+/// Reset
 @import 'reset';
 
-// --- Threads --- //
-@import '../../../threads/core';
-@import '../../../threads/properties';
-@import '../../../threads/helpers';
+///
+/// Vendor
+@import '../../../threads/threads';
 
-// --- Threads sample overrides --- //
-// @import '../../../threads/sample/properties';
-// @import '../../../threads/sample/settings';
-
-// --- Themes --- //
+///
+/// Theme properties
 @import 'themes/shopify-core';
 @import 'themes/merge-with-threads';
 
-// --- Components --- //
-// @import 'components/fonts';
+///
+/// Components
 @import 'components/page';
 @import 'components/section';
 @import 'components/icon';
@@ -27,5 +26,6 @@
 @import 'components/content';
 @import 'components/grid';
 
-// --- Areas --- //
+///
+/// Areas
 @import 'areas/home';

demo-app/dev/styles/reset.scss

@@ -1,12 +1,15 @@
-// ==|== threads > core > reset ================================================
-// =============================================================================
+////
+/// Global resets
+/// Based on normalize.css
+////
 
-// Document
-// -----------------------------------------------------------------------------
+///
+/// Document
 html {
   font-family: sans-serif;
   font-size: 62.5%;
   text-size-adjust: 100%;
+  text-rendering: optimizeLegibility;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   box-sizing: border-box;
 
@@ -36,8 +39,8 @@ body {
   width: device-width;
 }
 
-// Links
-// -----------------------------------------------------------------------------
+///
+/// Links
 a {
   text-decoration: none;
   background: transparent;
@@ -52,8 +55,8 @@ a {
   }
 }
 
-// Typography
-// -----------------------------------------------------------------------------
+///
+/// Typography
 h1,
 h2,
 h3,
@@ -98,8 +101,8 @@ blockquote {
   margin: 0;
 }
 
-// Lists
-// -----------------------------------------------------------------------------
+///
+/// Lists
 ol,
 ul {
   list-style: none;
@@ -109,8 +112,21 @@ ul {
   }
 }
 
-// Embedded Content
-// -----------------------------------------------------------------------------
+// Avoid 300ms click delay on touch devices that support 'touch-action'
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[role="button"] {
+  touch-action: manipulation;
+}
+
+///
+/// Embedded Content
 img {
   max-width: 100%;
   height: auto;
@@ -124,13 +140,14 @@ svg {
 }
 
 /*
-svg:not(:root) {
-  overflow: hidden;
-}
+  // this might not be a good thing
+  svg:not(:root) {
+    overflow: hidden;
+  }
 */
 
-// Grouping Content
-// -----------------------------------------------------------------------------
+///
+/// Grouping Content
 figure {
   margin: 0;
 }
@@ -141,17 +158,18 @@ hr {
 }
 
 pre {
+  margin-top: 0;
+  margin-bottom: 0;
   overflow: auto;
 }
 
 code,
 pre {
-  font-family: monospace, monospace;
-  font-size: 1em;
+  font-family: monospace;
 }
 
-// Forms
-// -----------------------------------------------------------------------------
+///
+/// Forms
 button,
 input,
 optgroup,
@@ -277,14 +295,15 @@ button:focus {
 
 ::-moz-placeholder {
   box-shadow: none;
+  opacity: 1;
 }
 
 :-ms-input-placeholder {
   box-shadow: none;
 }
 
-// Tables
-// -----------------------------------------------------------------------------
+///
+/// Tables
 table {
   border-collapse: collapse;
   border-spacing: 0;
@@ -294,17 +313,3 @@ td,
 th {
   padding: 0;
 }
-
-// Avoid 300ms click delay on touch devices that support 'touch-action'
-// -----------------------------------------------------------------------------
-a,
-area,
-button,
-input,
-label,
-select,
-summary,
-textarea,
-[role="button"] {
-  touch-action: manipulation;
-}

demo-app/dev/styles/themes/merge-with-threads.scss

@@ -1,15 +1,15 @@
-// ==|== themes > merge-with-threads ===========================================
-// =============================================================================
+////
+/// Themes
+/// Threads Merge
+////
 
-// Shopify Core theme properties
-// -----------------------------------------------------------------------------
 @include threads-update-property('border', $shopify-core-border-data);
 @include threads-update-property('breakpoint', $shopify-core-breakpoint-data);
 @include threads-update-property('color', $shopify-core-color-data);
-@include threads-update-property('container', $shopify-core-container-data);
 @include threads-update-property('duration', $shopify-core-duration-data);
 @include threads-update-property('easing', $shopify-core-easing-data);
 @include threads-update-property('font-stack', $shopify-core-font-stack-data);
+@include threads-update-property('layout-width', $shopify-core-layout-width-data);
 @include threads-update-property('radius', $shopify-core-radius-data);
 @include threads-update-property('spacing', $shopify-core-spacing-data);
 @include threads-update-property('z-index', $shopify-core-z-index-data);

demo-app/dev/styles/themes/shopify-core.scss

@@ -1,13 +1,15 @@
-// ==|== themes manifest > shopify-core ========================================
-// =============================================================================
+////
+/// Themes
+/// Shopify Core
+////
 
 @import 'shopify-core/border';
 @import 'shopify-core/breakpoint';
 @import 'shopify-core/color';
-@import 'shopify-core/container';
 @import 'shopify-core/duration';
 @import 'shopify-core/easing';
 @import 'shopify-core/font-stack';
+@import 'shopify-core/layout-width';
 @import 'shopify-core/radius';
 @import 'shopify-core/spacing';
 @import 'shopify-core/z-index';

demo-app/dev/styles/themes/shopify-core/_border.scss

@@ -1,8 +1,8 @@
-// ==|== themes > shopify-core > border ========================================
-// =============================================================================
+////
+/// Shopify Core Theme
+/// Border
+////
 
-// Border styles
-// -----------------------------------------------------------------------------
 $shopify-core-border-data: (
   thin: 0.1rem solid currentColor,
   base: 0.2rem solid currentColor,

demo-app/dev/styles/themes/shopify-core/_breakpoint.scss

@@ -1,8 +1,8 @@
-// ==|== themes > shopify-core > breakpoint ====================================
-// =============================================================================
+////
+/// Shopify Core Theme
+/// Breakpoint
+////
 
-// Breakpoints
-// -----------------------------------------------------------------------------
 $shopify-core-breakpoint-data: (
   base: 960px,
   portrait: (

demo-app/dev/styles/themes/shopify-core/_color.scss

@@ -1,8 +1,8 @@
-// ==|== themes > shopify-core > color =========================================
-// =============================================================================
+////
+/// Shopify Core Theme
+/// Color
+////
 
-// Colors
-// -----------------------------------------------------------------------------
 $shopify-core-color-data: (
   base: transparent,
   white: #fff,

demo-app/dev/styles/themes/shopify-core/_duration.scss

@@ -1,8 +1,8 @@
-// ==|== themes > shopify-core > duration ======================================
-// =============================================================================
+////
+/// Shopify Core Theme
+/// Duration
+////
 
-// Durations
-// -----------------------------------------------------------------------------
 $shopify-core-duration-data: (
   fastest: 30ms,
   faster: 60ms,

demo-app/dev/styles/themes/shopify-core/_easing.scss

@@ -1,8 +1,8 @@
-// ==|== themes > shopify-core > easing ========================================
-// =============================================================================
+////
+/// Shopify Core Theme
+/// Easing
+////
 
-// Easing timing functions
-// -----------------------------------------------------------------------------
 $shopify-core-easing-data: (
   base: ease-in-out,
   in: cubic-bezier(0.36, 0, 1, 1),

demo-app/dev/styles/themes/shopify-core/_font-stack.scss

@@ -1,8 +1,8 @@
-// ==|== themes > shopify-core > font-stack ====================================
-// =============================================================================
+////
+/// Shopify Core Theme
+/// Font Stack
+////
 
-// Font stacks
-// -----------------------------------------------------------------------------
 $shopify-core-font-stack-data: (
   base: #{
     -apple-system,

demo-app/dev/styles/themes/shopify-core/_layout-width.scss

@@ -0,0 +1,14 @@
+////
+/// Shopify Core Theme
+/// Layout Width
+////
+
+$shopify-core-layout-width-data: (
+  page: (
+    base: 8rem,
+    small: 40rem,
+    medium: 80rem,
+    large: 112rem,
+  ),
+  base: page,
+);

demo-app/dev/styles/themes/shopify-core/_radius.scss

@@ -1,8 +1,8 @@
-// ==|== themes > shopify-core > radius ========================================
-// =============================================================================
+////
+/// Shopify Core Theme
+/// Radius
+////
 
-// Border radius
-// -----------------------------------------------------------------------------
 $shopify-core-radius-data: (
   tight: 0.1rem,
   base: 0.3rem,

demo-app/dev/styles/themes/shopify-core/_spacing.scss

@@ -1,8 +1,8 @@
-// ==|== themes > shopify-core > spacing =======================================
-// =============================================================================
+////
+/// Shopify Core Theme
+/// Spacing
+////
 
-// Spacing measurements
-// -----------------------------------------------------------------------------
 $spacing-unit: 0.4rem;
 
 $shopify-core-spacing-data: (