Merge pull request #29 from treehouse/add_categories_to_leap

Add topic categories to Leap

Author: mbignell

README.md

@@ -4,7 +4,7 @@ Leap is an internal CSS library made for Treehouse. It contains immutable utilit
 ## Quick Start
 Several options are available for installing Leap into your project.
 
-* [Download the latest release](https://github.com/treehouse/project-leap/archive/v0.9.2.zip)
+* [Download the latest release](https://github.com/treehouse/project-leap/archive/v0.10.0.zip)
 
 * Clone the repo: `git clone https://github.com/treehouse/project-leap.git`
 * Install with [Bower](http://bower.io)

_sass/leap/_variables.scss

@@ -42,137 +42,52 @@ $ui-colors: (
   "success":          #24793d
 );
 
-// Topic Colors
-$topic-colors: (
-  "html": (
-    light:  #62bedb,
-    base:     #39ADD1,
-    dark:   #298fae,
-  ),
-  "css": (
-    light:  #4494ca,
-    base:     #3079AB,
-    dark:   #255d83,
-  ),
-  "js": (
-    light:  #d07e94,
-    base:     #c25975,
-    dark:   #aa3e5b,
-  ),
-  "ruby": (
-    light:  #e97d82,
-    base:     #e15258,
-    dark:   #d9272e,
-  ),
-  "business": (
-    light:  #fba98c,
-    base:     #F9845B,
-    dark:   #f75f2a,
-  ),
-  "wordpress": (
-    light:  #a6add7,
-    base:     #838CC7,
-    dark:   #606bb7,
-  ),
-  "php": (
-    light:  #9885b2,
-    base:     #7D669E,
-    dark:   #645180,
-  ),
-  "ios": (
-    light:  #78c9c4,
-    base:     #53BBB4,
-    dark:   #3e9d97,
-  ),
-  "android": (
-    light:  #80c783,
-    base:     #5cb860,
-    dark:   #449d48,
+// Category colors 
+$category-colors: (
+  "back-end": (
+    light: lighten(#008297,5%),
+    base: #008297,
+    dark: darken(#008297,5%),
+  ),
+  "data": (
+    light: lighten(#9F4B84,5%),
+    base: #9F4B84,
+    dark: darken(#9F4B84,5%),
   ),
   "design": (
-    light:  #efaf3c,
-    base:     #e59a13,
-    dark:   #b67a0f,
-  ),
-  "devtools": (
-    light:  #7f94a8,
-    base:     #637a91,
-    dark:   #4e6173,
-  ),
-  "java": (
-    light:  #38bd95,
-    base:     #2c9676,
-    dark:   #206f57,
-  ),
-  "python": (
-    light:  #f6bfd0,
-    base:     #f092b0,
-    dark:   #ea6590,
-  ),
-  "diglit": (
-    light:  #d6b1e2,
-    base:     #c38cd4,
-    dark:   #b067c6,
-  ),
-  "gamedev": (
-    light:  #29b2b6,
-    base:     #20898c,
-    dark:   #176062,
-  ),
-  "csharp": (
-    light:  #b6689c,
-    base:     #9e4d83,
-    dark:   #7c3c67,
-  ),
-  "databases": (
-    light:  #ef9557,
-    base:     #eb7728,
-    dark:   #cd5e13,
-  ),
-  "virtual-reality": (
-    light:  #b5e296,
-    base:     #95D26C,
-    dark:   #6c9e4a,
-  ),
-  "apis": (
-    light:  #c36479,
-    base:     #993c50,
-    dark:   #712e3d,
-  ),
-  "go": (
-    light:  #4371cf,
-    base:     #375eab,
-    dark:   #284683,
-  ),
-  "data-analysis": (
-    light:  #8d81ab,
-    base:   #645a7e,
-    dark:   #4f4667,
-  ),
-  "security": (
-    light:  #D1897D,
-    base:   #C66C5D,
-    dark:   #955146,
-  ),
-  "quality-assurance": (
-    light:  #A560B5,
-    base:   #80438E,
-    dark:   #60226F,
-  ),
-  "machine-learning": (
-    light:  #459F7F,
-    base:   #2D6853,
-    dark:   #214d3d,
-  ),
-  "learning-resources": (
-    light:  #569CAD,
-    base:   #38798A,
-    dark:   #19596A,
+    light: lighten(#4a4290,5%),
+    base: #4a4290,
+    dark: darken(#4a4290,5%),
+  ),
+  "experimental": (
+    light: lighten(#733a88,5%),
+    base: #733a88,
+    dark: darken(#733a88,5%),
+  ),
+  "front-end": (
+    light: lighten(#3659a2,5%),
+    base: #3659a2,
+    dark: darken(#3659a2,5%),
+  ),
+  "fundamentals": (
+    light: lighten(#9b3b5a,5%),
+    base: #9b3b5a,
+    dark: darken(#9b3b5a,5%),
+  ),
+  "mobile": (
+    light: lighten(#30826C,5%),
+    base: #30826C,
+    dark: darken(#30826C,5%),
+  ),
+  "internal": (
+    light: lighten(#55616c,5%),
+    base: #55616c,
+    dark: darken(#55616c,5%),
   ),
   "undefined": (
-    light:  #8c959d,
-    base:   #717b85,
-    dark:   #5a6269,
+    light: lighten(#55616c,5%),
+    base: #55616c,
+    dark: darken(#55616c,5%),
   )
 );
 

_sass/leap/atoms/_button.sass

@@ -203,28 +203,28 @@
   // Extra Large button classes
   +button(xl, min-width $xl)
 
-  // Topic color buttons
-  @each $topic, $name in $topic-colors
-    &--topic-#{$topic}
-      border-color: topic-color(#{$topic}, base) !important
-      color: topic-color(#{$topic}, base) !important
+  @each $category, $name in $category-colors
+    &--category-#{$category}
+      border-color: category-color(#{$category}, base) !important
+      color: category-color(#{$category}, base) !important
       svg
-        fill: topic-color(#{$topic}, base) !important
+        fill: category-color(#{$category}, base) !important
       +selected
-        border-color: darken(topic-color(#{$topic}, base), 10%) !important
-        color: darken(topic-color(#{$topic}, base), 10%) !important
+        border-color: darken(category-color(#{$category}, base), 10%) !important
+        color: darken(category-color(#{$category}, base), 10%) !important
         svg
-          fill: darken(topic-color(#{$topic}, base), 10%) !important
+          fill: darken(category-color(#{$category}, base), 10%) !important
       &.button--primary
-        background-color: topic-color(#{$topic}, base) !important
-        border-color: topic-color(#{$topic}, base) !important
+        background-color: category-color(#{$category}, base) !important
+        border-color: category-color(#{$category}, base) !important
         color: #fff !important
         +selected
-          background-color: darken(topic-color(#{$topic}, base), 10%) !important
-          border-color: darken(topic-color(#{$topic}, base), 10%) !important
+          background-color: darken(category-color(#{$category}, base), 10%) !important
+          border-color: darken(category-color(#{$category}, base), 10%) !important
           svg
             fill: #fff !important
 
+
   // Split Buttons
   .split-button &
     float: left

_sass/leap/atoms/_color.sass

@@ -100,10 +100,8 @@ $properties: fill stroke color border-color background-color
       .text-#{$property}-#{$color-name}
         #{$property}: text-color($color-name) !important
 
-
-
-// Iterate through topic-colors map to create colors for classes
-@each $color-name, $color in $topic-colors
+// Iterate through category-colors map to create colors for classes
+@each $color-name, $color in $category-colors
   @each $color-value, $color-hex in $color
 
     // Iterate through properties var to create properties for classes
@@ -117,11 +115,11 @@ $properties: fill stroke color border-color background-color
       //
       // Else just use the regular property name
       @if $property == background-color
-        .topic-bg-#{$color-name}-#{$color-value}
+        .category-bg-#{$color-name}-#{$color-value}
           #{$property}: map-get($color, $color-value) !important
       @else if $property == border-color
-        .topic-border-#{$color-name}-#{$color-value}
+        .category-border-#{$color-name}-#{$color-value}
           #{$property}: map-get($color, $color-value) !important
       @else
-        .topic-#{$property}-#{$color-name}-#{$color-value}
+        .category-#{$property}-#{$color-name}-#{$color-value}
           #{$property}: map-get($color, $color-value) !important

_sass/leap/functions/_all.sass

@@ -6,5 +6,5 @@
 @import ui-color
 @import text-color
 @import gray-color
-@import topic-color
+@import category-color
 @import brand-color

_sass/leap/functions/_category-color.sass

@@ -0,0 +1,2 @@
+@function category-color($key, $value) 
+  @return map-get(map-get($category-colors, #{$key}), #{$value})

_sass/leap/functions/_topic-color.sass

@@ -104,13 +104,13 @@ body
           color: rgba(#fff, 0.5)
           font-family: Helvetica, Arial, sans-serif
         &.topic-bg-python-lightest
-          color: topic-color(python, base)
+          color: category-color(back-end, base)
           em
-            color: topic-color(python, lighter)
+            color: category-color(back-end, lighter)
         &.topic-bg-diglit-lightest
-          color: topic-color(diglit, base)
+          color: category-color(fundamentals, base)
           em
-            color: topic-color(diglit, lighter)
+            color: category-color(fundamentals, lighter)
         &.bg-gray,
         &.bg-gray-light,
         &.bg-gray-lighter
@@ -127,6 +127,7 @@ body
           color: text-color(dark)
         em
           color: text-color(light)
+  &-colors-category,
   &-colors-topic,
   &-colors-gray,
   &-colors-text

_sass/styleguide/_theme.sass

@@ -158,48 +158,48 @@ <h2 id="Inline" class="m-b-1-xs" id="disabled">Inline Buttons</h2>
 
 
 
-  <h2 id="Topics" class="m-b-1-xs" id="topic-color-button">Topic Color Buttons</h2>
-  <p class="m-b-3-xs">Each button supports the full array of topic colors by adding the name of the topic to the class. Use classes like, <code>button--topic-css</code>, in conjunction with any other button class combo to set it as a topic color. By default, this will effect the border and text color of the button. To use the primary button style with topic colors apply the topic color class in conjunction with the <code>button--primary</code> class.</p>
+  <h2 id="Categories" class="m-b-1-xs" id="category-color-button">Category Color Buttons</h2>
+  <p class="m-b-3-xs">Each button supports the full array of topic colors by adding the name of the category to the class. Use classes like, <code>button--category-fundamentals</code>, in conjunction with any other button class combo to set it as a category color. By default, this will effect the border and text color of the button. To use the primary button style with topic colors apply the category color class in conjunction with the <code>button--primary</code> class.</p>
   <div class="m-b-05-xs">
-    <a class="m-b-05-xs button button--topic-html">HTML</a>
-    <a class="m-b-05-xs button button--topic-css">CSS</a>
-    <a class="m-b-05-xs button button--topic-java">Java</a>
-    <a class="m-b-05-xs button button--topic-python">Python</a>
-    <a class="m-b-05-xs button button--topic-php">PHP</a>
-    <a class="m-b-05-xs button button--topic-android">Android</a>
-    <a class="m-b-05-xs button button--topic-ios">iOS</a>
-    <a class="m-b-05-xs button button--topic-diglit">Digital Literacy</a>
+    <a class="m-b-05-xs button button button--category-fundamentals">Fundamentals</a>
+    <a class="m-b-05-xs button button button--category-front-end">Front End</a>
+    <a class="m-b-05-xs button button button--category-back-end">Back End</a>
+    <a class="m-b-05-xs button button button--category-data">Data</a>
+    <a class="m-b-05-xs button button button--category-design">Design</a>
+    <a class="m-b-05-xs button button button--category-mobile">Mobile</a>
+    <a class="m-b-05-xs button button button--category-experimental">Experimental</a>
+    <a class="m-b-05-xs button button button--category-undefined">Undefined</a>
   </div>
   <div>
-    <a class="m-b-05-xs button button--primary button--topic-html">HTML</a>
-    <a class="m-b-05-xs button button--primary button--topic-css">CSS</a>
-    <a class="m-b-05-xs button button--primary button--topic-java">Java</a>
-    <a class="m-b-05-xs button button--primary button--topic-python">Python</a>
-    <a class="m-b-05-xs button button--primary button--topic-php">PHP</a>
-    <a class="m-b-05-xs button button--primary button--topic-android">Android</a>
-    <a class="m-b-05-xs button button--primary button--topic-ios">iOS</a>
-    <a class="m-b-05-xs button button--primary button--topic-diglit">Digital Literacy</a>
+    <a class="m-b-05-xs button button--primary button--category-fundamentals">Fundamentals</a>
+    <a class="m-b-05-xs button button--primary button--category-front-end">Front End</a>
+    <a class="m-b-05-xs button button--primary button--category-back-end">Back End</a>
+    <a class="m-b-05-xs button button--primary button--category-data">Data</a>
+    <a class="m-b-05-xs button button--primary button--category-design">Design</a>
+    <a class="m-b-05-xs button button--primary button--category-mobile">Mobile</a>
+    <a class="m-b-05-xs button button--primary button--category-experimental">Experimental</a>
+    <a class="m-b-05-xs button button--primary button--category-undefined">Undefined</a>
   </div>
   <div class="guide-code m-b-4-xs">
 <pre><code class="language-html">&lt;div class="m-b-05-xs"&gt;
-  &lt;a class="m-b-05-xs button button--topic-html"&gt;HTML&lt;/a&gt;
-  &lt;a class="m-b-05-xs button button--topic-css"&gt;CSS&lt;/a&gt;
-  &lt;a class="m-b-05-xs button button--topic-java"&gt;Java&lt;/a&gt;
-  &lt;a class="m-b-05-xs button button--topic-python"&gt;Python&lt;/a&gt;
-  &lt;a class="m-b-05-xs button button--topic-php"&gt;PHP&lt;/a&gt;
-  &lt;a class="m-b-05-xs button button--topic-android"&gt;Android&lt;/a&gt;
-  &lt;a class="m-b-05-xs button button--topic-ios"&gt;iOS&lt;/a&gt;
-  &lt;a class="m-b-05-xs button button--topic-diglit"&gt;Digital Literacy&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--category-fundamentals"&gt;Fundamentals&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--category-front-end"&gt;Front End&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--category-back-end"&gt;Back End&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--category-data"&gt;Data&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--category-design"&gt;Design&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--category-mobile"&gt;Mobile&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--category-experimental"&gt;Experimental&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--category-undefined"&gt;Undefined&lt;/a&gt;
 &lt;/div&gt;
 &lt;div&gt;
-  &lt;a class="m-b-05-xs button button--primary button--topic-html"&gt;HTML&lt;/a&gt;
-  &lt;a class="m-b-05-xs button button--primary button--topic-css"&gt;CSS&lt;/a&gt;
-  &lt;a class="m-b-05-xs button button--primary button--topic-java"&gt;Java&lt;/a&gt;
-  &lt;a class="m-b-05-xs button button--primary button--topic-python"&gt;Python&lt;/a&gt;
-  &lt;a class="m-b-05-xs button button--primary button--topic-php"&gt;PHP&lt;/a&gt;
-  &lt;a class="m-b-05-xs button button--primary button--topic-android"&gt;Android&lt;/a&gt;
-  &lt;a class="m-b-05-xs button button--primary button--topic-ios"&gt;iOS&lt;/a&gt;
-  &lt;a class="m-b-05-xs button button--primary button--topic-diglit"&gt;Digital Literacy&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--primary button--category-fundaments"&gt;Fundamentals&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--primary button--category-front-end"&gt;Front End&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--primary button--category-back-end"&gt;Back End&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--primary button--category-data"&gt;Data&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--primary button--category-design"&gt;Design&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--primary button--category-mobile"&gt;Mobile&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--primary button--category-experimental"&gt;Experimental&lt;/a&gt;
+  &lt;a class="m-b-05-xs button button--primary button--category-undefined"&gt;Undefined&lt;/a&gt;
 &lt;/div&gt;</code></pre>
   </div>