Merge pull request #243 from edx/frances/mo-colors

Frances/mo colors
edx · Dec 22, 2015 · 659b4c2 · 659b4c2
2 parents 8d03c06 + 61133a4
commit 659b4c2
Show file tree

Hide file tree

Showing 11 changed files with 362 additions and 237 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,13 +5,18 @@ Nothing yet
 
 - - -
 
+## 0.7.3 (2015-12-22)
+* adding transparent options to base and utility color palettes and remove unused colors partial
+
+- - -
+
 ## 0.7.2 (2015-12-17)
-* correcting doc/depedency small errors with npm package 
+* correcting doc/depedency small errors with npm package
 
 - - -
 
 ## 0.7.1 (2015-12-16)
-* ignoring files in npm package 
+* ignoring files in npm package
 
 - - -
 

diff --git a/_posts/patterns/2015-04-01-colors.md b/_posts/patterns/2015-04-01-colors.md
@@ -11,7 +11,7 @@ tags:
 
 slug:         colors
 
-description:  Predefined system and configurable colors with calculated ranges 
+description:  Predefined system and configurable colors with calculated ranges
 
 info: These are the predefined colors used throughout our patterns. Values here (noted by our Sass variable name, the RGB value and the HEX value) are used for backgrounds, text color, and decorative elements. Note - when using any values here, make sure that any text on a background passes WCAG AA guidelines for color contrast.
 ---
@@ -50,7 +50,7 @@ info: These are the predefined colors used throughout our patterns. Values here
         </div>
     </div>
 
-    <div class="example example-color brand brand-primary base lod">
+    <div class="example example-color brand-primary base lod">
         <div class="color-info">
             <span class="color-class">base</span>
 
@@ -129,6 +129,54 @@ info: These are the predefined colors used throughout our patterns. Values here
             <div class="color-hex is-copyable"></div>
         </div>
     </div>
+
+    <div class="example example-color brand-primary trans dol">
+        <div class="color-info">
+            <span class="color-class">trans</span>
+
+            <div class="color-reference">
+                <span class="sr-only">Use this color in your sass:</span>
+                <span class="is-copyable">palette(primary, trans)</span>
+            </div>
+        </div>
+
+        <div class="color-meta">
+            <div class="color-rgb is-copyable"></div>
+            <div class="color-hex is-copyable"></div>
+        </div>
+    </div>
+
+    <div class="example example-color brand-primary x-trans dol">
+        <div class="color-info">
+            <span class="color-class">x-trans</span>
+
+            <div class="color-reference">
+                <span class="sr-only">Use this color in your sass:</span>
+                <span class="is-copyable">palette(primary, x-trans)</span>
+            </div>
+        </div>
+
+        <div class="color-meta">
+            <div class="color-rgb is-copyable"></div>
+            <div class="color-hex is-copyable"></div>
+        </div>
+    </div>
+
+    <div class="example example-color brand-primary xx-trans dol">
+        <div class="color-info">
+            <span class="color-class">xx-trans</span>
+
+            <div class="color-reference">
+                <span class="sr-only">Use this color in your sass:</span>
+                <span class="is-copyable">palette(primary, xx-trans)</span>
+            </div>
+        </div>
+
+        <div class="color-meta">
+            <div class="color-rgb is-copyable"></div>
+            <div class="color-hex is-copyable"></div>
+        </div>
+    </div>
 </div>
 
 <h3 class="hd-6 example-set-hd">Brand Secondary</h3>
@@ -165,7 +213,7 @@ info: These are the predefined colors used throughout our patterns. Values here
         </div>
     </div>
 
-    <div class="example example-color brand brand-secondary base lod">
+    <div class="example example-color brand-secondary base lod">
         <div class="color-info">
             <span class="color-class">base</span>
 
@@ -231,7 +279,7 @@ info: These are the predefined colors used throughout our patterns. Values here
 </div>
 
 <h3 class="hd-6 example-set-hd">Grayscale (Neutral)</h3>
-<div class="example-set">    
+<div class="example-set">
     <div class="example example-color grayscale black lod">
         <div class="color-info">
             <span class="color-class">black</span>
@@ -296,7 +344,7 @@ info: These are the predefined colors used throughout our patterns. Values here
         </div>
     </div>
 
