chore: organize imports

build/data-uri.template

@@ -1,5 +1,4 @@
-@import '../../mixins/import-once';
-@import '../../mixins/data-uri';
+@import '../../mixins/core/all';
 
 @include exports('<FILENAME>') {
   @include register-data-uri('<FILENAME>', 'data:<MIME>;base64,<BASE64>')

src/_variables.scss

@@ -26,3 +26,167 @@ $series-f: #aa46be !default;
 
 $base-font-size: 14px !default;
 $base-font-family: inherit !default;
+
+
+/////////////////////////////////////////////////
+
+
+$font-size: 14px !default;
+$font-family: inherit !default;
+
+
+$spacer: 1em !default;
+
+$padding-x: 14px !default;
+$padding-y: 7px !default;
+
+$border-radius: 2px !default;
+
+
+$accent: #ff6358 !default;
+$accent-contrast: #ffffff !default;
+
+$text-color: #656565 !default;
+$bg-color: #ffffff !default;
+$border-color: darken($bg-color, 3%) !default;
+
+$base-text: #656565 !default;
+$base-bg: #f6f6f6 !default;
+$base-border: darken($base-bg, 3%) !default;
+
+$hover-text: #656565 !default;
+$hover-bg: #ededed !default;
+$hover-border: darken($hover-bg, 3%) !default;
+
+$selected-text: $accent-contrast !default;
+$selected-bg: $accent !default;
+$selected-border: darken($selected-bg, 3%) !default;
+
+$transition: background-color .2s ease !default;
+
+$error: #f31700 !default;
+$warning: #ffc000 !default;
+$success: #37b400 !default;
+$info: #0058e9 !default;
+
+$series-a: #ff6358 !default;
+$series-b: #ffd246 !default;
+$series-c: #78d237 !default;
+$series-d: #28b4c8 !default;
+$series-e: #2d73f5 !default;
+$series-f: #aa46be !default;
+
+
+// Widget
+$widget-text: $text-color !default;
+$widget-bg: $bg-color !default;
+$widget-border: darken( $widget-bg, 2 ) !default;
+
+
+// Panel
+$panel-text: $widget-text !default;
+$panel-bg: $widget-bg !default;
+$panel-border: darken( $panel-bg, 2 ) !default;
+
+
+// Popup
+$popup-text: $widget-text !default;
+$popup-bg: $widget-bg !default;
+$popup-border: darken( $popup-bg, 2 ) !default;
+
+
+// Header
+$header-text: $base-text !default;
+$header-bg: $base-bg !default;
+$header-border: darken( $header-bg, 2 ) !default;
+$header-gradient: null !default;
+
+$header-hover-text: $hover-text !default;
+$header-hover-bg: $hover-bg !default;
+$header-hover-border: darken( $header-hover-bg, 2 ) !default;
+$header-hover-gradient: null !default;
+
+$header-selected-text: $selected-text !default;
+$header-selected-bg: $selected-bg !default;
+$header-selected-border: darken( $header-selected-bg, 2 ) !default;
+$header-selected-gradient: null !default;
+
+
+// Button
+$button-text: $base-text !default;
+$button-bg: $base-bg !default;
+$button-border: darken( $button-bg, 2 ) !default;
+$button-gradient: null !default;
+
+$button-hover-text: $hover-text !default;
+$button-hover-bg: $hover-bg !default;
+$button-hover-border: darken( $button-hover-bg, 2 ) !default;
+$button-hover-gradient: null !default;
+
+$button-pressed-text: $selected-text !default;
+$button-pressed-bg: $selected-bg !default;
+$button-pressed-border: darken( $button-pressed-bg, 2 ) !default;
+$button-pressed-gradient: null !default;
+
+
+// Input
+$input-text: $panel-text !default;
+$input-bg: $panel-bg !default;
+$input-border: $button-border !default;
+
+$input-hover-text: $input-text !default;
+$input-hover-bg: $input-bg !default;
+$input-hover-border: $button-hover-border !default;
+
+$input-focused-text: $input-text !default;
+$input-focused-bg: $input-bg !default;
+$input-focused-border: $button-pressed-border !default;
+
+
+// Node
+$node-text: $button-text !default;
+$node-bg: $button-bg !default;
+$node-border: darken( $node-bg, 2) !default;
+$node-gradient: null !default;
+
+$node-hover-text: $button-hover-text !default;
+$node-hover-bg: $button-hover-bg !default;
+$node-hover-border: darken( $node-hover-bg, 2 ) !default;
+$node-hover-gradient: null !default;
+
+$node-selected-text: $button-pressed-text !default;
+$node-selected-bg: $button-pressed-bg !default;
+$node-selected-border: darken( $node-selected-bg, 2 ) !default;
+$node-selected-gradient: null !default;
+
+
+// List
+$list-text: $node-text !default;
+$list-bg: $node-bg !default;
+
+$list-hover-text: $node-hover-text !default;
+$list-hover-bg: $node-hover-bg !default;
+
+$list-selected-text: $node-selected-text !default;
+$list-selected-bg: $node-selected-bg !default;
+
+
+// Color maps
+$widget-colors: ( $widget-text, $widget-bg, $widget-border );
+$panel-colors: ( $panel-text, $panel-bg, $panel-border );
+$popup-colors: ( $popup-text, $popup-bg, $popup-border );
+$header-colors: ( $header-text, $header-bg, $header-border );
+$header-hover-colors: ( $header-hover-text, $header-hover-bg, $header-hover-border );
+$header-selected-colors: ( $header-selected-text, $header-selected-bg, $header-selected-border );
+$button-colors: ( $button-text, $button-bg, $button-border );
+$button-hover-colors: ( $button-hover-text, $button-hover-bg, $button-hover-border );
+$button-pressed-colors: ( $button-pressed-text, $button-pressed-bg, $button-pressed-border );
+$input-colors: ( $input-text, $input-bg, $input-border );
+$input-hover-colors: ( $input-hover-text, $input-hover-bg, $input-hover-border );
+$input-focused-colors: ( $input-focused-text, $input-focused-bg, $input-focused-border );
+$node-colors: ( $node-text, $node-bg, $node-border );
+$node-hover-colors: ( $node-hover-text, $node-hover-bg, $node-hover-border );
+$node-selected-colors: ( $node-selected-text, $node-selected-bg, $node-selected-border );
+$list-colors: ( $list-text, $list-bg, null );
+$list-hover-colors: ( $list-hover-text, $list-hover-bg, null );
+$list-selected-colors: ( $list-selected-text, $list-selected-bg, null );

src/action-buttons/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/animation/main.scss

@@ -1,3 +1,3 @@
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'container';
 @import 'effect';

src/button/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/calendar/_layout.scss

@@ -1,49 +1,110 @@
 @import '../base/layout';
 @import '../icons/main';
 
+$calendar-cell-padding-y: .25rem !default;
+$calendar-cell-padding-x: .25rem !default;
+$calendar-line-height: 1.25 !default;
+
 @include exports('calendar/layout') {
 
+    // Base
     .k-calendar {
-    position: relative;
-    display: inline-block;
         width: 16.917em;
+        position: relative;
+        display: inline-flex;
+        flex-direction: column;
         overflow: hidden;
+
+
+        // Common
+        .k-link {
+            padding: $calendar-cell-padding-y $calendar-cell-padding-x;
+            color: inherit;
+            line-height: $calendar-line-height;
+            text-decoration: none;
+            display: block;
+        }
+
+        th {
+            border-width: 0 0 1px;
+            border-style: solid;
+            padding: $calendar-cell-padding-y $calendar-cell-padding-x;
+            font-weight: normal;
+            cursor: default;
+        }
+
+        td {
             border-width: 1px;
             border-style: solid;
-
-    td,
-    .k-link {
-        text-decoration: none;
+            cursor: pointer;
         }
 
-    .k-action-link {
-        text-decoration: underline;
-    }
+
+        // Header / footer
+        & {
 
             .k-header,
             .k-footer {
-        position: relative;
+                padding: $calendar-cell-padding-y;
                 text-align: center;
+                display: flex;
+                flex-direction: row;
+                position: relative;
+
+                .k-link {
+                    @include border-radius( $border-radius );
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: center;
+                }
             }
 
+            // Footer
+            .k-footer {
+                clear: both;
+            }
+
+
+            // Previous / next
             .k-nav-prev,
             .k-nav-next {
-        position: absolute;
-        top: .16666em;
-        line-height: 1.8333em;
-        height: 1.8333em;
+                padding: $calendar-cell-padding-y;
+                width: $calendar-line-height * 1em;
+                height: $calendar-line-height * 1em;
+                box-sizing: content-box;
+            }
+            .k-nav-prev { left: $calendar-cell-padding-y; }
+            .k-nav-next { right: $calendar-cell-padding-y; }
+
+
+            // Fast navigation
+            .k-nav-fast {
+                margin: 0 $calendar-cell-padding-y;
+                flex: 1;
             }
 
-    .k-nav-prev { left: 1%; }
-    .k-nav-next { right: 1%; }
+
+            // Today
+            .k-nav-today {
+                flex: 1;
+            }
+
+        }
+
+
+        // Content
+        & {
 
             .k-content {
-        border-spacing: 0;
+                margin: 0;
                 width: 100%;
                 height: 14.167em;
                 border-width: 0;
-        margin: 0;
+                border-spacing: 0;
+                border-collapse: separate;
                 table-layout: fixed;
+                float: left;
                 outline: 0;
             }
 
@@ -52,77 +113,43 @@
                 text-align: right;
             }
 
+            .k-content td {
+                @include border-radius( $border-radius );
+                border-color: transparent;
+            }
+
             .k-animation-container .k-content {
                 height: 100%;
             }
 
-    .k-nav-fast {
-        display: inline-block;
-        width: 75%;
-        height: 1.8333em;
-        line-height: 1.8333em;
-        margin: .16666em -.08333em .3333em 0;
-    }
-
-    .k-header {
-        .k-icon {
-            vertical-align: middle;
-        }
-
-        .k-link.k-nav-prev,
-        .k-link.k-nav-next {
-            height: 1.8333em;
-            width: 1.8333em;
-        }
-    }
-
-    th {
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-        padding: .4em .45em .4em .1em;
-        font-weight: normal;
-        cursor: default;
-    }
-
-    td {
-        padding: .08333em;
-        cursor: pointer;
-    }
-
-    .k-state-focus {
-        border-style: dotted;
-        border-width: .08333em;
-        padding: 0;
-    }
-
             .k-content .k-link {
-        display: block;
                 overflow: hidden;
-        min-height: 1.8333em;
-        line-height: 1.8333em;
-        padding: 0 .45em 0 .1em;
             }
 
+            .k-weekend,
+            .k-other-month {
+                opacity: .6;
+            }
+        }
+
+
+        // Meta view
         .k-meta-view .k-link {
-        padding: .25em 0 .3em;
             text-align: center;
         }
 
-    .k-footer {
-        clear: both;
-
-        .k-nav-today,
-        > .k-state-disabled {
-            display: block;
-            height: 100%;
-            padding: .5em 0;
-        }
     }
 
-    .k-nav-today:hover {
-        text-decoration: underline;
+
+
+
+    // Calendar container
+    .k-calendar-container {
+        padding: 0;
+
+        .k-calendar {
+            border-width: 0;
         }
     }
 
 }
-

src/calendar/_theme.scss

@@ -1,7 +1,6 @@
 @import '../base/states';
 @import '../animation/main';
 @import './layout';
-@import '../mixins/blend-modes';
 
 @include exports('calendar/theme') {
 

src/calendar/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/charts/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/dialog/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/dropdowns/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/example/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/grid/_theme.scss

@@ -1,6 +1,5 @@
 @import '../base/states';
 @import './layout';
-@import '../mixins/blend-modes';
 
 $grid-header-color: $accent !default;
 $grid-color: $normal-text-color !default;

src/grid/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/icons/main.scss

@@ -1,4 +1,4 @@
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import './font/KendoUIGlyphs';
 $icon-size: 16px !default;
 

src/mixins/_all.scss

@@ -1,12 +1,13 @@
 // Core
-@import "import-once";
-@import "placeholder-selectors";
+@import "core/import-once";
+@import "core/placeholder-selectors";
+@import "core/data-uri";
 
 
 // Utils
-@import "utils/all";
-@import "decoration";
-@import "compact";
+@import "utils/decoration";
+@import "utils/compact";
+@import "utils/blend-modes";
 
 
 // Appearance

src/mixins/_blend-modes.scss

@@ -1,533 +0,0 @@
-@import '../mixins/import-once';
-
-    // SCSS blend modes, https://github.k-com/heygrady/scss-blend-modes
-
-    // Import the Compass Plugin
-    //--------------------------------
-    // Normal
-    //--------------------------------
-    @function blend-normal ($foreground, $background) {
-      $opacity: opacity($foreground);
-      $background-opacity: opacity($background);
-
-      // calculate opacity
-      $bm-red: red($foreground) * $opacity + red($background) * $background-opacity * (1 - $opacity);
-      $bm-green: green($foreground) * $opacity + green($background) * $background-opacity * (1 - $opacity);
-      $bm-blue: blue($foreground) * $opacity + blue($background) * $background-opacity * (1 - $opacity);
-      @return rgb($bm-red, $bm-green, $bm-blue);
-    }
-
-    //--------------------------------
-    // Multiply
-    //--------------------------------
-    @function blend-multiply ($foreground, $background) {
-      $bm-red: red($background) * red($foreground) / 255;
-      $bm-green: green($background) * green($foreground) / 255;
-      $bm-blue: blue($background) * blue($foreground) / 255;
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-
-    //--------------------------------
-    // Lighten
-    //--------------------------------
-    @function blend-lighten ($foreground, $background) {
-      $bm-red: blend-lighten-color(red($foreground), red($background));
-      $bm-green: blend-lighten-color(green($foreground), green($background));
-      $bm-blue: blend-lighten-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-    @function blend-lighten-color($foreground, $background) {
-      @if $background > $foreground {
-        $foreground: $background;
-      }
-      @return $foreground;
-    }
-
-    //--------------------------------
-    // Darken
-    //--------------------------------
-    @function blend-darken ($foreground, $background) {
-      $bm-red: blend-darken-color(red($foreground), red($background));
-      $bm-green: blend-darken-color(green($foreground), green($background));
-      $bm-blue: blend-darken-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-    @function blend-darken-color($foreground, $background) {
-      @if $background < $foreground {
-        $foreground: $background;
-      }
-      @return $foreground;
-    }
-
-    //--------------------------------
-    // Darker Color
-    //--------------------------------
-    @function blend-darkercolor ($foreground, $background) {
-      $bm-red: red($foreground);
-      $bm-green: green($foreground);
-      $bm-blue: blue($foreground);
-      $background-red: red($background);
-      $background-green: green($background);
-      $background-blue: blue($background);
-
-      @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 <= $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 {
-        $bm-red: $background-red;
-        $bm-green: $background-green;
-        $bm-blue: $background-blue;
-      }
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-
-    //--------------------------------
-    // Lighter Color
-    //--------------------------------
-    @function blend-lightercolor ($foreground, $background) {
-      $bm-red: red($foreground);
-      $bm-green: green($foreground);
-      $bm-blue: blue($foreground);
-      $background-red: red($background);
-      $background-green: green($background);
-      $background-blue: blue($background);
-
-      @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 > $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 {
-        $bm-red: $background-red;
-        $bm-green: $background-green;
-        $bm-blue: $background-blue;
-      }
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-
-    //--------------------------------
-    // Linear Dodge
-    //--------------------------------
-    @function blend-lineardodge ($foreground, $background) {
-      $bm-red: blend-lineardodge-color(red($foreground), red($background));
-      $bm-green: blend-lineardodge-color(green($foreground), green($background));
-      $bm-blue: blend-lineardodge-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-    @function blend-lineardodge-color($foreground, $background) {
-      @if $background + $foreground > 255 {
-        $foreground: 255;
-      }
-      @else {
-        $foreground: $background + $foreground;
-      }
-      @return $foreground;
-    }
-
-    //--------------------------------
-    // Linear Burn
-    //--------------------------------
-    @function blend-linearburn ($foreground, $background) {
-      $bm-red: blend-linearburn-color(red($foreground), red($background));
-      $bm-green: blend-linearburn-color(green($foreground), green($background));
-      $bm-blue: blend-linearburn-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-    @function blend-linearburn-color($foreground, $background) {
-      @if $background + $foreground < 255 {
-        $foreground: 0;
-      }
-      @else {
-        $foreground: $background + $foreground - 255;
-      }
-      @return $foreground;
-    }
-
-    //--------------------------------
-    // Difference
-    //--------------------------------
-    @function blend-difference ($foreground, $background) {
-      $bm-red: abs(red($background) - red($foreground));
-      $bm-green: abs(green($background) - green($foreground));
-      $bm-blue: abs(blue($background) - blue($foreground));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-
-    //--------------------------------
-    // Screen
-    //--------------------------------
-    @function blend-screen ($foreground, $background) {
-      $bm-red: blend-screen-color(red($foreground), red($background));
-      $bm-green: blend-screen-color(green($foreground), green($background));
-      $bm-blue: blend-screen-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-    @function blend-screen-color($foreground, $background) {
-      @return (255 - ( ( (255 - $foreground) * (255 - $background)) / 256));
-    }
-
-    //--------------------------------
-    // Exclusion
-    //--------------------------------
-    @function blend-exclusion ($foreground, $background) {
-      $bm-red: blend-exclusion-color(red($foreground), red($background));
-      $bm-green: blend-exclusion-color(green($foreground), green($background));
-      $bm-blue: blend-exclusion-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-    @function blend-exclusion-color($foreground, $background) {
-      @return $background - ($background * (2 / 255) - 1) * $foreground;
-    }
-
-    //--------------------------------
-    // Overlay
-    //--------------------------------
-    @function blend-overlay ($foreground, $background) {
-      $bm-red: blend-overlay-color(red($foreground), red($background));
-      $bm-green: blend-overlay-color(green($foreground), green($background));
-      $bm-blue: blend-overlay-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-    @function blend-overlay-color($foreground, $background) {
-      @if $background <= 255 / 2 {
-        $foreground: (2 * $background * $foreground) / 255;
-      } @else {
-        $foreground: 255 - (255 - 2 * ($background - (255 / 2))) * (255 - $foreground) / 255;
-      }
-      @return $foreground;
-    }
-
-    //--------------------------------
-    // Soft Light
-    //--------------------------------
-    @function blend-softlight ($foreground, $background) {
-      $bm-red: blend-softlight-color(red($foreground), red($background));
-      $bm-green: blend-softlight-color(green($foreground), green($background));
-      $bm-blue: blend-softlight-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-    @function blend-softlight-color($foreground, $background) {
-      @if $background < 128 {
-        $foreground: (($foreground / 2) + 64) * $background * (2 / 255);
-      } @else {
-        $foreground: 255 - (191 - ($foreground / 2)) * (255 - $background) * (2 / 255);
-      }
-      @return $foreground;
-    }
-
-    //--------------------------------
-    // Hard Light
-    //--------------------------------
-    @function blend-hardlight ($foreground, $background) {
-      $bm-red: blend-hardlight-color(red($foreground), red($background));
-      $bm-green: blend-hardlight-color(green($foreground), green($background));
-      $bm-blue: blend-hardlight-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-    @function blend-hardlight-color($foreground, $background) {
-      $tmp-blend: $foreground;
-      @if $tmp-blend < 128 {
-        $foreground: $background * $tmp-blend * (2 / 255);
-      } @else {
-        $foreground: 255 - (255-$background) * (255-$tmp-blend) * (2 / 255);
-      }
-      @return $foreground;
-    }
-
-    //--------------------------------
-    // Color Dodge
-    //--------------------------------
-    @function blend-colordodge ($foreground, $background) {
-      $bm-red: blend-colordodge-color(red($foreground), red($background));
-      $bm-green: blend-colordodge-color(green($foreground), green($background));
-      $bm-blue: blend-colordodge-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-    @function blend-colordodge-color($foreground, $background) {
-      $tmp: $background * 256 / (255 - $foreground);
-      @if $tmp > 255 or $foreground == 255 {
-        $foreground: 255;
-      } @else {
-        $foreground: $tmp;
-      }
-      @return $foreground;
-    }
-
-    //--------------------------------
-    // Color Burn
-    //--------------------------------
-    @function blend-colorburn ($foreground, $background) {
-      $bm-red: blend-colorburn-color(red($foreground), red($background));
-      $bm-green: blend-colorburn-color(green($foreground), green($background));
-      $bm-blue: blend-colorburn-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-    @function blend-colorburn-color($foreground, $background) {
-      $tmp: (255 - ((255 - $background) * 255) / $foreground);
-
-      // TODO: hacked to replicate photoshop
-      @if $foreground == 0 {
-        $foreground: 255;
-      } @elseif $tmp < 0 {
-        $foreground: 0;
-      } @else {
-        $foreground: $tmp;
-      }
-      @return $foreground;
-    }
-
-    //--------------------------------
-    // Linear Light
-    //--------------------------------
-    @function blend-linearlight ($foreground, $background) {
-      $bm-red: blend-linearlight-color(red($foreground), red($background));
-      $bm-green: blend-linearlight-color(green($foreground), green($background));
-      $bm-blue: blend-linearlight-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-    @function blend-linearlight-color($foreground, $background) {
-      @if $foreground < 128 {
-        $foreground: blend-linearburn-color($background, 2 * $foreground);
-      } @else {
-        $foreground: blend-lineardodge-color($background, 2 * ($foreground - 128));
-      }
-      @return $foreground;
-    }
-
-    //--------------------------------
-    // Vivid Light
-    //--------------------------------
-    @function blend-vividlight ($foreground, $background) {
-      $bm-red: blend-vividlight-color(red($foreground), red($background));
-      $bm-green: blend-vividlight-color(green($foreground), green($background));
-      $bm-blue: blend-vividlight-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-
-    @function blend-vividlight-color($foreground, $background) {
-      @if $foreground < 128 {
-        $foreground: blend-colorburn-color(2 * $foreground, $background);
-      } @else {
-        $foreground: blend-colordodge-color(2 * ($foreground - 128), $background);
-      }
-      @return $foreground;
-    }
-
-    //--------------------------------
-    // Pin Light
-    //--------------------------------
-    @function blend-pinlight ($foreground, $background) {
-      $bm-red:   blend-pinlight-color(red($foreground), red($background));
-      $bm-green: blend-pinlight-color(green($foreground), green($background));
-      $bm-blue:  blend-pinlight-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-
-    @function blend-pinlight-color($foreground, $background) {
-      @if $foreground < 128 {
-        $foreground: blend-darken-color($background, 2 * $foreground);
-      } @else {
-        $foreground: blend-lighten-color($background, 2 * ($foreground - 128));
-      }
-      @return $foreground;
-    }
-
-    //--------------------------------
-    // Hard Mix
-    //--------------------------------
-    @function blend-hardmix ($foreground, $background) {
-      $bm-red: blend-hardmix-color(red($foreground), red($background));
-      $bm-green: blend-hardmix-color(green($foreground), green($background));
-      $bm-blue: blend-hardmix-color(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-
-    @function blend-hardmix-color($foreground, $background) {
-      $tmp: blend-vividlight-color($foreground, $background);
-      @if $tmp < 128 {
-        $foreground: 0;
-      } @else {
-        $foreground: 255;
-      }
-      @return $foreground;
-    }
-
-
-    // Unique to Photoshop
-
-    //--------------------------------
-    // Color Blend
-    //--------------------------------
-    @function blend-colorblend ($foreground, $background) {
-      $foreground-hsv: color-to-hsv($foreground);
-      $background-hsv: color-to-hsv($background);
-
-      $bm-hsv: nth($foreground-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3);
-      $bm-color: hsv-to-color($bm-hsv);
-
-      @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
-    }
-
-    //--------------------------------
-    // Dissolve
-    //--------------------------------
-    @function blend-dissolve ($foreground, $background) {
-      // The Dissolve blend mode acts on transparent and partially transparent pixels
-      // it treats transparency as a pixel pattern and applies a diffusion dither pattern.
-      // @see http://photoblogstop.k-com/photoshop/photoshop-blend-modes-explained
-      @return $foreground;
-    }
-
-    //--------------------------------
-    // Divide
-    //--------------------------------
-    @function blend-divide ($foreground, $background) {
-      $bm-red: blend-divide-colors(red($foreground), red($background));
-      $bm-green: blend-divide-colors(green($foreground), green($background));
-      $bm-blue:blend-divide-colors(blue($foreground), blue($background));
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-    @function blend-divide-colors($foreground, $background) {
-      @return min((($background / 255) / ($foreground / 255)) * 255, 255);
-    }
-
-    //--------------------------------
-    // Hue
-    //--------------------------------
-    @function blend-hue ($foreground, $background) {
-      $foreground-hsv: color-to-hsv($foreground);
-      $background-hsv: color-to-hsv($background);
-
-      $bm-hsv: nth($foreground-hsv, 1), nth($background-hsv, 2), nth($background-hsv, 3);
-      $bm-color: hsv-to-color($bm-hsv);
-
-      @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
-    }
-
-    //--------------------------------
-    // Luminosity
-    //--------------------------------
-    @function blend-luminosity ($foreground, $background) {
-      $foreground-hsv: color-to-hsv($foreground);
-      $background-hsv: color-to-hsv($background);
-
-      $bm-hsv: nth($background-hsv, 1), nth($background-hsv, 2), nth($foreground-hsv, 3);
-      $bm-color: hsv-to-color($bm-hsv);
-
-      @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
-    }
-
-    //--------------------------------
-    // Saturation
-    //--------------------------------
-    @function blend-saturation ($foreground, $background) {
-      $foreground-hsv: color-to-hsv($foreground);
-      $background-hsv: color-to-hsv($background);
-
-      $bm-hsv: nth($background-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3);
-      $bm-color: hsv-to-color($bm-hsv);
-
-      @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
-    }
-
-    //--------------------------------
-    // Subtract
-    //--------------------------------
-    @function blend-subtract ($foreground, $background) {
-      $bm-red: max(red($background) - red($foreground), 0);
-      $bm-green: max(green($background) - green($foreground), 0);
-      $bm-blue: max(blue($background) - blue($foreground), 0);
-
-      @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
-    }
-
-    //--------------------------------
-    // HSL and HSV
-    //--------------------------------
-    // @see https://gist.k-github.k-com/1069204
-    @function hsv-to-hsl($h, $s: 0, $v: 0) {
-      @if type-of($h) == 'list' {
-        $v: nth($h, 3);
-        $s: nth($h, 2);
-        $h: nth($h, 1);
-      }
-
-      @if unit($h) == 'deg' {
-        $h: 3.1415 * 2 * ($h / 360deg);
-      }
-      @if unit($s) == '%' {
-        $s: 0 + ($s / 100%);
-      }
-      @if unit($v) == '%' {
-        $v: 0 + ($v / 100%);
-      }
-
-      $ss: $s * $v;
-      $ll: (2 - $s) * $v;
-
-      @if $ll <= 1 and $ll != 0 {
-        $ss: $ss / $ll;
-      } @else if ($ll == 2) {
-        $ss: 0;
-      } @else {
-        $ss: $ss / (2 - $ll);
-      }
-
-      $ll: $ll / 2;
-
-      @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $ss))), percentage(max(0, min(1, $ll)));
-    }
-
-    @function hsl-to-hsv($h, $ss: 0, $ll: 0) {
-      @if type-of($h) == 'list' {
-        $ll: nth($h, 3);
-        $ss: nth($h, 2);
-        $h: nth($h, 1);
-      } @else if type-of($h) == 'color' {
-        $ll: lightness($h);
-        $ss: saturation($h);
-        $h: hue($h);
-      }
-
-      @if unit($h) == 'deg' {
-        $h: 3.1415 * 2 * ($h / 360deg);
-      }
-      @if unit($ss) == '%' {
-        $ss: 0 + ($ss / 100%);
-      }
-      @if unit($ll) == '%' {
-        $ll: 0 + ($ll / 100%);
-      }
-
-      $ll: $ll * 2;
-
-      @if $ll <= 1 {
-        $ss: $ss * $ll;
-      } @else {
-        $ss: $ss * (2 - $ll);
-      }
-
-      $v: ($ll + $ss) / 2;
-      $s: if($ll + $ss == 0, 0, (2 * $ss) / ($ll + $ss));
-
-      @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $s))), percentage(max(0, min(1, $v)));
-    }
-
-    @function color-to-hsv($color) {
-      @return hsl-to-hsv($color);
-    }
-
-    @function hsv-to-color($h, $s: 0, $v: 0) {
-      $hsl: hsv-to-hsl($h, $s, $v);
-      @return hsl(nth($hsl, 1), nth($hsl, 2), nth($hsl, 3));
-    }

src/mixins/appearance/_all.scss

@@ -24,9 +24,6 @@
     @if ( $what == selected-header ) {
         @include appearance_selected-header;
     }
-    @if ( $what == disabled-header ) {
-        @include appearance_disabled-header;
-    }
 
 
     // Button
@@ -36,11 +33,8 @@
     @if ( $what == hovered-button ) {
         @include appearance_hovered-button;
     }
-    @if ( $what == active-button ) {
-        @include appearance_active-button;
-    }
-    @if ( $what == disabled-button ) {
-        @include appearance_disabled-button;
+    @if ( $what == pressed-button ) {
+        @include appearance_pressed-button;
     }
 
 
@@ -51,11 +45,8 @@
     @if ( $what == hovered-primary-button ) {
         @include appearance_hovered-primary-button;
     }
-    @if ( $what == active-primary-button ) {
-        @include appearance_active-primary-button;
-    }
-    @if ( $what == disabled-primary-button ) {
-        @include appearance_disabled-primary-button;
+    @if ( $what == pressed-primary-button ) {
+        @include appearance_pressed-primary-button;
     }
 
 
@@ -69,9 +60,6 @@
     @if ( $what == focused-input ) {
         @include appearance_focused-input;
     }
-    @if ( $what == disabled-input ) {
-        @include appearance_disabled-input;
-    }
 
 
     // Node
@@ -84,9 +72,6 @@
     @if ( $what == selected-node ) {
         @include appearance_selected-node;
     }
-    @if ( $what == disabled-node ) {
-        @include appearance_disabled-node;
-    }
 
 
     // List item
@@ -99,8 +84,5 @@
     @if ( $what == selected-list-item ) {
         @include appearance_selected-list-item;
     }
-    @if ( $what == disabled-list-item ) {
-        @include appearance_disabled-list-item;
-    }
 
 }

src/mixins/appearance/_button.scss

@@ -3,53 +3,41 @@ $_button-imported: false !default;
 @if ( $_button-imported == false ) {
 
     %appearance_button {
-        // color: $button-color;
+        // color: $button-text;
         // background-color: $button-bg;
         // border-color: $button-border;
         // @include linear-gradient( $button-gradient );
     }
     %appearance_hovered-button {
-        // color: $button-hovered-color;
+        // color: $button-hovered-text;
         // background-color: $button-hovered-bg;
         // border-color: $button-hovered-border;
         // @include linear-gradient( $button-hovered-gradient );
     }
-    %appearance_active-button {
-        // color: $button-active-color;
-        // background-color: $button-active-bg;
-        // border-color: $button-active-border;
-        // @include linear-gradient( $button-active-gradient );
-    }
-    %appearance_disabled-button {
-        // color: $button-disabled-color;
-        // background-color: $button-disabled-bg;
-        // border-color: $button-disabled-border;
-        // @include linear-gradient( $button-disabled-gradient );
+    %appearance_pressed-button {
+        // color: $button-pressed-text;
+        // background-color: $button-pressed-bg;
+        // border-color: $button-pressed-border;
+        // @include linear-gradient( $button-pressed-gradient );
     }
 
     %appearance_primary-button {
-        // color: $primary-button-color;
+        // color: $primary-button-text;
         // background-color: $primary-button-bg;
         // border-color: $primary-button-border;
         // @include linear-gradient( $primary-button-gradient );
     }
     %appearance_hovered-primary-button {
-        // color: $primary-button-hovered-color;
+        // color: $primary-button-hovered-text;
         // background-color: $primary-button-hovered-bg;
         // border-color: $primary-button-hovered-border;
         // @include linear-gradient( $primary-button-hovered-gradient );
     }
-    %appearance_active-primary-button {
-        // color: $primary-button-active-color;
-        // background-color: $primary-button-active-bg;
-        // border-color: $primary-button-active-border;
-        // @include linear-gradient( $primary-button-active-gradient );
-    }
-    %appearance_disabled-primary-button {
-        // color: $primary-button-disabled-color;
-        // background-color: $primary-button-disabled-bg;
-        // border-color: $primary-button-disabled-border;
-        // @include linear-gradient( $primary-button-disabled-gradient );
+    %appearance_pressed-primary-button {
+        // color: $primary-button-pressed-text;
+        // background-color: $primary-button-pressed-bg;
+        // border-color: $primary-button-pressed-border;
+        // @include linear-gradient( $primary-button-pressed-gradient );
     }
 
     $_button-imported: true;
@@ -59,10 +47,8 @@ $_button-imported: false !default;
 
 @mixin appearance_button { @extend %appearance_button };
 @mixin appearance_hovered-button { @extend %appearance_hovered-button };
-@mixin appearance_active-button { @extend %appearance_active-button };
-@mixin appearance_disabled-button { @extend %appearance_disabled-button };
+@mixin appearance_pressed-button { @extend %appearance_pressed-button };
 
 @mixin appearance_primary-button { @extend %appearance_primary-button };
 @mixin appearance_hovered-primary-button { @extend %appearance_hovered-primary-button };
-@mixin appearance_active-primary-button { @extend %appearance_active-primary-button };
-@mixin appearance_disabled-primary-button { @extend %appearance_disabled-primary-button };
+@mixin appearance_pressed-primary-button { @extend %appearance_pressed-primary-button };

src/mixins/appearance/_input.scss

@@ -17,11 +17,6 @@ $_input-imported: false !default;
         // background-color: $input-active-bg;
         // border-color: $input-active-border;
     }
-    %appearance_disabled-input {
-        // color: $input-disabled-color;
-        // background-color: $input-disabled-bg;
-        // border-color: $input-disabled-border;
-    }
 
     $_input-imported: true;
 
@@ -31,4 +26,3 @@ $_input-imported: false !default;
 @mixin appearance_input { @extend %appearance_input; }
 @mixin appearance_hovered-input { @extend %appearance_hovered-input; }
 @mixin appearance_focused-input { @extend %appearance_focused-input; }
-@mixin appearance_disabled-input { @extend %appearance_disabled-input; }

src/mixins/appearance/_node.scss

@@ -20,12 +20,6 @@ $_node-imported: false !default;
         // border-color: $node-selected-border;
         // @include linear-gradient( $node-selected-gradient );
     }
-    %appearance_disabled-node {
-        // color: $node-disabled-color;
-        // background-color: $node-disabled-bg;
-        // border-color: $node-disabled-border;
-        // @include linear-gradient( $node-disabled-gradient );
-    }
 
     %appearance_list-item {
         // color: $list-item-color;
@@ -39,10 +33,6 @@ $_node-imported: false !default;
         // color: $list-item-selected-color;
         // background-color: $list-item-selected-bg;
     }
-    %appearance_disabled-list-item {
-        // color: $list-item-disabled-color;
-        // background-color: $list-item-disabled-bg;
-    }
 
     $_node-imported: true;
 
@@ -52,9 +42,7 @@ $_node-imported: false !default;
 @mixin appearance_node { @extend %appearance_node };
 @mixin appearance_hovered-node { @extend %appearance_hovered-node };
 @mixin appearance_selected-node { @extend %appearance_selected-node };
-@mixin appearance_disabled-node { @extend %appearance_disabled-node };
 
 @mixin appearance_list-item { @extend %appearance_list-item };
 @mixin appearance_hovered-list-item { @extend %appearance_hovered-list-item };
 @mixin appearance_selected-list-item { @extend %appearance_selected-list-item };
-@mixin appearance_disabled-list-item { @extend %appearance_disabled-list-item };

src/mixins/appearance/_panel.scss

@@ -31,12 +31,6 @@ $_panel-imported: false !default;
         // border-color: $header-selected-border;
         // @include linear-gradient( $header-selected-gradient );
     }
-    %appearance_disabled-header {
-        // color: $header-disabled-color;
-        // background-color: $header-disabled-bg;
-        // border-color: $header-disabled-border;
-        // @include linear-gradient( $header-disabled-gradient );
-    }
 
     $_panel-imported: true;
 
@@ -49,4 +43,3 @@ $_panel-imported: false !default;
 @mixin appearance_header { @extend %appearance_header };
 @mixin appearance_hovered-header { @extend %appearance_hovered-header };
 @mixin appearance_selected-header { @extend %appearance_selected-header };
-@mixin appearance_disabled-header { @extend %appearance_disabled-header };

src/mixins/core/_all.scss

@@ -0,0 +1,3 @@
+@import  "import-once";
+@import  "placeholder-selectors";
+@import  "data-uri";

src/mixins/utils/_all.scss

@@ -1 +1,3 @@
-@import "color-maps";
+@import "decoration";
+@import "compact";
+@import "blend-modes";

src/mixins/utils/_blend-modes.scss

@@ -0,0 +1,531 @@
+// SCSS blend modes, https://github.k-com/heygrady/scss-blend-modes
+
+// Import the Compass Plugin
+//--------------------------------
+// Normal
+//--------------------------------
+@function blend-normal ($foreground, $background) {
+    $opacity: opacity($foreground);
+    $background-opacity: opacity($background);
+
+    // calculate opacity
+    $bm-red: red($foreground) * $opacity + red($background) * $background-opacity * (1 - $opacity);
+    $bm-green: green($foreground) * $opacity + green($background) * $background-opacity * (1 - $opacity);
+    $bm-blue: blue($foreground) * $opacity + blue($background) * $background-opacity * (1 - $opacity);
+    @return rgb($bm-red, $bm-green, $bm-blue);
+}
+
+//--------------------------------
+// Multiply
+//--------------------------------
+@function blend-multiply ($foreground, $background) {
+    $bm-red: red($background) * red($foreground) / 255;
+    $bm-green: green($background) * green($foreground) / 255;
+    $bm-blue: blue($background) * blue($foreground) / 255;
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Lighten
+//--------------------------------
+@function blend-lighten ($foreground, $background) {
+    $bm-red: blend-lighten-color(red($foreground), red($background));
+    $bm-green: blend-lighten-color(green($foreground), green($background));
+    $bm-blue: blend-lighten-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+@function blend-lighten-color($foreground, $background) {
+    @if $background > $foreground {
+        $foreground: $background;
+    }
+    @return $foreground;
+}
+
+//--------------------------------
+// Darken
+//--------------------------------
+@function blend-darken ($foreground, $background) {
+    $bm-red: blend-darken-color(red($foreground), red($background));
+    $bm-green: blend-darken-color(green($foreground), green($background));
+    $bm-blue: blend-darken-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+@function blend-darken-color($foreground, $background) {
+    @if $background < $foreground {
+        $foreground: $background;
+    }
+    @return $foreground;
+}
+
+//--------------------------------
+// Darker Color
+//--------------------------------
+@function blend-darkercolor ($foreground, $background) {
+    $bm-red: red($foreground);
+    $bm-green: green($foreground);
+    $bm-blue: blue($foreground);
+    $background-red: red($background);
+    $background-green: green($background);
+    $background-blue: blue($background);
+
+    @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 <= $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 {
+        $bm-red: $background-red;
+        $bm-green: $background-green;
+        $bm-blue: $background-blue;
+    }
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Lighter Color
+//--------------------------------
+@function blend-lightercolor ($foreground, $background) {
+    $bm-red: red($foreground);
+    $bm-green: green($foreground);
+    $bm-blue: blue($foreground);
+    $background-red: red($background);
+    $background-green: green($background);
+    $background-blue: blue($background);
+
+    @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 > $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 {
+        $bm-red: $background-red;
+        $bm-green: $background-green;
+        $bm-blue: $background-blue;
+    }
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Linear Dodge
+//--------------------------------
+@function blend-lineardodge ($foreground, $background) {
+    $bm-red: blend-lineardodge-color(red($foreground), red($background));
+    $bm-green: blend-lineardodge-color(green($foreground), green($background));
+    $bm-blue: blend-lineardodge-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+@function blend-lineardodge-color($foreground, $background) {
+    @if $background + $foreground > 255 {
+        $foreground: 255;
+    }
+    @else {
+        $foreground: $background + $foreground;
+    }
+    @return $foreground;
+}
+
+//--------------------------------
+// Linear Burn
+//--------------------------------
+@function blend-linearburn ($foreground, $background) {
+    $bm-red: blend-linearburn-color(red($foreground), red($background));
+    $bm-green: blend-linearburn-color(green($foreground), green($background));
+    $bm-blue: blend-linearburn-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+@function blend-linearburn-color($foreground, $background) {
+    @if $background + $foreground < 255 {
+        $foreground: 0;
+    }
+    @else {
+        $foreground: $background + $foreground - 255;
+    }
+    @return $foreground;
+}
+
+//--------------------------------
+// Difference
+//--------------------------------
+@function blend-difference ($foreground, $background) {
+    $bm-red: abs(red($background) - red($foreground));
+    $bm-green: abs(green($background) - green($foreground));
+    $bm-blue: abs(blue($background) - blue($foreground));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Screen
+//--------------------------------
+@function blend-screen ($foreground, $background) {
+    $bm-red: blend-screen-color(red($foreground), red($background));
+    $bm-green: blend-screen-color(green($foreground), green($background));
+    $bm-blue: blend-screen-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+@function blend-screen-color($foreground, $background) {
+    @return (255 - ( ( (255 - $foreground) * (255 - $background)) / 256));
+}
+
+//--------------------------------
+// Exclusion
+//--------------------------------
+@function blend-exclusion ($foreground, $background) {
+    $bm-red: blend-exclusion-color(red($foreground), red($background));
+    $bm-green: blend-exclusion-color(green($foreground), green($background));
+    $bm-blue: blend-exclusion-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+@function blend-exclusion-color($foreground, $background) {
+    @return $background - ($background * (2 / 255) - 1) * $foreground;
+}
+
+//--------------------------------
+// Overlay
+//--------------------------------
+@function blend-overlay ($foreground, $background) {
+    $bm-red: blend-overlay-color(red($foreground), red($background));
+    $bm-green: blend-overlay-color(green($foreground), green($background));
+    $bm-blue: blend-overlay-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+@function blend-overlay-color($foreground, $background) {
+    @if $background <= 255 / 2 {
+        $foreground: (2 * $background * $foreground) / 255;
+    } @else {
+        $foreground: 255 - (255 - 2 * ($background - (255 / 2))) * (255 - $foreground) / 255;
+    }
+    @return $foreground;
+}
+
+//--------------------------------
+// Soft Light
+//--------------------------------
+@function blend-softlight ($foreground, $background) {
+    $bm-red: blend-softlight-color(red($foreground), red($background));
+    $bm-green: blend-softlight-color(green($foreground), green($background));
+    $bm-blue: blend-softlight-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+@function blend-softlight-color($foreground, $background) {
+    @if $background < 128 {
+        $foreground: (($foreground / 2) + 64) * $background * (2 / 255);
+    } @else {
+        $foreground: 255 - (191 - ($foreground / 2)) * (255 - $background) * (2 / 255);
+    }
+    @return $foreground;
+}
+
+//--------------------------------
+// Hard Light
+//--------------------------------
+@function blend-hardlight ($foreground, $background) {
+    $bm-red: blend-hardlight-color(red($foreground), red($background));
+    $bm-green: blend-hardlight-color(green($foreground), green($background));
+    $bm-blue: blend-hardlight-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+@function blend-hardlight-color($foreground, $background) {
+    $tmp-blend: $foreground;
+    @if $tmp-blend < 128 {
+        $foreground: $background * $tmp-blend * (2 / 255);
+    } @else {
+        $foreground: 255 - (255-$background) * (255-$tmp-blend) * (2 / 255);
+    }
+    @return $foreground;
+}
+
+//--------------------------------
+// Color Dodge
+//--------------------------------
+@function blend-colordodge ($foreground, $background) {
+    $bm-red: blend-colordodge-color(red($foreground), red($background));
+    $bm-green: blend-colordodge-color(green($foreground), green($background));
+    $bm-blue: blend-colordodge-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+@function blend-colordodge-color($foreground, $background) {
+    $tmp: $background * 256 / (255 - $foreground);
+    @if $tmp > 255 or $foreground == 255 {
+        $foreground: 255;
+    } @else {
+        $foreground: $tmp;
+    }
+    @return $foreground;
+}
+
+//--------------------------------
+// Color Burn
+//--------------------------------
+@function blend-colorburn ($foreground, $background) {
+    $bm-red: blend-colorburn-color(red($foreground), red($background));
+    $bm-green: blend-colorburn-color(green($foreground), green($background));
+    $bm-blue: blend-colorburn-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+@function blend-colorburn-color($foreground, $background) {
+    $tmp: (255 - ((255 - $background) * 255) / $foreground);
+
+    // TODO: hacked to replicate photoshop
+    @if $foreground == 0 {
+        $foreground: 255;
+    } @elseif $tmp < 0 {
+        $foreground: 0;
+    } @else {
+        $foreground: $tmp;
+    }
+    @return $foreground;
+}
+
+//--------------------------------
+// Linear Light
+//--------------------------------
+@function blend-linearlight ($foreground, $background) {
+    $bm-red: blend-linearlight-color(red($foreground), red($background));
+    $bm-green: blend-linearlight-color(green($foreground), green($background));
+    $bm-blue: blend-linearlight-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+@function blend-linearlight-color($foreground, $background) {
+    @if $foreground < 128 {
+        $foreground: blend-linearburn-color($background, 2 * $foreground);
+    } @else {
+        $foreground: blend-lineardodge-color($background, 2 * ($foreground - 128));
+    }
+    @return $foreground;
+}
+
+//--------------------------------
+// Vivid Light
+//--------------------------------
+@function blend-vividlight ($foreground, $background) {
+    $bm-red: blend-vividlight-color(red($foreground), red($background));
+    $bm-green: blend-vividlight-color(green($foreground), green($background));
+    $bm-blue: blend-vividlight-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-vividlight-color($foreground, $background) {
+    @if $foreground < 128 {
+        $foreground: blend-colorburn-color(2 * $foreground, $background);
+    } @else {
+        $foreground: blend-colordodge-color(2 * ($foreground - 128), $background);
+    }
+    @return $foreground;
+}
+
+//--------------------------------
+// Pin Light
+//--------------------------------
+@function blend-pinlight ($foreground, $background) {
+    $bm-red:   blend-pinlight-color(red($foreground), red($background));
+    $bm-green: blend-pinlight-color(green($foreground), green($background));
+    $bm-blue:  blend-pinlight-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-pinlight-color($foreground, $background) {
+    @if $foreground < 128 {
+        $foreground: blend-darken-color($background, 2 * $foreground);
+    } @else {
+        $foreground: blend-lighten-color($background, 2 * ($foreground - 128));
+    }
+    @return $foreground;
+}
+
+//--------------------------------
+// Hard Mix
+//--------------------------------
+@function blend-hardmix ($foreground, $background) {
+    $bm-red: blend-hardmix-color(red($foreground), red($background));
+    $bm-green: blend-hardmix-color(green($foreground), green($background));
+    $bm-blue: blend-hardmix-color(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-hardmix-color($foreground, $background) {
+    $tmp: blend-vividlight-color($foreground, $background);
+    @if $tmp < 128 {
+        $foreground: 0;
+    } @else {
+        $foreground: 255;
+    }
+    @return $foreground;
+}
+
+
+// Unique to Photoshop
+
+//--------------------------------
+// Color Blend
+//--------------------------------
+@function blend-colorblend ($foreground, $background) {
+    $foreground-hsv: color-to-hsv($foreground);
+    $background-hsv: color-to-hsv($background);
+
+    $bm-hsv: nth($foreground-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3);
+    $bm-color: hsv-to-color($bm-hsv);
+
+    @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Dissolve
+//--------------------------------
+@function blend-dissolve ($foreground, $background) {
+    // The Dissolve blend mode acts on transparent and partially transparent pixels
+    // it treats transparency as a pixel pattern and applies a diffusion dither pattern.
+    // @see http://photoblogstop.k-com/photoshop/photoshop-blend-modes-explained
+    @return $foreground;
+}
+
+//--------------------------------
+// Divide
+//--------------------------------
+@function blend-divide ($foreground, $background) {
+    $bm-red: blend-divide-colors(red($foreground), red($background));
+    $bm-green: blend-divide-colors(green($foreground), green($background));
+    $bm-blue:blend-divide-colors(blue($foreground), blue($background));
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+@function blend-divide-colors($foreground, $background) {
+    @return min((($background / 255) / ($foreground / 255)) * 255, 255);
+}
+
+//--------------------------------
+// Hue
+//--------------------------------
+@function blend-hue ($foreground, $background) {
+    $foreground-hsv: color-to-hsv($foreground);
+    $background-hsv: color-to-hsv($background);
+
+    $bm-hsv: nth($foreground-hsv, 1), nth($background-hsv, 2), nth($background-hsv, 3);
+    $bm-color: hsv-to-color($bm-hsv);
+
+    @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Luminosity
+//--------------------------------
+@function blend-luminosity ($foreground, $background) {
+    $foreground-hsv: color-to-hsv($foreground);
+    $background-hsv: color-to-hsv($background);
+
+    $bm-hsv: nth($background-hsv, 1), nth($background-hsv, 2), nth($foreground-hsv, 3);
+    $bm-color: hsv-to-color($bm-hsv);
+
+    @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Saturation
+//--------------------------------
+@function blend-saturation ($foreground, $background) {
+    $foreground-hsv: color-to-hsv($foreground);
+    $background-hsv: color-to-hsv($background);
+
+    $bm-hsv: nth($background-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3);
+    $bm-color: hsv-to-color($bm-hsv);
+
+    @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Subtract
+//--------------------------------
+@function blend-subtract ($foreground, $background) {
+    $bm-red: max(red($background) - red($foreground), 0);
+    $bm-green: max(green($background) - green($foreground), 0);
+    $bm-blue: max(blue($background) - blue($foreground), 0);
+
+    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// HSL and HSV
+//--------------------------------
+// @see https://gist.k-github.k-com/1069204
+@function hsv-to-hsl($h, $s: 0, $v: 0) {
+    @if type-of($h) == 'list' {
+        $v: nth($h, 3);
+        $s: nth($h, 2);
+        $h: nth($h, 1);
+    }
+
+    @if unit($h) == 'deg' {
+        $h: 3.1415 * 2 * ($h / 360deg);
+    }
+    @if unit($s) == '%' {
+        $s: 0 + ($s / 100%);
+    }
+    @if unit($v) == '%' {
+        $v: 0 + ($v / 100%);
+    }
+
+    $ss: $s * $v;
+    $ll: (2 - $s) * $v;
+
+    @if $ll <= 1 and $ll != 0 {
+        $ss: $ss / $ll;
+    } @else if ($ll == 2) {
+        $ss: 0;
+    } @else {
+        $ss: $ss / (2 - $ll);
+    }
+
+    $ll: $ll / 2;
+
+    @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $ss))), percentage(max(0, min(1, $ll)));
+}
+
+@function hsl-to-hsv($h, $ss: 0, $ll: 0) {
+    @if type-of($h) == 'list' {
+        $ll: nth($h, 3);
+        $ss: nth($h, 2);
+        $h: nth($h, 1);
+    } @else if type-of($h) == 'color' {
+        $ll: lightness($h);
+        $ss: saturation($h);
+        $h: hue($h);
+    }
+
+    @if unit($h) == 'deg' {
+        $h: 3.1415 * 2 * ($h / 360deg);
+    }
+    @if unit($ss) == '%' {
+        $ss: 0 + ($ss / 100%);
+    }
+    @if unit($ll) == '%' {
+        $ll: 0 + ($ll / 100%);
+    }
+
+    $ll: $ll * 2;
+
+    @if $ll <= 1 {
+        $ss: $ss * $ll;
+    } @else {
+        $ss: $ss * (2 - $ll);
+    }
+
+    $v: ($ll + $ss) / 2;
+    $s: if($ll + $ss == 0, 0, (2 * $ss) / ($ll + $ss));
+
+    @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $s))), percentage(max(0, min(1, $v)));
+}
+
+@function color-to-hsv($color) {
+    @return hsl-to-hsv($color);
+}
+
+@function hsv-to-color($h, $s: 0, $v: 0) {
+    $hsl: hsv-to-hsl($h, $s, $v);
+    @return hsl(nth($hsl, 1), nth($hsl, 2), nth($hsl, 3));
+}

src/mixins/utils/_color-maps.scss

@@ -1,3 +0,0 @@
-// Calendar widget
-// $calendar-colors: ( $calendar-text, $calendar-bg, $calendar-border );
-// $calendar-header-color: ( $calendar-header-text, $calendar-header-bg, $calendar-header-border );

src/panelbar/_theme.scss

@@ -1,6 +1,5 @@
 @import '../base/states';
 @import './layout';
-@import '../mixins/blend-modes';
 
 $panelbar-color: $normal-text-color !default;
 $panelbar-border-color: rgba(0, 0, 0, .08) !default;

src/panelbar/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/popup/_theme.scss

@@ -1,4 +1,3 @@
-@import '../mixins/blend-modes';
 @import '../animation/main';
 @import '../base/states';
 @import './layout';

src/popup/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/progressbar/images/indeterminate.scss

@@ -1,7 +1,5 @@
-@import '../../mixins/import-once';
-@import '../../mixins/data-uri';
+@import '../../mixins/core/all';
 
 @include exports('indeterminate.gif') {
   @include register-data-uri('indeterminate.gif', 'data:image/gif;base64,R0lGODlhFgAWAJECAPDw8OTk5AAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBAACACwAAAAAFgAWAAACL4yPAcsNmZyESDp6bMNGM654DyeOWAmipJiyqweGWuy+Fg23s37zk38BboQf4qIAACH5BAUEAAIALAAAAAAWABYAAAIwBIKpYe231ntRTlfTxZlt03lf+IFdCWUoWbLj2cKvGstXKN6ubk94Tdv8ZkFe0VEAACH5BAUEAAIALAAAAAAWABYAAAIwhBGpG+fH4nuRTVfXhTltnn1G14ikiHToaapt+Far+7E1vZFlbl96LLvhJj8hzFEAACH5BAUEAAIALAAAAAAWABYAAAIwhB+pG+fI2HtRTljTxXmbrHgAqImkOILoaapt91ar67E1vdk5fpHNzaPoJr6Y7FAAACH5BAUEAAIALAAAAAAWABYAAAIvhG+hy4EPmoRINnosw0krHnkOJ45YCaKpB4ZaK8Ls+tKWXJOznp+736OogMGHqgAAIfkEBQQAAgAsAAAAABYAFgAAAi+Ej6HLgQ+ahEkyeuzFUSveeaD3caRjkqOaiqsGhlbMtvN72xO+6w3t8m2EC6CnAAAh+QQFBAACACwAAAAAFgAWAAACMAyOCcHtCp1kME1Z0X15bdp9YCYaodh5X1qy6LnCW6pe9CtPd5xj7vyzBXVDX69RAAAh+QQFBAACACwAAAAAFgAWAAACMIyBqWDtseJ7cU1X1cWZ7dN9YCZCodh5X1qy6LnCmxuTrzyl6qXf9kzjBXNDSjFQAAAh+QQFBAACACwAAAAAFgAWAAACLowNqQvnx+J7kU1X14U5bdQ1XxCOZGeWo/qxm3vBk0yhq93iL83pMw/y1YQYWAEAIfkEBQQAAgAsAAAAABYAFgAAAjCMH6DLgJ9ag0hOaizDWSseeaD3caQziqkGhlZLwqo5Y/H64pLM6hddg5x8P8rQUAAAIfkEBQQAAgAsAAAAABYAFgAAAjCMf6DLgB+ahEg2muzCRm/uKVwUjqEDlqk3klqrrhbMmrU82a8+8zl+8QWBQ8opUAAAOw==')
 }
-

src/progressbar/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/scrollview/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/slider/images/slider-h.scss

@@ -1,5 +1,4 @@
-@import '../../mixins/import-once';
-@import '../../mixins/data-uri';
+@import '../../mixins/core/all';
 
 @include exports('slider-h.gif') {
   @include register-data-uri('slider-h.gif', 'data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7')

src/slider/images/slider-v.scss

@@ -1,5 +1,4 @@
-@import '../../mixins/import-once';
-@import '../../mixins/data-uri';
+@import '../../mixins/core/all';
 
 @include exports('slider-v.gif') {
   @include register-data-uri('slider-v.gif', 'data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7')

src/slider/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/switch/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/tabstrip/_theme.scss

@@ -1,6 +1,5 @@
 @import '../base/states';
 @import './layout';
-@import '../mixins/blend-modes';
 
 $tabstrip-tabs-color: $accent !default;
 $tabstrip-background-color: $background !default;

src/tabstrip/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';

src/upload/main.scss

@@ -1,3 +1,3 @@
 @import '../variables';
-@import '../mixins/import-once';
+@import '../mixins/all';
 @import 'theme';