Rename Sass variables to match naming in Foundation for Sites

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index fd619cc6867600a2c379a3178313850cf3dd46f5..a4bce44a40ff2bf6df2709329c8a5699b17e7aaa 100755 (executable)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -6,57 +6,57 @@
 /// @group button
 ////
 
-/// Default padding for button.
-/// @type List
-$button-padding: 12px 10px 12px 10px !default;
-
-/// Default padding for a tiny button.
-/// @type List
-$button-padding-tiny: 5px 4px 4px 4px !default;
-
-/// Default padding for a small button.
-/// @type List
-$button-padding-small: 8px 3px 7px 3px !default;
-
-/// Default padding for a large button.
-/// @type List
-$button-padding-large: 13px 26px 12px 26px!default;
+/// Padding inside buttons at various sizes.
+/// @type Map
+$button-padding: (
+  default: 12px 10px 12px 10px,
+  tiny: 5px 4px 4px 4px,
+  small: 8px 3px 7px 3px,
+  large: 13px 26px 12px 26px,
+) !default;
+
+/// Font sizes of buttons at various sizes.
+/// @type Map
+$button-font-size: (
+  default: 20px,
+  tiny: 12px,
+  small: 16px,
+  large: 24px,
+) !default;
 
 /// Default color of the font in a button.
 /// @type Color
-$button-font-color: $white !default;
+$button-color: $white !default;
 
 /// Default color of the font in an alternate button.
 /// @type Color
-$button-font-color-alt: $medium-gray !default;
+$button-color-alt: $medium-gray !default;
 
 /// Default font weight for a button.
 /// @type String
 $button-font-weight: bold !default;
 
-/// Default font size for a button.
-/// @type Number
-$button-font-size: 20px !default;
-
-/// Default font size for a tiny button.
-/// @type Number
-$button-font-size-tiny: 12px !default;
-
-/// Default font size for a small button.
-/// @type Number
-$button-font-size-small: 16px !default;
-
-/// Default font size for a large button.
-/// @type Number
-$button-font-size-large: 24px !default;
-
 /// Default backgrounnd color for a button.
 /// @type Color
-$button-background-color: $primary-color !default;
+$button-background: $primary-color !default;
 
 /// Default border color for a button.
 /// @type Color