-    <div class="example example-color brand grayscale base lod">
+    <div class="example example-color grayscale base lod">
         <div class="color-info">
             <span class="color-class">base</span>
 
@@ -417,7 +465,7 @@ info: These are the predefined colors used throughout our patterns. Values here
                 <span class="is-copyable">palette(grayscale, x-trans)</span>
             </div>
         </div>
-       
+
         <div class="color-meta">
             <div class="color-rgb is-copyable"></div>
             <div class="color-hex is-copyable"></div>
@@ -475,7 +523,7 @@ info: These are the predefined colors used throughout our patterns. Values here
         </div>
     </div>
 
-    <div class="example example-color brand grayscale-cool base lod">
+    <div class="example example-color grayscale-cool base lod">
         <div class="color-info">
             <span class="color-class">base</span>
 
@@ -564,7 +612,7 @@ info: These are the predefined colors used throughout our patterns. Values here
                 <span class="is-copyable">palette(grayscale-cool, x-trans)</span>
             </div>
         </div>
-        
+
         <div class="color-meta">
             <div class="color-rgb is-copyable"></div>
             <div class="color-hex is-copyable"></div>
@@ -580,7 +628,7 @@ info: These are the predefined colors used throughout our patterns. Values here
                 <span class="is-copyable">palette(grayscale-cool, xx-trans)</span>
             </div>
         </div>
-    
+
         <div class="color-meta">
             <div class="color-rgb is-copyable"></div>
             <div class="color-hex is-copyable"></div>
@@ -606,7 +654,7 @@ info: These are the predefined colors used throughout our patterns. Values here
         </div>
     </div>
 
-    <div class="example example-color brand success base dol">
+    <div class="example example-color success base dol">
         <div class="color-info">
             <span class="color-class">success base</span>
 
@@ -638,6 +686,54 @@ info: These are the predefined colors used throughout our patterns. Values here
         </div>
     </div>
 
+    <div class="example example-color success trans dol">
+        <div class="color-info">
+            <span class="color-class">trans</span>
+
+            <div class="color-reference">
+                <span class="sr-only">Use this color in your sass:</span>
+                <span class="is-copyable">palette(success, trans)</span>
+            </div>
+        </div>
+
+        <div class="color-meta">
+            <div class="color-rgb is-copyable"></div>
+            <div class="color-hex is-copyable"></div>
+        </div>
+    </div>
+
+    <div class="example example-color success x-trans dol">
+        <div class="color-info">
+            <span class="color-class">x-trans</span>
+
+            <div class="color-reference">
+                <span class="sr-only">Use this color in your sass:</span>
+                <span class="is-copyable">palette(success, x-trans)</span>
+            </div>
+        </div>
+
+        <div class="color-meta">
+            <div class="color-rgb is-copyable"></div>
+            <div class="color-hex is-copyable"></div>
+        </div>
+    </div>
+
+    <div class="example example-color success xx-trans dol">
+        <div class="color-info">
+            <span class="color-class">xx-trans</span>
+
+            <div class="color-reference">
+                <span class="sr-only">Use this color in your sass:</span>
+                <span class="is-copyable">palette(success, xx-trans)</span>
+            </div>
+        </div>
+
+        <div class="color-meta">
+            <div class="color-rgb is-copyable"></div>
+            <div class="color-hex is-copyable"></div>
+        </div>
+    </div>
+
     <div class="example example-color warning dark lod">
         <div class="color-info">
             <span class="color-class">warning dark</span>
@@ -654,7 +750,7 @@ info: These are the predefined colors used throughout our patterns. Values here
         </div>
     </div>
 
-    <div class="example example-color brand warning base dol">
+    <div class="example example-color warning base dol">
         <div class="color-info">
             <span class="color-class">warning base</span>
 
@@ -686,6 +782,53 @@ info: These are the predefined colors used throughout our patterns. Values here
         </div>
     </div>
 
