@kizmann/nano-ui 0.9.10 → 1.0.0

package/themes/macos/root/vars-dark.scss

@@ -1,33 +1,36 @@
+@use "sass:color";
+
 $color-white:           #ffffff !default;
 $color-black:           #111111 !default;
 
 $color-foreground:      $color-white !default;
 $color-background:      $color-black !default;
 
-$color-gray-05:         mix($color-foreground, $color-background, 0.05 * 100%) !default;
-$color-gray-10:         mix($color-foreground, $color-background, 0.10 * 100%) !default;
-$color-gray-15:         mix($color-foreground, $color-background, 0.15 * 100%) !default;
-$color-gray-20:         mix($color-foreground, $color-background, 0.20 * 100%) !default;
-$color-gray-25:         mix($color-foreground, $color-background, 0.25 * 100%) !default;
-$color-gray-30:         mix($color-foreground, $color-background, 0.30 * 100%) !default;
-$color-gray-35:         mix($color-foreground, $color-background, 0.35 * 100%) !default;
-$color-gray-40:         mix($color-foreground, $color-background, 0.40 * 100%) !default;
-$color-gray-45:         mix($color-foreground, $color-background, 0.45 * 100%) !default;
-$color-gray-50:         mix($color-foreground, $color-background, 0.50 * 100%) !default;
-$color-gray-55:         mix($color-foreground, $color-background, 0.55 * 100%) !default;
-$color-gray-60:         mix($color-foreground, $color-background, 0.60 * 100%) !default;
-$color-gray-65:         mix($color-foreground, $color-background, 0.65 * 100%) !default;
-$color-gray-70:         mix($color-foreground, $color-background, 0.70 * 100%) !default;
-$color-gray-75:         mix($color-foreground, $color-background, 0.75 * 100%) !default;
-$color-gray-80:         mix($color-foreground, $color-background, 0.80 * 100%) !default;
-$color-gray-85:         mix($color-foreground, $color-background, 0.85 * 100%) !default;
-$color-gray-90:         mix($color-foreground, $color-background, 0.90 * 100%) !default;
-$color-gray-95:         mix($color-foreground, $color-background, 0.95 * 100%) !default;
+$color-gray-05:         color.mix($color-foreground, $color-background, 0.05 * 100%) !default;
+$color-gray-10:         color.mix($color-foreground, $color-background, 0.10 * 100%) !default;
+$color-gray-15:         color.mix($color-foreground, $color-background, 0.15 * 100%) !default;
+$color-gray-20:         color.mix($color-foreground, $color-background, 0.20 * 100%) !default;
+$color-gray-25:         color.mix($color-foreground, $color-background, 0.25 * 100%) !default;
+$color-gray-30:         color.mix($color-foreground, $color-background, 0.30 * 100%) !default;
+$color-gray-35:         color.mix($color-foreground, $color-background, 0.35 * 100%) !default;
+$color-gray-40:         color.mix($color-foreground, $color-background, 0.40 * 100%) !default;
+$color-gray-45:         color.mix($color-foreground, $color-background, 0.45 * 100%) !default;
+$color-gray-50:         color.mix($color-foreground, $color-background, 0.50 * 100%) !default;
+$color-gray-55:         color.mix($color-foreground, $color-background, 0.55 * 100%) !default;
+$color-gray-60:         color.mix($color-foreground, $color-background, 0.60 * 100%) !default;
+$color-gray-65:         color.mix($color-foreground, $color-background, 0.65 * 100%) !default;
+$color-gray-70:         color.mix($color-foreground, $color-background, 0.70 * 100%) !default;
+$color-gray-75:         color.mix($color-foreground, $color-background, 0.75 * 100%) !default;
+$color-gray-80:         color.mix($color-foreground, $color-background, 0.80 * 100%) !default;
+$color-gray-85:         color.mix($color-foreground, $color-background, 0.85 * 100%) !default;
+$color-gray-90:         color.mix($color-foreground, $color-background, 0.90 * 100%) !default;
+$color-gray-95:         color.mix($color-foreground, $color-background, 0.95 * 100%) !default;
 
 $color-form:            $color-gray-05 !default;
 $color-input:           $color-gray-05 !default;
+$color-input-off:       $color-background !default;
 
-$color-secondary:       #ca62f0 !default;
+$color-secondary:       #d31f9d !default;
 $color-primary:         #2F89FE !default;
 
 $color-success:         #06C493 !default;
