@kizmann/nano-ui 1.0.14 → 1.1.0

package/themes/glossy/root/vars.scss

@@ -0,0 +1,233 @@
+@use "sass:color";
+
+$color-white:           #ffffff !default;
+$color-black:           #111111 !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-form:            $color-gray-05 !default;
+$color-input:           $color-background !default;
+$color-input-off:       $color-gray-05 !default;
+
+$color-secondary:       #d31f9d !default;
+$color-primary:         #6e63da !default;
+
+$color-success:         #06C493 !default;
+$color-warning:         #FFBF3F !default;
+$color-danger:          #F9536E !default;
+$color-info:            #4BD6F9 !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:          color.mix($color-gray-50, $color-white, 5%) !default;
+$color-white-darker:        color.mix($color-gray-50, $color-white, 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:       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:        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:     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:      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:       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:        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:       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:        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:        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:         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:          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:           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:    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:     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:                 4px !default;
+$sm-radius:                 6px !default;
+$md-radius:                 9px !default;
+$lg-radius:                 14px !default;
+$xl-radius:                 20px !default;
+
+$form: (
+        'xs': (
+                'size': 26px,
+                'font': 11px,
+                'radius': $xs-radius,
+                'ratio': 0.40,
+        ),
+        'sm': (
+                'size': 28px,
+                'font': 13px,
+                'radius': $sm-radius,
+                'ratio': 0.40,
+        ),
+        'md': (
+                'size': 32px,
+                'font': 15px,
+                'radius': $md-radius,
+                'ratio': 0.40,
+        ),
+        'lg': (
+                'size': 36px,
+                'font': 16px,
+                'radius': $lg-radius,
+                'ratio': 0.40,
+        ),
+) !default;
+
+$colors: (
+        'primary': (
+                'base': $color-primary,
+                'light': $color-primary-light,
+                'dark': $color-primary-dark
+        ),
+        'secondary': (
+                'base': $color-secondary,
+                'light': $color-secondary-light,
+                'dark': $color-secondary-dark
+        ),
+        'info': (
+                'base': $color-info,
+                'light': $color-info-light,
+                'dark': $color-info-dark
+        ),
+        'success': (
+                'base': $color-success,
+                'light': $color-success-light,
+                'dark': $color-success-dark
+        ),
+        'warning': (
+                'base': $color-warning,
+                'light': $color-warning-light,
+                'dark': $color-warning-dark
+        ),
+        'danger': (
+                'base': $color-danger,
+                'light': $color-danger-light,
+                'dark': $color-danger-dark
+        ),
+) !default;
+
+$popover: (
+        'default': (
+                'color': $color-foreground,
+                'border': $color-gray-15,
+                'header': $color-form,
+                'body': $color-form,
+                'footer': $color-form,
+        ),
+        'negative': (
+                'color': $color-background,
+                'border': $color-gray-95,
+                'header': $color-foreground,
+                'body': $color-foreground,
+                'footer': $color-foreground,
+        )
+) !default;
+
+$modal: (
+        'default': (
+                'color': $color-foreground,
+                'border': $color-gray-10,
+                'header': color.mix($color-background, $color-form, 50%),
+                'body': $color-background,
+                'footer': $color-background,
+        ),
+        'preview': (
+                'color': $color-white,
+                'border': $color-gray-95,
+                'header': $color-black,
+                'body': $color-black,
+                'footer': $color-black,
+        )
+) !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': 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%),
+) !default;

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

@@ -5,12 +5,36 @@
     opacity: 0.7;
 }
 
