Merge pull request #783 from mapbox/size-scale

rework size scale, closes #749

scripts/build-layout-scales.js

@@ -379,7 +379,7 @@ function buildLayoutScales() {
        * @group
        * @memberof Sizing
        * @example
-       * <div class='w96 bg-darken10'>w96</div>
+       * <div class='w60 bg-darken10'>w60</div>
        */`
     );
     scales.forEach((scale) => {
@@ -429,7 +429,7 @@ function buildLayoutScales() {
        * @group
        * @memberof Sizing
        * @example
-       * <div class='inline-block wmin96 bg-darken10'>wmin96</div>
+       * <div class='inline-block wmin60 bg-darken10'>wmin60</div>
        */`
     );
     scales.forEach((scale) => {
@@ -504,7 +504,7 @@ function buildLayoutScales() {
        * @group
        * @memberof Sizing
        * @example
-       * <div class='hmin48 bg-darken10'>hmin48</div>
+       * <div class='hmin60 bg-darken10'>hmin60</div>
        */`
     );
     scales.forEach((scale) => {

site/catalog/bleeds.js

@@ -4,27 +4,27 @@ class Bleeds extends React.Component {
   render() {
     return (
       <div>
-        <h2 className='border-b border--2 border--gray-faint pb6 mt72 mb24 txt-l txt-bold'>
+        <h2 className='border-b border--2 border--gray-faint pb6 mt60 mb24 txt-l txt-bold'>
           Bleeds
         </h2>
 
         <div className='bg-darken10 flex-parent flex-parent--center-main clip'>
-          <div className='w180 p12 bg-darken10'>
+          <div className='w240 p12 bg-darken10'>
             <div className='bg-darken10 bleed-r'>Right bleed</div>
           </div>
         </div>
         <div className='bg-darken10 flex-parent flex-parent--center-main clip'>
-          <div className='w180 p12 bg-darken10'>
+          <div className='w240 p12 bg-darken10'>
             <div className='bg-darken10 bleed-l align-r'>Left bleed</div>
           </div>
         </div>
         <div className='bg-darken10 flex-parent flex-parent--center-main clip'>
-          <div className='w180 p12 bg-darken10'>
+          <div className='w240 p12 bg-darken10'>
             <div className='bg-darken10 bleed-r-mxl'>Right bleed at xl</div>
           </div>
         </div>
         <div className='bg-darken10 flex-parent flex-parent--center-main clip'>
-          <div className='w180 p12 bg-darken10'>
+          <div className='w240 p12 bg-darken10'>
             <div className='bg-darken10 bleed-r unbleed-mxl'>Right bleed until xl</div>
           </div>
         </div>

site/catalog/buttons.js

@@ -67,7 +67,7 @@ class Buttons extends React.Component {
 
     return (
       <div>
-        <h2 className='border-b border--2 border--gray-faint pb6 mt72 mb24 txt-l txt-bold'>
+        <h2 className='border-b border--2 border--gray-faint pb6 mt60 mb24 txt-l txt-bold'>
           Buttons
         </h2>
 

site/catalog/checkboxes.js

@@ -51,7 +51,7 @@ class Checkboxes extends React.Component {
 
     return (
       <div>
-        <h2 className='border-b border--2 border--gray-faint pb6 mt72 mb24 txt-l txt-bold'>
+        <h2 className='border-b border--2 border--gray-faint pb6 mt60 mb24 txt-l txt-bold'>
           Checkboxes
         </h2>
 

site/catalog/flexbox.js

@@ -4,7 +4,7 @@ class Flexbox extends React.Component {
   render() {
     return (
       <div>
-        <h2 className='border-b border--2 border--gray-faint pb6 mt72 mb24 txt-l txt-bold'>
+        <h2 className='border-b border--2 border--gray-faint pb6 mt60 mb24 txt-l txt-bold'>
           Flexbox
         </h2>
 
@@ -19,39 +19,39 @@ class Flexbox extends React.Component {
         <div className='mb24'>
           <div className='mb12 txt-bold color-darken50 txt-uppercase txt-s'>Set-width flex children</div>
           <div className='border flex-parent'>
-            <div className='flex-child flex-child--no-shrink w300 bg-gray-light'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>
-            <div className='flex-child w420 bg-gray-faint'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>
+            <div className='flex-child flex-child--no-shrink w240 bg-gray-light'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>
+            <div className='flex-child w360 bg-gray-faint'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>
           </div>
         </div>
 
         <div className='mb24'>
           <div className='mb12 txt-bold color-darken50 txt-uppercase txt-s'>One set-width flex child, the other with long text</div>
           <div className='border flex-parent'>
-            <div className='flex-child flex-child--no-shrink w300 bg-gray-light'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>
+            <div className='flex-child flex-child--no-shrink w240 bg-gray-light'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>
             <div className='flex-child bg-gray-faint'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>
           </div>
         </div>
 
         <div className='mb24'>
           <div className='mb12 txt-bold color-darken50 txt-uppercase txt-s'>One set-width flex child, the other with short text</div>
           <div className='border flex-parent'>
-            <div className='flex-child flex-child--no-shrink w300 bg-gray-light'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>
+            <div className='flex-child flex-child--no-shrink w240 bg-gray-light'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>
             <div className='flex-child bg-gray-faint'>Duis mollis.</div>
           </div>
         </div>
 
         <div className='mb24'>
           <div className='mb12 txt-bold color-darken50 txt-uppercase txt-s'>One set-width flex child and a growing child with long text</div>
           <div className='border flex-parent'>
-            <div className='flex-child flex-child--no-shrink w300 bg-gray-light'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>
+            <div className='flex-child flex-child--no-shrink w240 bg-gray-light'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>
             <div className='flex-child flex-child--grow bg-gray-faint'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>
           </div>
         </div>
 
         <div className='mb24'>
           <div className='mb12 txt-bold color-darken50 txt-uppercase txt-s'>One set-width flex child and a growing child with short text</div>
           <div className='border flex-parent'>
-            <div className='flex-child flex-child--no-shrink w300 bg-gray-light'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>
+            <div className='flex-child flex-child--no-shrink w240 bg-gray-light'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>
             <div className='flex-child flex-child--grow bg-gray-faint'>Duis mollis.</div>
           </div>
         </div>

site/catalog/grids.js

@@ -65,23 +65,23 @@ class Grids extends React.Component {
 
     return (
       <div>
-        <h2 className='border-b border--2 border--gray-faint pb6 mt72 mb24 txt-l txt-bold'>
+        <h2 className='border-b border--2 border--gray-faint pb6 mt60 mb24 txt-l txt-bold'>
           Grid
         </h2>
 
         <h3 className='mb12 txt-m txt-bold color-darken50 txt-uppercase txt-s'>Standard grid</h3>
         {GridEls}
 
-        <h3 className='mb12 mt48 txt-m txt-bold color-darken50 txt-uppercase txt-s'>Grid with gutters</h3>
+        <h3 className='mb12 mt60 txt-m txt-bold color-darken50 txt-uppercase txt-s'>Grid with gutters</h3>
         {GridElsWithGutters}
 
-        <h3 className='mb12 mt48 txt-m txt-bold color-darken50 txt-uppercase txt-s'>Grid with left offset</h3>
+        <h3 className='mb12 mt60 txt-m txt-bold color-darken50 txt-uppercase txt-s'>Grid with left offset</h3>
         {GridElsWithLeftMargin}
 
-        <h3 className='mb12 mt48 txt-m txt-bold color-darken50 txt-uppercase txt-s'>Grid with right offset</h3>
+        <h3 className='mb12 mt60 txt-m txt-bold color-darken50 txt-uppercase txt-s'>Grid with right offset</h3>
         {GridElsWithRightMargin}
 
-        <h3 className='mb12 mt48 txt-m txt-bold color-darken50 txt-uppercase txt-s'>Grids only on large screens</h3>
+        <h3 className='mb12 mt60 txt-m txt-bold color-darken50 txt-uppercase txt-s'>Grids only on large screens</h3>
         <div className='txt-s grid-ml grid--gut24-ml mb18'>
           <div className='col-ml col--6-ml'>
             <div className='border p3'>col--6-ml</div>

site/catalog/icons.js

@@ -65,7 +65,7 @@ class Icons extends React.Component {
 
     return (
       <div>
-        <h2 className='border-b border--2 border--gray-faint pb6 mt72 mb24 txt-l txt-bold'>
+        <h2 className='border-b border--2 border--gray-faint pb6 mt60 mb24 txt-l txt-bold'>
           Icons
         </h2>
 

site/catalog/index.js

@@ -26,61 +26,61 @@ class Catalog extends React.Component {
 
         <h1 className='txt-h2 txt-bold mb18'>Catalog</h1>
         <p className='col col--6-mm'>A catalog of Assembly variations for reference and debugging purposes.</p>
-        <div id='Typography' className='mb48'>
+        <div id='Typography' className='mb36'>
           <Typography />
         </div>
-        <div id='Grids' className='mb48'>
+        <div id='Grids' className='mb36'>
           <Grids />
         </div>
-        <div id='Flexbox' className='mb48'>
+        <div id='Flexbox' className='mb36'>
           <Flexbox />
         </div>
-        <div id='Bleeds' className='mb48'>
+        <div id='Bleeds' className='mb36'>
           <Bleeds />
         </div>
-        <div id='Tables' className='mb48'>
+        <div id='Tables' className='mb36'>
           <Tables />
         </div>
-        <div id='Lists' className='mb48'>
+        <div id='Lists' className='mb36'>
           <Lists />
         </div>
-        <div id='Links' className='mb48'>
+        <div id='Links' className='mb36'>
           <Links />
         </div>
-        <div id='Buttons' className='mb48'>
+        <div id='Buttons' className='mb36'>
           <Buttons />
         </div>
-        <div id='Pills' className='mb48'>
+        <div id='Pills' className='mb36'>
           <Pills />
         </div>
-        <div id='Inputs' className='mb48'>
+        <div id='Inputs' className='mb36'>
           <Inputs />
         </div>
-        <div id='Textareas' className='mb48'>
+        <div id='Textareas' className='mb36'>
           <Textareas />
         </div>
-        <div id='Selects' className='mb48'>
+        <div id='Selects' className='mb36'>
           <Selects />
         </div>
-        <div id='Ranges' className='mb48'>
+        <div id='Ranges' className='mb36'>
           <Ranges />
         </div>
-        <div id='Toggles' className='mb48'>
+        <div id='Toggles' className='mb36'>
           <Toggles />
         </div>
-        <div id='Switches' className='mb48'>
+        <div id='Switches' className='mb36'>
           <Switches />
         </div>
-        <div id='Checkboxes' className='mb48'>
+        <div id='Checkboxes' className='mb36'>
           <Checkboxes />
         </div>
-        <div id='Radios' className='mb48'>
+        <div id='Radios' className='mb36'>
           <Radios />
         </div>
-        <div id='Icons' className='mb48'>
+        <div id='Icons' className='mb36'>
           <Icons />
         </div>
-        <div id='Triangles' className='mb48'>
+        <div id='Triangles' className='mb36'>
           <Triangles />
         </div>
       </div>

site/catalog/inputs.js

@@ -29,7 +29,7 @@ const colors = [
 ];
 
 function InputEl(props) {
-  let inputClasses = 'input w180';
+  let inputClasses = 'input w240';
   if (props.border) inputClasses += ` input--border-${props.border}`;
   if (props.color) inputClasses += ` color-${props.color}`;
   return (
@@ -50,7 +50,7 @@ class Inputs extends React.Component {
 
     return (
       <div>
-        <h2 className='border-b border--2 border--gray-faint pb6 mt72 mb24 txt-l txt-bold'>
+        <h2 className='border-b border--2 border--gray-faint pb6 mt60 mb24 txt-l txt-bold'>
           Text inputs
         </h2>
 
@@ -78,34 +78,34 @@ class Inputs extends React.Component {
         <div className='mb24'>
           <div className='mr6 mb6 inline-block'>
             <input
-              className='input w180'
+              className='input w240'
               placeholder='date'
               type='date'
             />
           </div>
           <div className='mr6 mb6 inline-block'>
             <input
-              className='input w180'
+              className='input w240'
               placeholder='number'
               type='number'
             />
           </div>
           <div className='mr6 mb6 inline-block'>
             <input
-              className='input w180'
+              className='input w240'
               placeholder='search'
               type='search'
             />
           </div>
           <div className='mr6 mb6 inline-block align-t'>
             <input
-              className='input w180'
+              className='input w240'
               type='color'
             />
           </div>
           <div className='mr6 mb6 inline-block'>
             <input
-              className='input w180'
+              className='input w240'
               placeholder='datetime'
               type='datetime'
             />

site/catalog/links.js

@@ -44,7 +44,7 @@ class Links extends React.Component {
 
     return (
       <div>
-        <h2 className='border-b border--2 border--gray-faint pb6 mt72 mb24 txt-l txt-bold'>
+        <h2 className='border-b border--2 border--gray-faint pb6 mt60 mb24 txt-l txt-bold'>
           Links
         </h2>
 

site/catalog/lists.js

@@ -4,7 +4,7 @@ class Lists extends React.Component {
   render() {
     return (
       <div>
-        <h2 className='mb24 border-b border--2 border--gray-faint pb6 mt72 txt-l txt-bold'>
+        <h2 className='mb24 border-b border--2 border--gray-faint pb6 mt60 txt-l txt-bold'>
           Lists
         </h2>
         <div className='grid grid--gut12'>

site/catalog/pills.js

@@ -4,7 +4,7 @@ class Pills extends React.Component {
   render() {
     return (
       <div>
-        <h2 className='border-b border--2 border--gray-faint pb6 mt72 mb24 txt-l txt-bold'>
+        <h2 className='border-b border--2 border--gray-faint pb6 mt60 mb24 txt-l txt-bold'>
           Button pills
         </h2>
 

site/catalog/radios.js

@@ -42,7 +42,7 @@ class Radios extends React.Component {
 
     return (
       <div>
-        <h2 className='border-b border--2 border--gray-faint pb6 mt72 mb24 txt-l txt-bold'>
+        <h2 className='border-b border--2 border--gray-faint pb6 mt60 mb24 txt-l txt-bold'>
           Radios
         </h2>
 

site/catalog/ranges.js

@@ -29,7 +29,7 @@ const colors = [
 ];
 
 function RangesEl(props) {
-  let inputClasses = `range range--${props.color} w180`;
+  let inputClasses = `range range--${props.color} w240`;
   if (props.size) inputClasses += ` range--${props.size}`;
   return (
     <div className='mr6 mb6 inline-block'>
@@ -45,7 +45,7 @@ class Ranges extends React.Component {
 
     return (
       <div>
-        <h2 className='border-b border--2 border--gray-faint pb6 mt72 mb24 txt-l txt-bold'>
+        <h2 className='border-b border--2 border--gray-faint pb6 mt60 mb24 txt-l txt-bold'>
           Ranges
         </h2>
 
@@ -65,14 +65,14 @@ class Ranges extends React.Component {
         </div>
 
         <div className='mb12 flex-parent flex-parent--center-cross'>
-          <input className='input w180' />
-          <div className='range w180'>
+          <input className='input w240' />
+          <div className='range w240'>
             <input type='range' />
           </div>
         </div>
         <div className='mb12 flex-parent flex-parent--center-cross'>
-          <input className='input input--s w180' />
-          <div className='range range--s w180'>
+          <input className='input input--s w240' />
+          <div className='range range--s w240'>
             <input type='range' />
           </div>
         </div>

site/catalog/selects.js

@@ -23,7 +23,7 @@ class Selects extends React.Component {
   render() {
     return (
       <div>
-        <h2 className='border-b border--2 border--gray-faint pb6 mt72 mb24 txt-l txt-bold'>
+        <h2 className='border-b border--2 border--gray-faint pb6 mt60 mb24 txt-l txt-bold'>
           Selects
         </h2>