-$button-border: 2px solid $button-background-color !default;
+$button-border: 2px solid $button-background !default;
+
+// Internal values for button font size
+// [TODO] Replace references below with map-get() calls
+$button-font-size-default: map-get($button-font-size, default);
+$button-font-size-tiny: map-get($button-font-size, tiny);
+$button-font-size-small: map-get($button-font-size, small);
+$button-font-size-large: map-get($button-font-size, large);
+
+// Internal values for button padding
+// [TODO] Replace references below with map-get() calls
+$button-padding-default: map-get($button-padding, default);
+$button-padding-tiny: map-get($button-padding, tiny);
+$button-padding-small: map-get($button-padding, small);
+$button-padding-large: map-get($button-padding, large);
 
 table.button {
   table {
@@ -65,19 +65,19 @@ table.button {
     td {
       width: auto !important;
       text-align: left;
-      color: $button-font-color;
-      background: $button-background-color;
-      border: 2px solid $button-background-color;
+      color: $button-color;
+      background: $button-background;
+      border: 2px solid $button-background;
 
       a {
         font-family: $global-font-family;
-        font-size: $button-font-size;
+        font-size: $button-font-size-default;
         font-weight: $button-font-weight;
-        color: $button-font-color;
+        color: $button-color;
         text-decoration: none;
         display: inline-block;
-        padding: $button-padding;
-        border: 0px solid $button-background-color;
+        padding: $button-padding-default;
+        border: 0px solid $button-background;
       }
     }
   }
@@ -95,7 +95,7 @@ table.button.small table tr td a:visited,
 table.button.large:hover table tr td a,
 table.button.large:active table tr td a,
 table.button.large table tr td a:visited {
-  color: $button-font-color;
+  color: $button-color;
 }
 
 table.button.tiny {
@@ -149,8 +149,8 @@ table.button:visited,
 table.button:active {
   table {
     td {
-      background: darken($button-background-color, 10%);
-      color: $button-font-color;
+      background: darken($button-background, 10%);
+      color: $button-color;
     }
   }
 }
@@ -160,7 +160,7 @@ table.button:visited,
 table.button:active {
   table {
     a {
-      border: 0px solid darken($button-background-color, 10%);
+      border: 0px solid darken($button-background, 10%);
     }
   }
 }
@@ -169,12 +169,12 @@ table.button.secondary {
   table {
     td {
       background: $secondary-color;
-      color: $button-font-color-alt;
+      color: $button-color-alt;
       border: 2px solid $secondary-color;
     }
 
     a {
-      color: $button-font-color-alt;
+      color: $button-color-alt;
       border: 0px solid $secondary-color;
     }
   }
@@ -184,7 +184,7 @@ table.button.secondary:hover {
   table {
     td {
       background: lighten($secondary-color, 10%);
-      color: $button-font-color-alt;
+      color: $button-color-alt;
     }
 
     a {
@@ -196,7 +196,7 @@ table.button.secondary:hover {
 table.button.secondary:hover {
   table {
     td a {
-      color: $button-font-color-alt;
+      color: $button-color-alt;
     }
   }
 }
@@ -204,7 +204,7 @@ table.button.secondary:hover {
 table.button.secondary:active {
   table {
     td a {
-      color: $button-font-color-alt;
+      color: $button-color-alt;
     }
   }
 }
@@ -212,7 +212,7 @@ table.button.secondary:active {
 table.button.secondary {
   table {
     td a:visited {
-      color: $button-font-color-alt;
+      color: $button-color-alt;
     }
   }
 }

diff --git a/scss/components/_callout.scss b/scss/components/_callout.scss
index 5716c23e2219c0afa6de1e028c4e337af8f1231f..17e1c8cf4838ccc3f8ecd9f1bb33dc9f81a20bd6 100644 (file)
--- a/scss/components/_callout.scss
+++ b/scss/components/_callout.scss
@@ -6,35 +6,35 @@
 /// @group callout
 ////
 
-/// Defualt background color of a callout.
+/// Background color of a callout.
 /// @type Color
-$callout-background-color: $light-gray !default;
+$callout-background: $light-gray !default;
 
-/// Defualt padding color of a callout.
-/// @type Number
+/// Padding inside a callout.
+/// @type Length
 $callout-padding: 10px !default;
 
-/// Default border for a callout.
-/// @type List
-$callout-border: 1px solid darken($callout-background-color, 20%) !default;
+/// Border around a callout.
+/// @type Border
+$callout-border: 1px solid darken($callout-background, 20%) !default;
 
-/// Default border for a success callout.
-/// @type List
+/// Border around a callout with the `.success` class.
+/// @type Border
 $callout-border-success: 1px solid darken($success-color, 20%) !default;
 
-/// Default border for a warning callout.
-/// @type List
+/// Border around a callout with the `.warning` class.
+/// @type Border
 $callout-border-warning: 1px solid darken($warning-color, 20%) !default;
 
-/// Default border for a alert callout.
-/// @type List
+/// Border around a callout with the `.alert` class.
+/// @type Border
 $callout-border-alert: 1px solid darken darken($alert-color, 20%) !default;
 
 td.callout {
   width: 100%;
   border: $callout-border;
   padding: $callout-padding !important;
-  background: $callout-background-color;
+  background: $callout-background;
 
   &.success {
     background: $success-color !important;

diff --git a/scss/components/_media-query.scss b/scss/components/_media-query.scss
index dbf16a682541717efc6c0b20325f3aad8f2360d3..90809abacbe803027a5f7b73631f4e666a0ba0a0 100755 (executable)
--- a/scss/components/_media-query.scss
+++ b/scss/components/_media-query.scss
@@ -6,11 +6,11 @@
 /// @group media-query
 ////
 
-/// Default container width for small screens.
+/// Container width for small screens.
 /// @type Number
-$small-container-width: 95% !default;
+$container-width-small: 95% !default;
 
-/// Default small break point.
+/// Small breakpoint.
 /// @type Number
 $small-range: $container-width !default;
 
@@ -26,7 +26,7 @@ $small-range: $container-width !default;
   }
 
   table.body .container {
-    width: $small-container-width !important;
+    width: $container-width-small !important;
   }
 
   //If it supports border-box, why not? Am I right?

diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index 6a9869aa522c8e4989e4e4c53903735042f12990..f44a9bfe6f1894f4795fe7e7f886c5a48f20a3df 100644 (file)
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -6,13 +6,13 @@
 /// @group inline-list
 ////
 
-/// Default padding for a menu item.
+/// Padding inside a menu item.
 /// @type Number
 $menu-item-padding: 20px !default;
 
-/// Default padding for a menu item.
+/// Right-hand spacing of menus with the `.simple` class.
 /// @type Number
-$menu-simple-item-gutter: 10px !default;
+$menu-simple-item-spacing: 10px !default;
 
 
 table.menu {
@@ -29,7 +29,7 @@ table.menu.simple {
   td,
   th {
     padding: 0;
-    padding-right: $menu-simple-item-gutter;
+    padding-right: $menu-simple-item-spacing;
   }
 }
 

diff --git a/scss/components/_normalize.scss b/scss/components/_normalize.scss
index 89da8e1f1cfc72e2960e1c044d5dbfdf9d765e31..16579ab68d4398a2474125b53ab01a1e8db74be6 100755 (executable)
--- a/scss/components/_normalize.scss
+++ b/scss/components/_normalize.scss
@@ -6,11 +6,11 @@
 /// @group normalize
 ////
 
-/// Defualt color of an hr.
+/// Color of a divider.
 /// @type Color
-$hr-color: $medium-gray !default;
+$hr-background: $medium-gray !default;
 
-/// Default height for an hr.
+/// Height of a divider.
 /// @type Number
 $hr-height: 1px !default;
 
@@ -94,8 +94,8 @@ table, tr, td {
 }
 
 hr {
-  color: $hr-color;
-  background-color: $hr-color;
+  color: $hr-background;
+  background-color: $hr-background;
   height: $hr-height;
   border: none;
 }

diff --git a/scss/components/_type.scss b/scss/components/_type.scss
index a5f0cb6d8c1fbf1776e8d5a6b368d1b399e7fcf2..89add01a373b8a046492f1da88cdf298a2389c29 100755 (executable)
--- a/scss/components/_type.scss
+++ b/scss/components/_type.scss
@@ -64,11 +64,11 @@ $small-font-size: 10px !default;
 
 /// Defualt font size for lead paragraphs.
 /// @type Number
-$paragraph-lead-font-size: 18px !default;
+$lead-font-size: 18px !default;
 
 /// Defualt line height for lead paragraphs.
 /// @type Number
-$paragraph-lead-line-height: 21px !default;
+$lead-line-height: 21px !default;
 
 /// Default margin bottom for paragraphs.
 /// @type Number
@@ -84,19 +84,19 @@ $anchor-text-decoration: none !default;
 
 /// Defualt anchor font color.
 /// @type Color
-$anchor-font-color: $primary-color !default;
+$anchor-color: $primary-color !default;
 
 /// Defualt font color for a visited anchor.
 /// @type Color
-$anchor-font-color-visited: $anchor-font-color !default;
+$anchor-color-visited: $anchor-color !default;
 
 /// Defualt font color for an anchor on hover.
 /// @type Color
-$anchor-font-color-hover: darken($primary-color, 10%) !default;
+$anchor-color-hover: darken($primary-color, 10%) !default;
 
 /// Defualt font color for an active anchor.
 /// @type Color
-$anchor-font-color-active: $anchor-font-color-hover !default;
+$anchor-color-active: $anchor-color-hover !default;
 
 body,
 table.body,
@@ -166,8 +166,8 @@ p {
   margin-bottom: $paragraph-margin-bottom;
 
   &.lead {
-    font-size: $paragraph-lead-font-size;
-    line-height: $paragraph-lead-line-height;
+    font-size: $lead-font-size;
+    line-height: $lead-line-height;
   }
 }
 
@@ -176,19 +176,19 @@ small {
 }
 
 a {
-  color: $anchor-font-color;
+  color: $anchor-color;
   text-decoration: none;
 
   &:hover {
-    color: $anchor-font-color-hover;
+    color: $anchor-color-hover;
   }
 
   &:active {
-    color: $anchor-font-color-active;
+    color: $anchor-color-active;
   }
 
   &:visited {
-    color: $anchor-font-color-visited;
+    color: $anchor-color-visited;
   }
 }
 
@@ -204,7 +204,7 @@ h5 a,
 h5 a:visited,
 h6,
 h6 a:visited {
-  color: $anchor-font-color;
+  color: $anchor-color;
 }
 
 pre {

diff --git a/scss/grid/_block-grid.scss b/scss/grid/_block-grid.scss
index 0e8b88de5e54e15cf025fea9bc97f2941236cb24..1a37c6a62e9abe465edf7584ca5561b2d4c5775a 100755 (executable)
--- a/scss/grid/_block-grid.scss
+++ b/scss/grid/_block-grid.scss
@@ -6,19 +6,19 @@
 /// @group block-grid
 ////
 
-///Defualt number of elements in the block grid per row.
-///@type Number
-$block-grid-elements: 8 !default;
+/// The highest number of `.x-up` classes available when using the block grid CSS.
+/// @type Number
+$block-grid-max: 8 !default;
 
-///Defualt gutter between elements in the block grid.
-///@type Number
-$block-grid-spacing: $grid-column-gutter !default;
+/// Gutter between elements in a block grid.
+/// @type Number
+$block-grid-gutter: $grid-column-gutter !default;
 
 ///Creates all of the block-grid classes.
 @mixin block-grid {
-  @for $i from 2 through $block-grid-elements {
+  @for $i from 2 through $block-grid-max {
     .up-#{$i} td {
-      width: floor(($container-width - $i * $block-grid-spacing) / $i) !important;
+      width: floor(($container-width - $i * $block-grid-gutter) / $i) !important;
     }
   }
 }
@@ -29,7 +29,7 @@ $block-grid-spacing: $grid-column-gutter !default;
 
   td {
     display: inline-block;
-    padding: $block-grid-spacing / 2;
+    padding: $block-grid-gutter / 2;
   }
 }
 

diff --git a/testing/src/assets/scss/_settings.scss b/testing/src/assets/scss/_settings.scss
index 4de97618664097b727a212be296a314e5dea4379..367a0a42003f853efc9588ceff0478f270330616 100644 (file)
--- a/testing/src/assets/scss/_settings.scss
+++ b/testing/src/assets/scss/_settings.scss
@@ -52,17 +52,17 @@ $block-grid-spacing: $grid-column-gutter;
 // 4. Button
 // ---------
 
-$button-padding: 12px 10px 12px 10px;
-$button-padding-tiny: 5px 4px 4px 4px;
-$button-padding-small: 8px 3px 7px 3px;
-$button-padding-large: 13px 26px 12px 26px!default;
+// $button-padding: 12px 10px 12px 10px;
+// $button-padding-tiny: 5px 4px 4px 4px;
+// $button-padding-small: 8px 3px 7px 3px;
+// $button-padding-large: 13px 26px 12px 26px!default;
 $button-font-color: $white;
 $button-font-color-alt: $medium-gray;
 $button-font-weight: bold;
-$button-font-size: 20px;
-$button-font-size-tiny: 12px;
-$button-font-size-small: 16px;
-$button-font-size-large: 24px;
+// $button-font-size: 20px;
+// $button-font-size-tiny: 12px;
+// $button-font-size-small: 16px;
+// $button-font-size-large: 24px;
 $button-background-color: $primary-color;
 $button-border: 1px solid $button-background-color;
 
@@ -130,4 +130,3 @@ $anchor-font-color: $primary-color;
 $anchor-font-color-visited: $anchor-font-color;
 $anchor-font-color-hover: darken($primary-color, 10%);
 $anchor-font-color-active: $anchor-font-color-hover;
-