Refactor: colors

- Added theme colors to all colors
- Converted colors list to map
- Refactored the usage of colors

package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-freedom",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "CSS FreeDOM - a light-weight simplified and improved version of Bootstrap.",
   "main": "index.js",
   "dependencies": {

scss/partials/_block.scss

@@ -23,11 +23,12 @@
         }
     }
 
-    @each $prop in $all-colors {
+    @each $prop,
+    $code in $all-colors {
 
         &-#{$prop},
         &-#{$prop}-hover:hover {
-            background-color: $prop !important;
+            background-color: $code !important;
         }
 
     }
@@ -80,11 +81,12 @@ $maxWidth in $breakpoints {
                     }
                 }
 
-                @each $prop in $all-colors {
+                @each $prop,
+                $code in $all-colors {
 
                     &-#{$prop},
                     &-#{$prop}-hover:hover {
-                        background-color: $prop !important;
+                        background-color: $code !important;
                     }
 
                 }

scss/partials/_border.scss

@@ -40,9 +40,10 @@
         }
     }
 
-    @each $prop in $all-colors {
+    @each $prop,
+    $code in $all-colors {
         &-#{$prop} {
-            border-color: $prop !important;
+            border-color: $code !important;
         }
     }
 
@@ -74,7 +75,8 @@
 }
 
 @each $breakpoint,
