Third variable map for generic variables, accessible with const()

Fix the ActionBar dark button backgrounds again
Fix the colorize function to produce better organized code,
 to work with consts and to properly prepend .ns-dark on root classes
Create a variables folder with only variable SCSSes for easier skin import
Removed skins folder as its files were almost empty

src/aqua.compat.scss

@@ -8,5 +8,6 @@
 $compat: true;
 
 // Aqua
-@import './scss/skins/aqua';
+@import './scss/variables/aqua';
+@import './scss/index';
 

src/aqua.scss

@@ -6,5 +6,5 @@
  */
 
 // Aqua
-@import './scss/skins/aqua';
-
+@import './scss/variables/aqua';
+@import './scss/index';

src/blue.compat.scss

@@ -8,4 +8,5 @@
 $compat: true;
 
 // Blue
-@import './scss/skins/blue';
+@import './scss/variables/blue';
+@import './scss/index';

src/blue.scss

@@ -6,4 +6,5 @@
  */
 
 // Blue
-@import './scss/skins/blue';
+@import './scss/variables/blue';
+@import './scss/index';

src/brown.compat.scss

@@ -8,4 +8,5 @@
 $compat: true;
 
 // Brown
-@import './scss/skins/brown';
+@import './scss/variables/brown';
+@import './scss/index';

src/brown.scss

@@ -6,4 +6,5 @@
  */
 
 // Brown
-@import './scss/skins/brown';
+@import './scss/variables/brown';
+@import './scss/index';

src/forest.compat.scss

@@ -8,4 +8,5 @@
 $compat: true;
 
 // Forest
-@import './scss/skins/forest';
+@import './scss/variables/forest';
+@import './scss/index';

src/forest.scss

@@ -6,4 +6,5 @@
  */
 
 // Forest
-@import './scss/skins/forest';
+@import './scss/variables/forest';
+@import './scss/index';

src/grey.compat.scss

@@ -8,4 +8,5 @@
 $compat: true;
 
 // Grey
-@import './scss/skins/grey';
+@import './scss/variables/grey';
+@import './scss/index';

src/grey.scss

@@ -6,4 +6,5 @@
  */
 
 // Grey
-@import './scss/skins/grey';
+@import './scss/variables/grey';
+@import './scss/index';

src/lemon.compat.scss

@@ -8,4 +8,5 @@
 $compat: true;
 
 // Lemon
-@import './scss/skins/lemon';
+@import './scss/variables/lemon';
+@import './scss/index';

src/lemon.scss

@@ -6,4 +6,5 @@
  */
 
 // Lemon
-@import './scss/skins/lemon';
+@import './scss/variables/lemon';
+@import './scss/index';

src/lime.compat.scss

@@ -8,4 +8,5 @@
 $compat: true;
 
 // Lime
-@import './scss/skins/lime';
+@import './scss/variables/lime';
+@import './scss/index';

src/lime.scss

@@ -6,4 +6,5 @@
  */
 
 // Lime
-@import './scss/skins/lime';
+@import './scss/variables/lime';
+@import './scss/index';

src/orange.compat.scss

@@ -8,4 +8,5 @@
 $compat: true;
 
 // Orange
-@import './scss/skins/orange';
+@import './scss/variables/orange';
+@import './scss/index';

src/orange.scss

@@ -6,4 +6,5 @@
  */
 
 // Orange
-@import './scss/skins/orange';
+@import './scss/variables/orange';
+@import './scss/index';

src/purple.compat.scss

@@ -8,4 +8,5 @@
 $compat: true;
 
 // Purple
-@import './scss/skins/purple';
+@import './scss/variables/purple';
+@import './scss/index';

src/purple.scss

@@ -6,4 +6,5 @@
  */
 
 // Purple
-@import './scss/skins/purple';
+@import './scss/variables/purple';
+@import './scss/index';

src/ruby.compat.scss

@@ -8,4 +8,5 @@
 $compat: true;
 
 // Ruby
-@import './scss/skins/ruby';
+@import './scss/variables/ruby';
+@import './scss/index';

src/ruby.scss

@@ -6,4 +6,5 @@
  */
 
 // Ruby
-@import './scss/skins/ruby';
+@import './scss/variables/ruby';
+@import './scss/index';

src/scss/core/_colors.scss

