Clean up base PL styles

components/_patterns/00-base/global/01-colors/colors.twig

@@ -1,7 +1,7 @@
 <ul class="sg-colors">
   {% for item in items %}
     <li>
-      <div class="sg-swatch" style="background: {{item.value}};"></div>
+      <div class="sg-colors__sample" style="background: {{item.value}};"></div>
       <div class="sg-info">
         <span>{{item.value}}</span> <br/>
         <code>{{item.name}}</code>

components/_patterns/00-base/global/animations/_animation.scss

@@ -0,0 +1,22 @@
+/// Mixin - Transition
+@mixin transition($transition-property, $transition-time, $method) {
+  -webkit-transition: $transition-property $transition-time $method;
+  -moz-transition: $transition-property $transition-time $method;
+  -ms-transition: $transition-property $transition-time $method;
+  -o-transition: $transition-property $transition-time $method;
+  transition: $transition-property $transition-time $method;
+}
+
+.animate-fade {
+  @include transition(opacity, 0.3s, ease-out);
+
+  &:hover {
+    opacity: 0;
+  }
+}
+
+.animate-move {
+  > .demo-shape {
+    @include transition(all, 0.8s, ease-in-out);
+  }
+}

components/_patterns/00-base/_breakpoints.scss → components/_patterns/00-base/global/base/_02-breakpoints.scss

@@ -11,12 +11,18 @@
 @include add-grid(12);
 @include add-gutter(1/4);
 
-// Breakpoints variables
-$xs: 25em;
-$small: 26em;
-$medium: 41em;
-$large: 48em;
-$xl: 75em;
+/////////////////////
+// Global Breakpoints
+
+// Avoid using in favor of atomic, content-specific, breakpoints.
+// These should be used for generic code, like layouts and typography, only.
+$xs: 320px;
+$small: 480px;
+$medium: 720px;
+$large: 920px;
+$xl: 1224px;
+// The max-width breakpoint is used when the design should be applied at whatever the
+// largest breakpoint is regardless of actual pixel value. e.g. removing outer margin on body wrapper
 $max-width: $xl;
 
 /// Mixin - xs Breakpoint

components/_patterns/00-base/global/base/_03-mixins.scss

@@ -0,0 +1,50 @@
+/////////////////////
+// General Mixins (put specific ones in component files where applicable)
+
+/// Mixin - Clearfix.
+/// Adds clearfix based on http://bourbon.io/docs/#clearfix
+/// use example =   @include cleafix
+
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}
+
+/// Mixin - Wrapper
+/// Outer container mixin for large screens
+@mixin wrapper($container-max-width: $max-width, $outer-container-break: $small, $v-margin: 0, $v-padding: 0, $h-padding: $space, $h-padding-large: $h-padding) {
+  max-width: #{$container-max-width};
+  width: 100%;
+  margin: #{$v-margin} auto;
+  padding: #{$v-padding} #{$h-padding};
+
+  @include breakpoint($outer-container-break) {
+    padding: #{$v-padding} #{$h-padding-large};
+  }
+
+  @include breakpoint($container-max-width) {
+    padding-left: calc(#{$h-padding-large} + calc(-50vw + calc(#{$container-max-width} / 2)));
+    padding-right: calc(#{$h-padding-large} + calc(-50vw + calc(#{$container-max-width} / 2)));
+  }
+}
+
+/// Use the breakout mixin for elements that should be edge-to-edge
+/// Even when a parent container uses the wrapper mixin
+@mixin breakout($v-padding: $space-double) {
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
+  padding-left: calc(#{$v-padding} + calc(-50vw + 50%));
+  padding-right: calc(#{$v-padding} + calc(-50vw + 50%));
+}
+
+/// Mixin - Standard Margin
+@mixin margin {
+  margin-bottom: 1em;
+}
+
+@mixin no-bottom {
+  margin-bottom: 0;
+}

components/_patterns/00-base/global/base/_04-base.scss

@@ -0,0 +1,5 @@
+.main {
+  @include wrapper;
+
+  display: block; // Fix for IE weirdness
+}

components/_patterns/00-base/global/base/_pl-base.scss

@@ -0,0 +1,82 @@
+// These styles are specifically for Pattern Lab.
+// They are not used by the site in any way.
+
+.sg-main {
+  @include wrapper;
+}
+
+.pl-template {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.pl,
+.sg-main {
+  .sg-subtype h2 {
+    font-size: 3rem;
+    text-transform: uppercase;
+    background-color: $gray-darker;
+    margin: 0 calc(-50vw + 50%) $space calc(-50vw + 50%);
+
+    a {
+      @include wrapper(
+        $v-padding: $space
+      );
+
+      display: block;
+      color: $white;
+      text-decoration: none;
+      line-height: 1;
+    }
+  }
+
+  .sg-pattern-title {
+    color: #738ba3;
+    font-size: 1.4rem !important;
+    text-transform: none !important;
+
+    a {
+      color: #1169ba !important;
+      font-family: Calibre;
+      font-size: 2.2rem;
+      font-weight: 500;
+      text-transform: uppercase !important;
+    }
+  }
+
+  .sg-pattern-extra-info {
+    width: 100%;
+  }
+
+  .sg-pattern-extra-code {
+    display: none;
+  }
+
+  .visually-hidden {
+    position: absolute !important;
+    clip: rect(1px, 1px, 1px, 1px);
+    overflow: hidden;
+    height: 1px;
+    width: 1px;
+    word-wrap: normal;
+  }
+
+  .sg-colors {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      flex: 0 0 100px;
+      margin: 0 0.5rem 1rem;
+    }
+
+    &__sample {
+      display: block;
+      height: 100px;
+      margin-bottom: 0.3em;
+    }
+  }
+}

components/_patterns/01-atoms/02-text/text/_text.scss

@@ -4,8 +4,10 @@
   margin: #{$margin};
 }
 
-@mixin no-bottom {
-  margin-bottom: 0;
+@mixin body-copy {
+  font-family: $font-body;
+  font-size: 0.9rem;
+  line-height: 1.6em;
 }
 
 body {

components/_patterns/01-atoms/03-lists/_lists.scss

@@ -1,3 +1,11 @@
+/// Mixin - list-reset
+/// Reset list item defaults when no margin, padding, list styles needed
+@mixin list-reset {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 ul,
 ol {
   padding-left: 1em;