+    <div class="example example-color warning trans dol">
+        <div class="color-info">
+            <span class="color-class">trans</span>
+
+            <div class="color-reference">
+                <span class="sr-only">Use this color in your sass:</span>
+                <span class="is-copyable">palette(warning, trans)</span>
+            </div>
+        </div>
+
+        <div class="color-meta">
+            <div class="color-rgb is-copyable"></div>
+            <div class="color-hex is-copyable"></div>
+        </div>
+    </div>
+
+    <div class="example example-color warning x-trans dol">
+        <div class="color-info">
+            <span class="color-class">x-trans</span>
+
+            <div class="color-reference">
+                <span class="sr-only">Use this color in your sass:</span>
+                <span class="is-copyable">palette(warning, x-trans)</span>
+            </div>
+        </div>
+
+        <div class="color-meta">
+            <div class="color-rgb is-copyable"></div>
+            <div class="color-hex is-copyable"></div>
+        </div>
+    </div>
+
+    <div class="example example-color warning xx-trans dol">
+        <div class="color-info">
+            <span class="color-class">xx-trans</span>
+
+            <div class="color-reference">
+                <span class="sr-only">Use this color in your sass:</span>
+                <span class="is-copyable">palette(warning, xx-trans)</span>
+            </div>
+        </div>
+
+        <div class="color-meta">
+            <div class="color-rgb is-copyable"></div>
+            <div class="color-hex is-copyable"></div>
+        </div>
+    </div>
 
     <div class="example example-color error dark lod">
         <div class="color-info">
@@ -703,7 +846,7 @@ info: These are the predefined colors used throughout our patterns. Values here
         </div>
     </div>
 
-    <div class="example example-color brand error base lod">
+    <div class="example example-color error base lod">
         <div class="color-info">
             <span class="color-class">error base</span>
 
@@ -734,4 +877,52 @@ info: These are the predefined colors used throughout our patterns. Values here
             <div class="color-hex is-copyable"></div>
         </div>
     </div>
+
+    <div class="example example-color error trans dol">
+        <div class="color-info">
+            <span class="color-class">trans</span>
+
+            <div class="color-reference">
+                <span class="sr-only">Use this color in your sass:</span>
+                <span class="is-copyable">palette(error, trans)</span>
+            </div>
+        </div>
+
+        <div class="color-meta">
+            <div class="color-rgb is-copyable"></div>
+            <div class="color-hex is-copyable"></div>
+        </div>
+    </div>
+
+    <div class="example example-color error x-trans dol">
+        <div class="color-info">
+            <span class="color-class">x-trans</span>
+
+            <div class="color-reference">
+                <span class="sr-only">Use this color in your sass:</span>
+                <span class="is-copyable">palette(error, x-trans)</span>
+            </div>
+        </div>
+
+        <div class="color-meta">
+            <div class="color-rgb is-copyable"></div>
+            <div class="color-hex is-copyable"></div>
+        </div>
+    </div>
+
+    <div class="example example-color error xx-trans dol">
+        <div class="color-info">
+            <span class="color-class">xx-trans</span>
+
+            <div class="color-reference">
+                <span class="sr-only">Use this color in your sass:</span>
+                <span class="is-copyable">palette(error, xx-trans)</span>
+            </div>
+        </div>
+
+        <div class="color-meta">
+            <div class="color-rgb is-copyable"></div>
+            <div class="color-hex is-copyable"></div>
+        </div>
+    </div>
 </div>
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "edx-pattern-library",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "authors": [
     "edX UX Team <ux@edx.org>"
   ],

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "edx-pattern-library",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "author": "edX UX Team <ux@edx.org>",
   "license": "Apache-2.0",
   "description": "The (working) Visual, UI, and Front End Styleguide for edX Apps",

diff --git a/pattern-library/sass/global/_settings.scss b/pattern-library/sass/global/_settings.scss
@@ -87,7 +87,10 @@ $palettes: (
         dark:       mix($black, $brand-primary, 33%),
         x-dark:     mix($black, $brand-primary, 66%),
         accent:     $brand-primary-accent,
-        x-accent:   saturate($brand-primary-accent, 25%)
+        x-accent:   saturate($brand-primary-accent, 25%),
+        trans:      transparentize($brand-primary, 0.50),
+        x-trans:    transparentize($brand-primary, 0.75),
+        xx-trans:   transparentize($brand-primary, 0.95)
     ),
     secondary: (
         base:       $brand-secondary,