@@ -1,9 +1,53 @@
+// Constants
+
+$constants: (
+    black: $black,
+    white: $white,
+    grey: $grey,
+    grey-background: $grey-background,
+    charcoal: $charcoal,
+    transparent: transparent,
+
+    // accent varieties
+    aqua: $aqua,
+    blue: $blue,
+    brown: $brown,
+    forest: $forest,
+    grey-dark: $grey-dark,
+    purple: $purple,
+    lemon: $lemon,
+    lime: $lime,
+    orange: $orange,
+    ruby: $ruby,
+    sky: $sky,
+
+    error: $error,
+
+    // Buttons
+    btn-color-secondary: $btn-color-secondary,
+    background-alt-10: $background-alt-10,
+    btn-color-disabled: $btn-color-disabled,
+    btn-font-size: $btn-font-size,
+    btn-min-width: $btn-min-width,
+    btn-height: $btn-height,
+    btn-radius: $btn-radius,
+    btn-padding-x: $btn-padding-x,
+    btn-padding-y: $btn-padding-y,
+    btn-margin-x: $btn-margin-x,
+    btn-margin-y: $btn-margin-y,
+
+    // Headings
+    headings-margin-bottom: $headings-margin-bottom,
+    headings-font-weight: $headings-font-weight,
+
+    border-radius: $border-radius
+);
+
 // Core light colors
 $light-colors: (
     primary: $primary,
     background: $background,
-    focus: $focus,
-    gray: #999
+    focus: $focus
 );
 
 @if (global_variable_exists("theme-type")) {
@@ -26,7 +70,7 @@ $light-colors: map-merge($light-colors, (
     text-color: light(primary),
     headings-color: light(primary),
 
-    tab-text-color: mix(light(gray), light(focus), 70%),
+    tab-text-color: mix(const(gray), light(focus), 70%),
 
     focus-dark: darken(light(focus), 20%),
     focus-light: lighten(light(focus), 20%),
@@ -52,8 +96,7 @@ $light-colors: map-merge($light-colors, (
 $dark-colors: (
     primary: $white,
     background: $charcoal,
-    focus: $focus,
-    gray: #999
+    focus: $focus
 );
 
 @if (global_variable_exists("bg-color")) {
@@ -97,7 +140,7 @@ $dark-colors: map-merge($dark-colors, (
     text-color: dark(primary),
     headings-color: dark(primary),
 
-    tab-text-color: mix(dark(gray), dark(focus), 70%),
+    tab-text-color: mix(const(gray), dark(focus), 70%),
 
     focus-dark: lighten(dark(focus), 20%),
     focus-light: lighten(dark(focus), 40%),

src/scss/mixins/_colorize.scss

@@ -3,40 +3,50 @@ $root-classes: '.ns-root', '.ns-android', '.ns-ios', '.ns-phone', '.ns-tablet',
 
 @mixin enhance($name, $arguments, $colors) {
     $args: ();
+    $has-enhancer: false;
 
     $color: map-get($colors, $arguments);
+    $color: if($color != null, $color, const($arguments));
 
-    @each $arg in $arguments {
-        $color: map-get($colors, $arg);
-
-        $args: append($args, if($color != null, $color, $arg));
+    @each $enhancer in $enhancers {
+        @if str-index($name, '#{$enhancer}-') == 1 {
+            $has-enhancer: $enhancer;
+        }
     }
 
-    @each $enhancer in $enhancers {
-        @if (str-index($name, '#{$enhancer}-') == 1) {
-            $name: str-slice($name, str-length($enhancer) + 2);
-            $color: call(get-function($enhancer), $args...);
+    @if $has-enhancer {
+        @each $arg in $arguments {
+            $color: map-get($colors, $arg);
+            $const: const($arg);
+
+            $args: append($args, if($color != null, $color, if($const != null, $const, $arg)));
         }
+
+        $name: str-slice($name, str-length($has-enhancer) + 2);
+        $color: call(get-function($has-enhancer), $args...);
     }
 
     #{$name}: $color;
 }
 
 @mixin colorize($args...) {
+    $is-at-root: false;
+
+    @each $class in $root-classes {
+        @if(str-index('#{&}', $class) == 1) {
+            $is-at-root: true;
+        }
+    }
+
     @each $name, $arguments in keywords($args) {
         @include enhance($name, $arguments, $light-colors);
+    }
 
-        $is-at-root: false;
-
-        @each $class in $root-classes {
-            @if(str-index('#{&}', $class) == 1) {
-                $is-at-root: true;
-            }
-        }
+    @at-root #{if($is-at-root,
+        selector-append('.ns-dark', &),
+        selector-nest('.ns-dark', &))} {
 
-        @at-root #{if($is-at-root,
-            selector-append('.ns-dark', &),
-            selector-nest('.ns-dark', &))} {
+        @each $name, $arguments in keywords($args) {
             @include enhance($name, $arguments, $dark-colors);
         }
     }

src/scss/mixins/_utilities.scss

@@ -6,6 +6,10 @@
 
 // Functions
 
+@function const($const) {
+    @return map-get($constants, $const);
+}
+
 @function light($color) {
     @return map-get($light-colors, $color);
 }

src/scss/mixins/components/_action-bar.scss

@@ -32,7 +32,11 @@
             border-width: 0;
             text-transform: none;
             font-weight: normal;
-            background-color: transparent;
+
+            .ns-ios &,
+            .ns-ios &:active {
+                @include colorize($background-color: transparent);
+            }
 
             &:active {
                 opacity: .7;