@@ -35,67 +38,67 @@ $color-warning:         #FFBF3F !default;
 $color-danger:          #F9536E !default;
 $color-info:            #4BD6F9 !default;
 
-$color-shadow:              mix(#000, $color-primary, 80%) !default;
+$color-shadow:              color.mix($color-black, $color-primary, 80%) !default;
 
 
 $color-white-light:         $color-white !default;
 $color-white-lighter:       $color-white !default;
 
-$color-white-dark:          mix($color-gray-50, $color-white, 5%) !default;
-$color-white-darker:        mix($color-gray-50, $color-white, 10%) !default;
+$color-white-dark:          color.mix($color-gray-50, $color-white, 5%) !default;
+$color-white-darker:        color.mix($color-gray-50, $color-white, 10%) !default;
 
-$color-black-light:         mix($color-gray-50, $color-black, 5%) !default;
-$color-black-lighter:       mix($color-gray-50, $color-black, 10%) !default;
+$color-black-light:         color.mix($color-gray-50, $color-black, 5%) !default;
+$color-black-lighter:       color.mix($color-gray-50, $color-black, 10%) !default;
 
 $color-black-dark:          $color-black !default;
 $color-black-darker:        $color-black !default;
 
 
-$color-primary-light:       lighten(mix($color-white, $color-primary, 10%), 5%) !default;
-$color-primary-lighter:     lighten(mix($color-white, $color-primary, 20%), 5%) !default;
+$color-primary-light:       color.adjust(color.mix($color-white, $color-primary, 10%), $lightness: 5%) !default;
+$color-primary-lighter:     color.adjust(color.mix($color-white, $color-primary, 20%), $lightness: 5%) !default;
 
-$color-primary-dark:        darken(mix($color-black, $color-primary, 10%), 5%) !default;
-$color-primary-darker:      darken(mix($color-black, $color-primary, 20%), 5%) !default;
+$color-primary-dark:        color.adjust(color.mix($color-black, $color-primary, 10%), $lightness: -5%) !default;
+$color-primary-darker:      color.adjust(color.mix($color-black, $color-primary, 20%), $lightness: -5%) !default;
 
 
-$color-secondary-light:     lighten(mix($color-white, $color-secondary, 10%), 5%) !default;
-$color-secondary-lighter:   lighten(mix($color-white, $color-secondary, 20%), 5%) !default;
+$color-secondary-light:     color.adjust(color.mix($color-white, $color-secondary, 10%), $lightness: 5%) !default;
+$color-secondary-lighter:   color.adjust(color.mix($color-white, $color-secondary, 20%), $lightness: 5%) !default;
 
-$color-secondary-dark:      darken(mix($color-black, $color-secondary, 10%), 5%) !default;
-$color-secondary-darker:    darken(mix($color-black, $color-secondary, 20%), 5%) !default;
+$color-secondary-dark:      color.adjust(color.mix($color-black, $color-secondary, 10%), $lightness: -5%) !default;
+$color-secondary-darker:    color.adjust(color.mix($color-black, $color-secondary, 20%), $lightness: -5%) !default;
 
 
-$color-success-light:       lighten(mix($color-white, $color-success, 10%), 5%) !default;
-$color-success-lighter:     lighten(mix($color-white, $color-success, 20%), 5%) !default;
+$color-success-light:       color.adjust(color.mix($color-white, $color-success, 10%), $lightness: 5%) !default;
+$color-success-lighter:     color.adjust(color.mix($color-white, $color-success, 20%), $lightness: 5%) !default;
 
-$color-success-dark:        darken(mix($color-black, $color-success, 10%), 5%) !default;
-$color-success-darker:      darken(mix($color-black, $color-success, 20%), 5%) !default;
+$color-success-dark:        color.adjust(color.mix($color-black, $color-success, 10%), $lightness: -5%) !default;
+$color-success-darker:      color.adjust(color.mix($color-black, $color-success, 20%), $lightness: -5%) !default;
 
 
-$color-warning-light:       lighten(mix($color-white, $color-warning, 10%), 5%) !default;
-$color-warning-lighter:     lighten(mix($color-white, $color-warning, 20%), 5%) !default;
+$color-warning-light:       color.adjust(color.mix($color-white, $color-warning, 10%), $lightness: 5%) !default;
+$color-warning-lighter:     color.adjust(color.mix($color-white, $color-warning, 20%), $lightness: 5%) !default;
 
-$color-warning-dark:        darken(mix($color-black, $color-warning, 10%), 5%) !default;
-$color-warning-darker:      darken(mix($color-black, $color-warning, 20%), 5%) !default;
+$color-warning-dark:        color.adjust(color.mix($color-black, $color-warning, 10%), $lightness: -5%) !default;
+$color-warning-darker:      color.adjust(color.mix($color-black, $color-warning, 20%), $lightness: -5%) !default;
 
 
-$color-danger-light:        lighten(mix($color-white, $color-danger, 10%), 5%) !default;
-$color-danger-lighter:      lighten(mix($color-white, $color-danger, 20%), 5%) !default;
+$color-danger-light:        color.adjust(color.mix($color-white, $color-danger, 10%), $lightness: 5%) !default;
+$color-danger-lighter:      color.adjust(color.mix($color-white, $color-danger, 20%), $lightness: 5%) !default;
 
-$color-danger-dark:         darken(mix($color-black, $color-danger, 10%), 5%) !default;
-$color-danger-darker:       darken(mix($color-black, $color-danger, 20%), 5%) !default;
+$color-danger-dark:         color.adjust(color.mix($color-black, $color-danger, 10%), $lightness: -5%) !default;
+$color-danger-darker:       color.adjust(color.mix($color-black, $color-danger, 20%), $lightness: -5%) !default;
 
-$color-info-light:          lighten(mix($color-white, $color-info, 10%), 5%) !default;
-$color-info-lighter:        lighten(mix($color-white, $color-info, 20%), 5%) !default;
+$color-info-light:          color.adjust(color.mix($color-white, $color-info, 10%), $lightness: 5%) !default;
+$color-info-lighter:        color.adjust(color.mix($color-white, $color-info, 20%), $lightness: 5%) !default;
 
-$color-info-dark:           darken(mix($color-black, $color-info, 10%), 5%) !default;
-$color-info-darker:         darken(mix($color-black, $color-info, 20%), 5%) !default;
+$color-info-dark:           color.adjust(color.mix($color-black, $color-info, 10%), $lightness: -5%) !default;
+$color-info-darker:         color.adjust(color.mix($color-black, $color-info, 20%), $lightness: -5%) !default;
 
-$color-background-light:    lighten(mix($color-white, $color-background, 10%), 5%) !default;
-$color-background-lighter:  lighten(mix($color-white, $color-background, 20%), 5%) !default;
+$color-background-light:    color.adjust(color.mix($color-white, $color-background, 10%), $lightness: 5%) !default;
+$color-background-lighter:  color.adjust(color.mix($color-white, $color-background, 20%), $lightness: 5%) !default;
 
-$color-background-dark:     darken(mix($color-black, $color-background, 10%), 5%) !default;
-$color-background-darker:   darken(mix($color-black, $color-background, 20%), 5%) !default;
+$color-background-dark:     color.adjust(color.mix($color-black, $color-background, 10%), $lightness: -5%) !default;
+$color-background-darker:   color.adjust(color.mix($color-black, $color-background, 20%), $lightness: -5%) !default;
 
 $xs-radius:                 2px !default;
 $sm-radius:                 4px !default;
@@ -184,7 +187,7 @@ $modal: (
         'default': (
                 'color': $color-foreground,
                 'border': $color-gray-10,
-                'header': mix($color-background, $color-form, 50%),
+                'header': color.mix($color-background, $color-form, 50%),
                 'body': $color-background,
                 'footer': $color-background,
         ),
@@ -197,25 +200,35 @@ $modal: (
         )
 ) !default;
 
+$drawer: (
+        'default': (
+                'color': $color-foreground,
+                'border': $color-gray-10,
+                'header': color.mix($color-background, $color-form, 50%),
+                'body': $color-background,
+                'footer': $color-background,
+        )
+) !default;
+
 $colors-tags: (
-        '0': mix($color-secondary, $color-secondary, 65%),
-        '1': mix($color-primary, $color-secondary, 65%),
-        '2': mix($color-danger, $color-secondary, 65%),
-        '3': mix($color-success, $color-secondary, 65%),
-        '4': mix($color-warning, $color-secondary, 65%),
-        '5': mix($color-primary, $color-success, 65%),
-        '6': mix($color-secondary, $color-success, 65%),
-        '7': mix($color-danger, $color-success, 65%),
-        '8': mix($color-success, $color-success, 65%),
-        '9': mix($color-warning, $color-success, 65%),
-        '10': mix($color-primary, $color-danger, 65%),
-        '11': mix($color-secondary, $color-danger, 65%),
-        '12': mix($color-danger, $color-danger, 65%),
-        '13': mix($color-success, $color-danger, 65%),
-        '14': mix($color-warning, $color-danger, 65%),
-        '15': mix($color-primary, $color-warning, 65%),
-        '16': mix($color-secondary, $color-warning, 65%),
-        '17': mix($color-danger, $color-warning, 65%),
-        '18': mix($color-success, $color-warning, 65%),
-        '19': mix($color-warning, $color-warning, 65%),
+        '0': color.mix($color-secondary, $color-secondary, 65%),
+        '1': color.mix($color-primary, $color-secondary, 65%),
+        '2': color.mix($color-danger, $color-secondary, 65%),
+        '3': color.mix($color-success, $color-secondary, 65%),
+        '4': color.mix($color-warning, $color-secondary, 65%),
+        '5': color.mix($color-primary, $color-success, 65%),
+        '6': color.mix($color-secondary, $color-success, 65%),
+        '7': color.mix($color-danger, $color-success, 65%),
+        '8': color.mix($color-success, $color-success, 65%),
+        '9': color.mix($color-warning, $color-success, 65%),
+        '10': color.mix($color-primary, $color-danger, 65%),
+        '11': color.mix($color-secondary, $color-danger, 65%),
+        '12': color.mix($color-danger, $color-danger, 65%),
+        '13': color.mix($color-success, $color-danger, 65%),
+        '14': color.mix($color-warning, $color-danger, 65%),
+        '15': color.mix($color-primary, $color-warning, 65%),
+        '16': color.mix($color-secondary, $color-warning, 65%),
+        '17': color.mix($color-danger, $color-warning, 65%),
+        '18': color.mix($color-success, $color-warning, 65%),
+        '19': color.mix($color-warning, $color-warning, 65%),
 ) !default;

package/themes/macos/root/vars-light.scss

@@ -1,33 +1,36 @@
+@use "sass:color";
+
 $color-white:           #ffffff !default;
 $color-black:           #111111 !default;
 
 $color-foreground:      $color-black !default;
 $color-background:      $color-white !default;
 
-$color-gray-05:         mix($color-foreground, $color-background, 0.05 * 100%) !default;
-$color-gray-10:         mix($color-foreground, $color-background, 0.10 * 100%) !default;
-$color-gray-15:         mix($color-foreground, $color-background, 0.15 * 100%) !default;
-$color-gray-20:         mix($color-foreground, $color-background, 0.20 * 100%) !default;
-$color-gray-25:         mix($color-foreground, $color-background, 0.25 * 100%) !default;
-$color-gray-30:         mix($color-foreground, $color-background, 0.30 * 100%) !default;
-$color-gray-35:         mix($color-foreground, $color-background, 0.35 * 100%) !default;
-$color-gray-40:         mix($color-foreground, $color-background, 0.40 * 100%) !default;
-$color-gray-45:         mix($color-foreground, $color-background, 0.45 * 100%) !default;
-$color-gray-50:         mix($color-foreground, $color-background, 0.50 * 100%) !default;
-$color-gray-55:         mix($color-foreground, $color-background, 0.55 * 100%) !default;
-$color-gray-60:         mix($color-foreground, $color-background, 0.60 * 100%) !default;
-$color-gray-65:         mix($color-foreground, $color-background, 0.65 * 100%) !default;
-$color-gray-70:         mix($color-foreground, $color-background, 0.70 * 100%) !default;
-$color-gray-75:         mix($color-foreground, $color-background, 0.75 * 100%) !default;
-$color-gray-80:         mix($color-foreground, $color-background, 0.80 * 100%) !default;
-$color-gray-85:         mix($color-foreground, $color-background, 0.85 * 100%) !default;
-$color-gray-90:         mix($color-foreground, $color-background, 0.90 * 100%) !default;
-$color-gray-95:         mix($color-foreground, $color-background, 0.95 * 100%) !default;
+$color-gray-05:         color.mix($color-foreground, $color-background, 0.05 * 100%) !default;
+$color-gray-10:         color.mix($color-foreground, $color-background, 0.10 * 100%) !default;
+$color-gray-15:         color.mix($color-foreground, $color-background, 0.15 * 100%) !default;
+$color-gray-20:         color.mix($color-foreground, $color-background, 0.20 * 100%) !default;
+$color-gray-25:         color.mix($color-foreground, $color-background, 0.25 * 100%) !default;
+$color-gray-30:         color.mix($color-foreground, $color-background, 0.30 * 100%) !default;
+$color-gray-35:         color.mix($color-foreground, $color-background, 0.35 * 100%) !default;
+$color-gray-40:         color.mix($color-foreground, $color-background, 0.40 * 100%) !default;
+$color-gray-45:         color.mix($color-foreground, $color-background, 0.45 * 100%) !default;
+$color-gray-50:         color.mix($color-foreground, $color-background, 0.50 * 100%) !default;
+$color-gray-55:         color.mix($color-foreground, $color-background, 0.55 * 100%) !default;
+$color-gray-60:         color.mix($color-foreground, $color-background, 0.60 * 100%) !default;
+$color-gray-65:         color.mix($color-foreground, $color-background, 0.65 * 100%) !default;
+$color-gray-70:         color.mix($color-foreground, $color-background, 0.70 * 100%) !default;
+$color-gray-75:         color.mix($color-foreground, $color-background, 0.75 * 100%) !default;
+$color-gray-80:         color.mix($color-foreground, $color-background, 0.80 * 100%) !default;
+$color-gray-85:         color.mix($color-foreground, $color-background, 0.85 * 100%) !default;
+$color-gray-90:         color.mix($color-foreground, $color-background, 0.90 * 100%) !default;
+$color-gray-95:         color.mix($color-foreground, $color-background, 0.95 * 100%) !default;
 
 $color-form:            $color-gray-05 !default;
 $color-input:           $color-white !default;
+$color-input-off:       rgba($color-gray-10, 0.5) !default;
 
-$color-secondary:       #ca62f0 !default;
+$color-secondary:       #d31f9d !default;
 $color-primary:         #2F89FE !default;
 
 $color-success:         #06C493 !default;
@@ -35,67 +38,67 @@ $color-warning:         #FFBF3F !default;
 $color-danger:          #F9536E !default;
 $color-info:            #4BD6F9 !default;
 
-$color-shadow:              mix(#777, $color-primary, 80%) !default;
+$color-shadow:              color.mix($color-black, $color-primary, 80%) !default;
 
 
 $color-white-light:         $color-white !default;
 $color-white-lighter:       $color-white !default;
 
-$color-white-dark:          mix($color-gray-50, $color-white, 5%) !default;
-$color-white-darker:        mix($color-gray-50, $color-white, 10%) !default;
+$color-white-dark:          color.mix($color-gray-50, $color-white, 5%) !default;
+$color-white-darker:        color.mix($color-gray-50, $color-white, 10%) !default;
 
-$color-black-light:         mix($color-gray-50, $color-black, 5%) !default;
-$color-black-lighter:       mix($color-gray-50, $color-black, 10%) !default;
+$color-black-light:         color.mix($color-gray-50, $color-black, 5%) !default;
+$color-black-lighter:       color.mix($color-gray-50, $color-black, 10%) !default;
 
 $color-black-dark:          $color-black !default;
 $color-black-darker:        $color-black !default;
 
 
-$color-primary-light:       lighten(mix($color-white, $color-primary, 10%), 5%) !default;
-$color-primary-lighter:     lighten(mix($color-white, $color-primary, 20%), 5%) !default;
+$color-primary-light:       color.adjust(color.mix($color-white, $color-primary, 10%), $lightness: 5%) !default;
+$color-primary-lighter:     color.adjust(color.mix($color-white, $color-primary, 20%), $lightness: 5%) !default;
 
-$color-primary-dark:        darken(mix($color-black, $color-primary, 10%), 5%) !default;
-$color-primary-darker:      darken(mix($color-black, $color-primary, 20%), 5%) !default;
+$color-primary-dark:        color.adjust(color.mix($color-black, $color-primary, 10%), $lightness: -5%) !default;
+$color-primary-darker:      color.adjust(color.mix($color-black, $color-primary, 20%), $lightness: -5%) !default;
 
 
-$color-secondary-light:     lighten(mix($color-white, $color-secondary, 10%), 5%) !default;
-$color-secondary-lighter:   lighten(mix($color-white, $color-secondary, 20%), 5%) !default;
+$color-secondary-light:     color.adjust(color.mix($color-white, $color-secondary, 10%), $lightness: 5%) !default;
+$color-secondary-lighter:   color.adjust(color.mix($color-white, $color-secondary, 20%), $lightness: 5%) !default;
 
-$color-secondary-dark:      darken(mix($color-black, $color-secondary, 10%), 5%) !default;
-$color-secondary-darker:    darken(mix($color-black, $color-secondary, 20%), 5%) !default;
+$color-secondary-dark:      color.adjust(color.mix($color-black, $color-secondary, 10%), $lightness: -5%) !default;
+$color-secondary-darker:    color.adjust(color.mix($color-black, $color-secondary, 20%), $lightness: -5%) !default;
 
 
-$color-success-light:       lighten(mix($color-white, $color-success, 10%), 5%) !default;
-$color-success-lighter:     lighten(mix($color-white, $color-success, 20%), 5%) !default;
+$color-success-light:       color.adjust(color.mix($color-white, $color-success, 10%), $lightness: 5%) !default;
+$color-success-lighter:     color.adjust(color.mix($color-white, $color-success, 20%), $lightness: 5%) !default;
 
-$color-success-dark:        darken(mix($color-black, $color-success, 10%), 5%) !default;
-$color-success-darker:      darken(mix($color-black, $color-success, 20%), 5%) !default;
+$color-success-dark:        color.adjust(color.mix($color-black, $color-success, 10%), $lightness: -5%) !default;
+$color-success-darker:      color.adjust(color.mix($color-black, $color-success, 20%), $lightness: -5%) !default;
 
 
-$color-warning-light:       lighten(mix($color-white, $color-warning, 10%), 5%) !default;
-$color-warning-lighter:     lighten(mix($color-white, $color-warning, 20%), 5%) !default;
+$color-warning-light:       color.adjust(color.mix($color-white, $color-warning, 10%), $lightness: 5%) !default;
+$color-warning-lighter:     color.adjust(color.mix($color-white, $color-warning, 20%), $lightness: 5%) !default;
 
-$color-warning-dark:        darken(mix($color-black, $color-warning, 10%), 5%) !default;
-$color-warning-darker:      darken(mix($color-black, $color-warning, 20%), 5%) !default;
+$color-warning-dark:        color.adjust(color.mix($color-black, $color-warning, 10%), $lightness: -5%) !default;
+$color-warning-darker:      color.adjust(color.mix($color-black, $color-warning, 20%), $lightness: -5%) !default;
 
 
-$color-danger-light:        lighten(mix($color-white, $color-danger, 10%), 5%) !default;
-$color-danger-lighter:      lighten(mix($color-white, $color-danger, 20%), 5%) !default;
+$color-danger-light:        color.adjust(color.mix($color-white, $color-danger, 10%), $lightness: 5%) !default;
+$color-danger-lighter:      color.adjust(color.mix($color-white, $color-danger, 20%), $lightness: 5%) !default;
 
-$color-danger-dark:         darken(mix($color-black, $color-danger, 10%), 5%) !default;
-$color-danger-darker:       darken(mix($color-black, $color-danger, 20%), 5%) !default;
+$color-danger-dark:         color.adjust(color.mix($color-black, $color-danger, 10%), $lightness: -5%) !default;
+$color-danger-darker:       color.adjust(color.mix($color-black, $color-danger, 20%), $lightness: -5%) !default;
 
-$color-info-light:          lighten(mix($color-white, $color-info, 10%), 5%) !default;
-$color-info-lighter:        lighten(mix($color-white, $color-info, 20%), 5%) !default;
+$color-info-light:          color.adjust(color.mix($color-white, $color-info, 10%), $lightness: 5%) !default;
+$color-info-lighter:        color.adjust(color.mix($color-white, $color-info, 20%), $lightness: 5%) !default;
 
-$color-info-dark:           darken(mix($color-black, $color-info, 10%), 5%) !default;
-$color-info-darker:         darken(mix($color-black, $color-info, 20%), 5%) !default;
+$color-info-dark:           color.adjust(color.mix($color-black, $color-info, 10%), $lightness: -5%) !default;
+$color-info-darker:         color.adjust(color.mix($color-black, $color-info, 20%), $lightness: -5%) !default;
 
-$color-background-light:    lighten(mix($color-white, $color-background, 10%), 5%) !default;
-$color-background-lighter:  lighten(mix($color-white, $color-background, 20%), 5%) !default;
+$color-background-light:    color.adjust(color.mix($color-white, $color-background, 10%), $lightness: 5%) !default;
+$color-background-lighter:  color.adjust(color.mix($color-white, $color-background, 20%), $lightness: 5%) !default;
 
-$color-background-dark:     darken(mix($color-black, $color-background, 10%), 5%) !default;
-$color-background-darker:   darken(mix($color-black, $color-background, 20%), 5%) !default;
+$color-background-dark:     color.adjust(color.mix($color-black, $color-background, 10%), $lightness: -5%) !default;
+$color-background-darker:   color.adjust(color.mix($color-black, $color-background, 20%), $lightness: -5%) !default;
 
 $xs-radius:                 2px !default;
 $sm-radius:                 4px !default;
@@ -184,7 +187,7 @@ $modal: (
         'default': (
                 'color': $color-foreground,
                 'border': $color-gray-10,
-                'header': mix($color-background, $color-form, 50%),
+                'header': color.mix($color-background, $color-form, 50%),
                 'body': $color-background,
                 'footer': $color-background,
         ),
@@ -197,25 +200,35 @@ $modal: (
         )
 ) !default;
 
+$drawer: (
+        'default': (
+                'color': $color-foreground,
+                'border': $color-gray-10,
+                'header': color.mix($color-background, $color-form, 50%),
+                'body': $color-background,
+                'footer': $color-background,
+        )
+) !default;
+
 $colors-tags: (
-        '0': mix($color-secondary, $color-secondary, 65%),
-        '1': mix($color-primary, $color-secondary, 65%),
-        '2': mix($color-danger, $color-secondary, 65%),
-        '3': mix($color-success, $color-secondary, 65%),
-        '4': mix($color-warning, $color-secondary, 65%),
-        '5': mix($color-primary, $color-success, 65%),
-        '6': mix($color-secondary, $color-success, 65%),
-        '7': mix($color-danger, $color-success, 65%),
-        '8': mix($color-success, $color-success, 65%),
-        '9': mix($color-warning, $color-success, 65%),
-        '10': mix($color-primary, $color-danger, 65%),
-        '11': mix($color-secondary, $color-danger, 65%),
-        '12': mix($color-danger, $color-danger, 65%),
-        '13': mix($color-success, $color-danger, 65%),
-        '14': mix($color-warning, $color-danger, 65%),
-        '15': mix($color-primary, $color-warning, 65%),
-        '16': mix($color-secondary, $color-warning, 65%),
-        '17': mix($color-danger, $color-warning, 65%),
-        '18': mix($color-success, $color-warning, 65%),
-        '19': mix($color-warning, $color-warning, 65%),
+        '0': color.mix($color-secondary, $color-secondary, 65%),
+        '1': color.mix($color-primary, $color-secondary, 65%),
+        '2': color.mix($color-danger, $color-secondary, 65%),
+        '3': color.mix($color-success, $color-secondary, 65%),
+        '4': color.mix($color-warning, $color-secondary, 65%),
+        '5': color.mix($color-primary, $color-success, 65%),
+        '6': color.mix($color-secondary, $color-success, 65%),
+        '7': color.mix($color-danger, $color-success, 65%),
+        '8': color.mix($color-success, $color-success, 65%),
+        '9': color.mix($color-warning, $color-success, 65%),
+        '10': color.mix($color-primary, $color-danger, 65%),
+        '11': color.mix($color-secondary, $color-danger, 65%),
+        '12': color.mix($color-danger, $color-danger, 65%),
+        '13': color.mix($color-success, $color-danger, 65%),
+        '14': color.mix($color-warning, $color-danger, 65%),
+        '15': color.mix($color-primary, $color-warning, 65%),
+        '16': color.mix($color-secondary, $color-warning, 65%),
+        '17': color.mix($color-danger, $color-warning, 65%),
+        '18': color.mix($color-success, $color-warning, 65%),
+        '19': color.mix($color-warning, $color-warning, 65%),
 ) !default;