-$minWidth, $maxWidth in $breakpoints {
+$minWidth,
+$maxWidth in $breakpoints {
     @media screen and (min-width: $minWidth) and (max-width: $maxWidth) {
 
         /*Borders*/
@@ -129,9 +131,10 @@ $minWidth, $maxWidth in $breakpoints {
 
             &-#{$breakpoint} {
 
-                @each $prop in $all-colors {
+                @each $prop,
+                $code in $all-colors {
                     &-#{$prop} {
-                        border-color: $prop !important;
+                        border-color: $code !important;
                     }
                 }
 

scss/partials/_colors.scss

@@ -1,141 +1,150 @@
-$all-colors: aliceblue,
-antiquewhite,
-aqua,
-aquamarine,
-azure,
-beige,
-bisque,
-black,
-blanchedalmond,
-blue,
-blueviolet,
-brown,
-burlywood,
-cadetblue,
-chartreuse,
-chocolate,
-coral,
-cornflowerblue,
-cornsilk,
-crimson,
-cyan,
-darkblue,
-darkcyan,
-darkgoldenrod,
-darkgray,
-darkgreen,
-darkkhaki,
-darkmagenta,
-darkolivegreen,
-darkorange,
-darkorchid,
-darkred,
-darksalmon,
-darkseagreen,
-darkslateblue,
-darkslategray,
-darkturquoise,
-darkviolet,
-deeppink,
-deepskyblue,
-dimgray,
-dodgerblue,
-firebrick,
-floralwhite,
-forestgreen,
-fuchsia,
-gainsboro,
-ghostwhite,
-gold,
-goldenrod,
-gray,
-grey,
-green,
-greenyellow,
-honeydew,
-hotpink,
-indianred,
-indigo,
-ivory,
-khaki,
-lavender,
-lavenderblush,
-lawngreen,
-lemonchiffon,
-lightblue,
-lightcoral,
-lightcyan,
-lightgoldenrodyellow,
-lightgrey,
-lightgreen,
-lightpink,
-lightsalmon,
-lightseagreen,
-lightskyblue,
-lightslategray,
-lightsteelblue,
-lightyellow,
-lime,
-limegreen,
-linen,
-magenta,
-maroon,
-mediumaquamarine,
-mediumblue,
-mediumorchid,
-mediumpurple,
-mediumseagreen,
-mediumslateblue,
-mediumspringgreen,
-mediumturquoise,
-mediumvioletred,
-midnightblue,
-mintcream,
-mistyrose,
-moccasin,
-navajowhite,
-navy,
-oldlace,
-olive,
-olivedrab,
-orange,
-orangered,
-orchid,
-palegoldenrod,
-palegreen,
-paleturquoise,
-palevioletred,
-papayawhip,
-peachpuff,
-peru,
-pink,
-plum,
-powderblue,
-purple,
-red,
-rosybrown,
-royalblue,
-saddlebrown,
-salmon,
-sandybrown,
-seagreen,
-seashell,
-sienna,
-silver,
-skyblue,
-slateblue,
-slategray,
-snow,
-springgreen,
-steelblue,
-tan,
-teal,
-thistle,
-tomato,
-turquoise,
-violet,
-wheat,
-white,
-whitesmoke,
-yellow,
-yellowgreen;
+$all-colors:( // Theme Colors:
+    light:#dee2e6,
+    secondary:#6c757d,
+    danger:#dc3545,
+    success:#27e178,
+    info:#279EDA,
+    warning:#ffc107,
+    primary: #34435E,
+    // Browser Colors:
+    "aliceblue":aliceblue,
+    "antiquewhite":antiquewhite,
+    "aqua":aqua,
+    "aquamarine":aquamarine,
+    "azure":azure,
+    "beige":beige,
+    "bisque":bisque,
+    "black":black,
+    "blanchedalmond":blanchedalmond,
+    "blue":blue,
+    "blueviolet":blueviolet,
+    "brown":brown,
+    "burlywood":burlywood,
+    "cadetblue":cadetblue,
+    "chartreuse":chartreuse,
+    "chocolate":chocolate,
+    "coral":coral,
+    "cornflowerblue":cornflowerblue,
+    "cornsilk":cornsilk,
+    "crimson":crimson,
+    "cyan":cyan,
+    "darkblue":darkblue,
+    "darkcyan":darkcyan,
+    "darkgoldenrod":darkgoldenrod,
+    "darkgray":darkgray,
+    "darkgreen":darkgreen,
+    "darkkhaki":darkkhaki,
+    "darkmagenta":darkmagenta,
+    "darkolivegreen":darkolivegreen,
+    "darkorange":darkorange,
+    "darkorchid":darkorchid,
+    "darkred":darkred,
+    "darksalmon":darksalmon,
+    "darkseagreen":darkseagreen,
+    "darkslateblue":darkslateblue,
+    "darkslategray":darkslategray,
+    "darkturquoise":darkturquoise,
+    "darkviolet":darkviolet,
+    "deeppink":deeppink,
+    "deepskyblue":deepskyblue,
+    "dimgray":dimgray,
+    "dodgerblue":dodgerblue,
+    "firebrick":firebrick,
+    "floralwhite":floralwhite,
+    "forestgreen":forestgreen,
+    "fuchsia":fuchsia,
+    "gainsboro":gainsboro,
+    "ghostwhite":ghostwhite,
+    "gold":gold,
+    "goldenrod":goldenrod,
+    "gray":gray,
+    "grey":grey,
+    "green":green,
+    "greenyellow":greenyellow,
+    "honeydew":honeydew,
+    "hotpink":hotpink,
+    "indianred":indianred,
+    "indigo":indigo,
+    "ivory":ivory,
+    "khaki":khaki,
+    "lavender":lavender,
+    "lavenderblush":lavenderblush,
+    "lawngreen":lawngreen,
+    "lemonchiffon":lemonchiffon,
+    "lightblue":lightblue,
+    "lightcoral":lightcoral,
+    "lightcyan":lightcyan,
+    "lightgoldenrodyellow":lightgoldenrodyellow,
+    "lightgrey":lightgrey,
+    "lightgreen":lightgreen,
+    "lightpink":lightpink,
+    "lightsalmon":lightsalmon,
+    "lightseagreen":lightseagreen,
+    "lightskyblue":lightskyblue,
+    "lightslategray":lightslategray,
+    "lightsteelblue":lightsteelblue,
+    "lightyellow":lightyellow,
+    "lime":lime,
+    "limegreen":limegreen,
+    "linen":linen,
+    "magenta":magenta,
+    "maroon":maroon,
+    "mediumaquamarine":mediumaquamarine,
+    "mediumblue":mediumblue,
+    "mediumorchid":mediumorchid,
+    "mediumpurple":mediumpurple,
+    "mediumseagreen":mediumseagreen,
+    "mediumslateblue":mediumslateblue,
+    "mediumspringgreen":mediumspringgreen,
+    "mediumturquoise":mediumturquoise,
+    "mediumvioletred":mediumvioletred,
+    "midnightblue":midnightblue,
+    "mintcream":mintcream,
+    "mistyrose":mistyrose,
+    "moccasin":moccasin,
+    "navajowhite":navajowhite,
+    "navy":navy,
+    "oldlace":oldlace,
+    "olive":olive,
+    "olivedrab":olivedrab,
+    "orange":orange,
+    "orangered":orangered,
+    "orchid":orchid,
+    "palegoldenrod":palegoldenrod,
+    "palegreen":palegreen,
+    "paleturquoise":paleturquoise,
+    "palevioletred":palevioletred,
+    "papayawhip":papayawhip,
+    "peachpuff":peachpuff,
+    "peru":peru,
+    "pink":pink,
+    "plum":plum,
+    "powderblue":powderblue,
+    "purple":purple,
+    "red":red,
+    "rosybrown":rosybrown,
+    "royalblue":royalblue,
+    "saddlebrown":saddlebrown,
+    "salmon":salmon,
+    "sandybrown":sandybrown,
+    "seagreen":seagreen,
+    "seashell":seashell,
+    "sienna":sienna,
+    "silver":silver,
+    "skyblue":skyblue,
+    "slateblue":slateblue,
+    "slategray":slategray,
+    "snow":snow,
+    "springgreen":springgreen,
+    "steelblue":steelblue,
+    "tan":tan,
+    "teal":teal,
+    "thistle":thistle,
+    "tomato":tomato,
+    "turquoise":turquoise,
+    "violet":violet,
+    "wheat":wheat,
+    "white":white,
+    "whitesmoke":whitesmoke,
+    "yellow":yellow,
+    "yellowgreen":yellowgreen);

scss/partials/_text.scss

@@ -153,7 +153,7 @@
 
         &-#{$prop},
         &-#{$prop}-hover:hover {
-            color: $prop !important;
+            color: $code !important;
         }
     }
 
@@ -349,7 +349,7 @@ $maxWidth in $breakpoints {
 
                     &-#{$prop},
                     &-#{$prop}-hover:hover {
-                        color: $prop !important;
+                        color: $code !important;
                     }
                 }