address PR feedback

- rename disabled-text-color to more appropriate inactice-text-color, used for both disabled and placeholder text
- fix find and replace typos

site/catalog/toggles.js

@@ -78,12 +78,12 @@ class Toggles extends React.Component {
         </div>
 
         <div className='mb12 txt-bold color-darken50 txt-uppercase txt-s'>Light variations</div>
-        <div className='bg-gray round px12 py12y mt12'>
+        <div className='bg-gray round px12 py12 mt12'>
         {lightenColors.map((c) => <ToggleEl key={c} color={c} />)}
         </div>
 
         <div className='mt24 mb12 txt-bold color-darken50 txt-uppercase txt-s'>Disabled and light</div>
-        <div className='bg-gray round px12 py12y mt12'>
+        <div className='bg-gray round px12 py12 mt12'>
         {lightenColors.map((c) => <ToggleEl key={c} color={c} disabled={true} />)}
         </div>
 

site/examples/progress_bars.js

@@ -9,7 +9,7 @@ const playback = `<div class='flex-parent flex-parent--row flex-parent--center-c
     <button class='flex-child py18 pr12 pl18 border-r border--gray-light bg-white bg-green-faint-on-hover cursor-pointer round-l'>
       <div class='triangle--r triangle color-green color-green'></div>
     </button>
-    <div class='flex-child flex-child--grow px18 py18bg-white'>
+    <div class='flex-child flex-child--grow px18 py18 bg-white'>
       <div class='relative w-full h12 bg-darken10 round-full'>
         <div class='absolute top right bottom left m3 bg-green-light round-full' style='width:50%;'>
           <span class='absolute top right w30 h6 bg-green round-full'></span>

site/examples/tooltips.js

@@ -17,7 +17,7 @@ const basic_left = `<div class='flex-parent-inline flex-parent--center-cross'>
 </div>`;
 
 const basic_with_closure = `<div class='flex-parent-inline flex-parent--center-cross flex-parent--column'>
-  <div class='flex-child relative px18 py18round txt-bold txt-s align-center bg-darken75 color-white'>
+  <div class='flex-child relative px18 py18 round txt-bold txt-s align-center bg-darken75 color-white'>
     <button class='flex-child absolute top right'>
       <svg class='flex-child icon link color-white'><use xlink:href='#icon-close'></use></svg>
     </button>

src/buttons.css

@@ -128,7 +128,7 @@
  */
 .btn:disabled {
   pointer-events: none;
-  color: var(--disabled-text-color) !important;
+  color: var(--inactive-text-color) !important;
   background-color: var(--disabled-primary-interactive-color) !important;
   border-color: transparent !important;
 }

src/forms.css

@@ -45,7 +45,7 @@
 
 .input::placeholder,
 .textarea::placeholder {
-  color: var(--disabled-text-color);
+  color: var(--inactive-text-color);
 }
 
 /* Without this, IE always has a scrollbar */

src/layout.css

@@ -215,8 +215,8 @@
  * @example
  * <div class="relative h60">
  *   <div class="absolute z5 bg-pink py6 px6">z5</div>
- *   <div class="absolute z1 bg-blue px6 py6mt12 ml24">z1</div>
- *   <div class="absolute z1-neg1 bg-blue px6 py6mt24 ml60">z-neg1</div>
+ *   <div class="absolute z1 bg-blue px6 py6 mt12 ml24">z1</div>
+ *   <div class="absolute z1-neg1 bg-blue px6 py6 mt24 ml60">z-neg1</div>
  * </div>
  */
 .z-neg1 { z-index: -1 !important; }

src/variables.json

@@ -55,7 +55,8 @@
 
   "disabled-primary-interactive-color": "rgba(127, 127, 127, 0.25)",
   "disabled-secondary-interactive-color": "rgba(127, 127, 127, 0.1)",
-  "disabled-text-color": "rgba(127, 127, 127, 0.45)",
+
+  "inactive-text-color": "rgba(127, 127, 127, 0.45)",
 
   "text-color": "rgba(0, 0, 0, 0.75)",