-.n-button--default:not(.n-button--link) {
-    color: $color-foreground;
-    background: rgba($color-foreground, 0.05);
+.n-button--default:not(.n-button--link,.n-button--glass) {
+    color: rgba($color-foreground, 0.8);
+    background: rgba($color-foreground, 0.1);
 }
 
-.n-button--default:not(.n-button--link):hover {
+.n-button--default:not(.n-button--link,.n-button--glass):hover {
+    color: rgba($color-foreground, 0.9);
+    background: rgba($color-foreground, 0.15);
+}
+
+.n-button--default:not(.n-button--link,.n-button--glass).n-disabled {
+    color: rgba($color-foreground, 0.8);
+    background: rgba($color-foreground, 0.1);
+}
+
+.n-button--default.n-button--link:not(.n-disabled) {
+    color: rgba($color-foreground, 0.8);
+}
+
+.n-button--default.n-button--link:not(.n-disabled):hover {
+    color: rgba($color-foreground, 0.9);
+}
+
+.n-button--default.n-button--glass:not(.n-disabled) {
+    color: rgba($color-foreground, 0.8);
+    background: rgba($color-foreground, 0.1);
+}
+
+.n-button--default.n-button--glass:not(.n-disabled):hover {
+    color: rgba($color-foreground, 0.9);
     background: rgba($color-foreground, 0.15);
 }
 
@@ -24,23 +48,23 @@
      * Button primary
      */
 
-    .n-button--#{$color}:not(.n-button--link) {
+    .n-button--#{$color}:not(.n-button--link,.n-button--glass) {
         color: $color-white;
         background: $-color-base;
         border-color: $-color-base;
     }
 
-    .n-button--#{$color}:not(.n-button--link):hover {
+    .n-button--#{$color}:not(.n-button--link,.n-button--glass):hover {
         background: $-color-light;
         border-color: $-color-light;
     }
 
-    .n-button--#{$color}:not(.n-button--link):focus {
+    .n-button--#{$color}:not(.n-button--link,.n-button--glass):focus {
         background: $-color-dark;
         border-color: $-color-dark;
     }
 
-    .n-button--#{$color}:not(.n-button--link).n-disabled {
+    .n-button--#{$color}:not(.n-button--link,.n-button--glass).n-disabled {
         background: $-color-base;
         border-color: $-color-base;
     }
@@ -57,4 +81,18 @@
         color: $-color-dark;
     }
 
+    .n-button--#{$color}:not(.n-disabled).n-button--glass {
+        color: $-color-base;
+        background: rgba($-color-base, 0.25);
+    }
+
+    .n-button--#{$color}:not(.n-disabled).n-button--glass:hover {
+        color: $-color-dark;
+        background: rgba($-color-base, 0.35);
+    }
+
+    .n-button--#{$color}:not(.n-disabled).n-button--glass:focus {
+        color: $-color-dark;
+    }
+
 }

package/themes/macos/form/src/form-frame/form-frame.scss

@@ -19,7 +19,7 @@
         background: $-color-base;
     }
 
-    .n-form-frame__menu--#{$color}.is-first {
+    .n-form-frame__menu--#{$color}.is-star {
         background: rgba($-color-base, 0.15);
     }
 
@@ -27,7 +27,7 @@
         color: $-color-base;
     }
 
-    .n-form-frame__menu--#{$color}.is-visible span {
+    .n-form-frame__menu--#{$color}.is-star span {
         color: $-color-base;
     }
 

package/themes/macos/index.scss

@@ -35,6 +35,7 @@
 @import "./rating/index";
 @import "./slider/index";
 @import "./drawer/index";
+@import "./preview/index";
 
 @import "./demo/index";
 

package/themes/macos/preview/index.scss

@@ -0,0 +1 @@
+@import "./src/preview-modal/preview-modal";

package/themes/macos/preview/src/preview-modal/preview-modal.scss

@@ -0,0 +1,28 @@
+@use 'sass:map';
+@import "../../../root/vars";
+
+.n-preview-modal {
+    background: rgba($color-black, 0.95);
+    backdrop-filter: blur(10px);
+    transition: opacity 0.3s;
+}
+
+.n-preview-modal__close,
+.n-preview-modal__prev,
+.n-preview-modal__next {
+    border-radius: 500px;
+    color: $color-white;
+    background: rgba($color-white, 0.25);
+    transition: background 0.2s;
+}
+
+.n-preview-modal__close:hover,
+.n-preview-modal__prev:hover,
+.n-preview-modal__next:hover {
+    background: rgba($color-white, 0.35);
+}
+
+.n-preview-modal .n-preview-frame {
+    background: transparent !important;
+}
+

package/themes/macos/scrollbar/src/scrollbar/scrollbar.scss

@@ -4,3 +4,4 @@
 .n-scrollbar-h:before {
     background: rgba($color-foreground, 0.4);
 }
+

package/themes/macos/table/src/table/table.scss

@@ -1,6 +1,11 @@
 @import "../../../root/vars";
 
+.n-table {
+    border-radius: $md-radius + 2;
+}
+
 .n-table:before {
+    border-radius: $md-radius + 2;
     border: 1px solid $color-gray-15;
 }