@kizmann/nano-ui 0.9.10 → 1.0.0

package/src/root/vars.scss

@@ -1,103 +1,106 @@
+@use 'sass:color';
+
 $color-white:           #ffffff !default;
 $color-black:           #090b10 !default;
 
-$color-gray-05:         mix($color-black, $color-white, 0.05 * 100%) !default;
-$color-gray-10:         mix($color-black, $color-white, 0.10 * 100%) !default;
-$color-gray-15:         mix($color-black, $color-white, 0.15 * 100%) !default;
-$color-gray-20:         mix($color-black, $color-white, 0.20 * 100%) !default;
-$color-gray-25:         mix($color-black, $color-white, 0.25 * 100%) !default;
-$color-gray-30:         mix($color-black, $color-white, 0.30 * 100%) !default;
-$color-gray-35:         mix($color-black, $color-white, 0.35 * 100%) !default;
-$color-gray-40:         mix($color-black, $color-white, 0.40 * 100%) !default;
-$color-gray-45:         mix($color-black, $color-white, 0.45 * 100%) !default;
-$color-gray-50:         mix($color-black, $color-white, 0.50 * 100%) !default;
-$color-gray-55:         mix($color-black, $color-white, 0.55 * 100%) !default;
-$color-gray-60:         mix($color-black, $color-white, 0.60 * 100%) !default;
-$color-gray-65:         mix($color-black, $color-white, 0.65 * 100%) !default;
-$color-gray-70:         mix($color-black, $color-white, 0.70 * 100%) !default;
-$color-gray-75:         mix($color-black, $color-white, 0.75 * 100%) !default;
-$color-gray-80:         mix($color-black, $color-white, 0.80 * 100%) !default;
-$color-gray-85:         mix($color-black, $color-white, 0.85 * 100%) !default;
-$color-gray-90:         mix($color-black, $color-white, 0.90 * 100%) !default;
-$color-gray-95:         mix($color-black, $color-white, 0.95 * 100%) !default;
-
-$color-secondary:       #ca62f0 !default;
-$color-primary:         #6875ee !default;
+$color-foreground:      $color-white !default;
+$color-background:      $color-black !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-secondary:       #d31f9d !default;
+$color-primary:         #2F89FE !default;
 
 $color-success:         #06C493 !default;
 $color-warning:         #FFBF3F !default;
 $color-danger:          #F9536E !default;
 $color-info:            #4BD6F9 !default;
 
-$color-background:      #FAFAFB !default;
-
-$color-shadow:              mix($color-black, $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:                 2px !default;
-$md-radius:                 4px !default;
-$lg-radius:                 6px !default;
-$xl-radius:                 10px !default;
+$sm-radius:                 4px !default;
+$md-radius:                 6px !default;
+$lg-radius:                 8px !default;
+$xl-radius:                 12px !default;
 
 $form: (
     'xs': (
@@ -160,24 +163,24 @@ $colors: (
 ) !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/src/select/src/select/select.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-select {
@@ -131,10 +132,10 @@
 
 @each $suffix, $values in $form {
 
-    $-select-font: map-get($values, 'font');
-    $-select-size: map-get($values, 'size');
-    $-select-radius: map-get($values, 'radius');
-    $-select-ratio: map-get($values, 'ratio');
+    $-select-font: map.get($values, 'font');
+    $-select-size: map.get($values, 'size');
+    $-select-radius: map.get($values, 'radius');
+    $-select-ratio: map.get($values, 'ratio');
 
     .n-select--#{$suffix} {
         min-height: $-select-size;

package/src/slider/src/slider/slider.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-slider {
@@ -59,10 +60,10 @@
 
 @each $suffix, $values in $form {
 
-    $-slider-font: map-get($values, 'font');
-    $-slider-size: map-get($values, 'size');
-    $-slider-radius: map-get($values, 'radius');
-    $-slider-ratio: map-get($values, 'ratio');
+    $-slider-font: map.get($values, 'font');
+    $-slider-size: map.get($values, 'size');
+    $-slider-radius: map.get($values, 'radius');
+    $-slider-ratio: map.get($values, 'ratio');
 
     .n-slider--#{$suffix} {
         height: 32px;

package/src/switch/src/switch/switch.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-switch {
@@ -14,6 +15,7 @@
 }
 
 .n-switch__switch {
+    flex: 0 0 auto;
     position: relative;
     border-radius: 500px;
     border: 1px solid transparent;
@@ -32,10 +34,10 @@
 
 @each $suffix, $values in $form {
 
-    $-switch-font: map-get($values, 'font');
-    $-switch-size: map-get($values, 'size');
-    $-switch-radius: map-get($values, 'radius');
-    $-switch-ratio: map-get($values, 'ratio');
+    $-switch-font: map.get($values, 'font');
+    $-switch-size: map.get($values, 'size');
+    $-switch-radius: map.get($values, 'radius');
+    $-switch-ratio: map.get($values, 'ratio');
 
     .n-switch--#{$suffix} {
         min-height: $-switch-size;

package/src/table/src/table/table.scss

@@ -9,6 +9,21 @@
     border-radius: $md-radius + 2;
 }
 
+.n-table:before {
+    content: '\00a0';
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    height: 100%;
+    width: 100%;
+    background: transparent;
+    z-index: 50;
+    pointer-events: none;
+    border-radius: $md-radius + 2;
+    border: 1px solid transparent;
+}
+
 .n-table .n-table__header {
     border-radius: $md-radius + 2 $md-radius + 2 0 0;
 }

package/src/table/src/table-cell/table-cell.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-table-cell {
@@ -75,10 +76,10 @@
 
 @each $suffix, $values in $form {
 
-    $-table-font: map-get($values, 'font');
-    $-table-size: map-get($values, 'size');
-    $-table-radius: map-get($values, 'radius');
-    $-table-ratio: map-get($values, 'ratio');
+    $-table-font: map.get($values, 'font');
+    $-table-size: map.get($values, 'size');
+    $-table-radius: map.get($values, 'radius');
+    $-table-ratio: map.get($values, 'ratio');
 
     .n-draglist--#{$suffix} .n-table-cell--checkbox i {
         width: $-table-size - 16;

package/src/tabs/src/tabs/tabs.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-tabs {
@@ -77,10 +78,10 @@
 
 @each $suffix, $values in $form {
 
-    $-tabs-font: map-get($values, 'font');
-    $-tabs-size: map-get($values, 'size');
-    $-tabs-radius: map-get($values, 'radius');
-    $-tabs-ratio: map-get($values, 'ratio');
+    $-tabs-font: map.get($values, 'font');
+    $-tabs-size: map.get($values, 'size');
+    $-tabs-radius: map.get($values, 'radius');
+    $-tabs-ratio: map.get($values, 'ratio');
 
     $-tabs-spacer: $-tabs-size * $-tabs-ratio;
 

package/src/tabs/src/tabs-item/tabs-item.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-tabs-item {
@@ -16,10 +17,10 @@
 
 @each $suffix, $values in $form {
 
-    $-tabs-font: map-get($values, 'font');
-    $-tabs-size: map-get($values, 'size');
-    $-tabs-radius: map-get($values, 'radius');
-    $-tabs-ratio: map-get($values, 'ratio');
+    $-tabs-font: map.get($values, 'font');
+    $-tabs-size: map.get($values, 'size');
+    $-tabs-radius: map.get($values, 'radius');
+    $-tabs-ratio: map.get($values, 'ratio');
 
     .n-tabs--#{$suffix} .n-tabs-item {
         margin-top: $-tabs-size * $-tabs-ratio;

package/src/tags/src/tags-item/tags-item.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-tags-item {
@@ -26,10 +27,10 @@
 
 @each $suffix, $values in $form {
 
-    $-tags-item-font: map-get($values, 'font');
-    $-tags-item-size: map-get($values, 'size');
-    $-tags-item-radius: map-get($values, 'radius');
-    $-tags-item-ratio: map-get($values, 'ratio');
+    $-tags-item-font: map.get($values, 'font');
+    $-tags-item-size: map.get($values, 'size');
+    $-tags-item-radius: map.get($values, 'radius');
+    $-tags-item-ratio: map.get($values, 'ratio');
 
     .n-tags-item--#{$suffix} {
         border-radius: $-tags-item-radius;

package/src/textarea/src/textarea/textarea.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-textarea {
@@ -30,10 +31,10 @@
 
 @each $suffix, $values in $form {
 
-    $-textarea-font: map-get($values, 'font');
-    $-textarea-size: map-get($values, 'size');
-    $-textarea-radius: map-get($values, 'radius');
-    $-textarea-ratio: map-get($values, 'ratio');
+    $-textarea-font: map.get($values, 'font');
+    $-textarea-size: map.get($values, 'size');
+    $-textarea-radius: map.get($values, 'radius');
+    $-textarea-ratio: map.get($values, 'ratio');
 
     .n-textarea--#{$suffix} {
         font-size: $-textarea-font;

package/src/timepicker/src/timepicker/timepicker.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-timepicker {
@@ -120,10 +121,10 @@
 
 @each $suffix, $values in $form {
 
-    $-timepicker-font: map-get($values, 'font');
-    $-timepicker-size: map-get($values, 'size');
-    $-timepicker-radius: map-get($values, 'radius');
-    $-timepicker-ratio: map-get($values, 'ratio');
+    $-timepicker-font: map.get($values, 'font');
+    $-timepicker-size: map.get($values, 'size');
+    $-timepicker-radius: map.get($values, 'radius');
+    $-timepicker-ratio: map.get($values, 'ratio');
 
     .n-timepicker--#{$suffix} {
         min-height: $-timepicker-size;

package/src/timepicker/src/timepicker-panel/timepicker-panel.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-timepicker-panel {
@@ -36,10 +37,10 @@ flex: 1 0 auto;
 
 @each $suffix, $values in $form {
 
-    $-timepicker-panel-font: map-get($values, 'font');
-    $-timepicker-panel-size: map-get($values, 'size');
-    $-timepicker-panel-radius: map-get($values, 'radius');
-    $-timepicker-panel-ratio: map-get($values, 'ratio');
+    $-timepicker-panel-font: map.get($values, 'font');
+    $-timepicker-panel-size: map.get($values, 'size');
+    $-timepicker-panel-radius: map.get($values, 'radius');
+    $-timepicker-panel-ratio: map.get($values, 'ratio');
 
     .n-timepicker-panel--#{$suffix} {
         font-size: $-timepicker-panel-font;

package/src/transfer/src/transfer/transfer.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-transfer {
@@ -85,10 +86,10 @@
 
 @each $suffix, $values in $form {
 
-    $-transfer-font: map-get($values, 'font');
-    $-transfer-size: map-get($values, 'size');
-    $-transfer-radius: map-get($values, 'radius');
-    $-transfer-ratio: map-get($values, 'ratio');
+    $-transfer-font: map.get($values, 'font');
+    $-transfer-size: map.get($values, 'size');
+    $-transfer-radius: map.get($values, 'radius');
+    $-transfer-ratio: map.get($values, 'ratio');
 
     .n-transfer--#{$suffix} {
         font-size: $-transfer-font;

package/themes/macos/alert/src/alert/alert.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-alert-backdrop {
@@ -15,9 +16,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-alert-frame--#{$color} .n-alert__icon {
         color: $-color-base;

package/themes/macos/button/src/button/button.scss

@@ -1,10 +1,15 @@
+@use "sass:map";
 @import "../../../root/vars";
 
+.n-button.n-disabled {
+    opacity: 0.7;
+}
+
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     /**
      * Button primary

package/themes/macos/cascader/src/cascader/cascader.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-cascader {
@@ -6,7 +7,7 @@
 }
 
 .n-cascader.n-disabled {
-    background: rgba($color-gray-15, 0.3);
+    background: $color-input-off;
 }
 
 .n-cascader__clear,
@@ -34,9 +35,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
      .n-cascader--#{$color}:not(.n-disabled):hover,
      .n-cascader--#{$color}:not(.n-disabled).n-focus {

package/themes/macos/checkbox/src/checkbox/checkbox.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-checkbox__checkbox {
@@ -7,14 +8,14 @@
 }
 
 .n-checkbox.n-disabled .n-checkbox__checkbox  {
-    background: rgba($color-gray-15, 0.3);
+    background: $color-input-off;
 }
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     /**
      * Button primary

package/themes/macos/collapse/src/collapse/collapse.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-collapse {
@@ -14,8 +15,8 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
 }

package/themes/macos/collapse/src/collapse-item/collapse-item.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-collapse__header-icon {
@@ -6,9 +7,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-collapse--#{$color} .n-collapse__header .n-collapse__header-icon {
         color: $-color-base;

package/themes/macos/confirm/src/confirm/confirm.scss

@@ -1,10 +1,11 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-confirm--#{$color} .n-confirm__icon {
         color: $-color-base;

package/themes/macos/datepicker/src/datepicker/datepicker.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-datepicker {
@@ -6,7 +7,7 @@
 }
 
 .n-datepicker.n-disabled {
-    background: rgba($color-gray-15, 0.3);
+    background: $color-input-off;
 }
 
 .n-datepicker__seperator {
@@ -38,9 +39,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
      .n-datepicker--#{$color}:not(.n-disabled):hover,
      .n-datepicker--#{$color}:not(.n-disabled).n-focus {