@mezzanine-ui/system 0.7.0 → 0.11.1

package/_system.scss

@@ -3,6 +3,7 @@
 @use './spacing';
 @use './typography';
 @use './z-index';
+@use './palette' as system-palette;
 
 @mixin common-variables($options: ()) {
   $motion: map.get($options, motion);
@@ -10,27 +11,31 @@
   $typography: map.get($options, typography);
   $z-index: map.get($options, z-index);
 
-  @if $motion == null {
+  @if not $motion {
     @include motion.variables();
   } @else {
     @include motion.variables($motion);
   }
 
-  @if $spacing == null {
+  @if not $spacing {
     @include spacing.variables();
   } @else {
     @include spacing.variables($spacing);
   }
 
-  @if $typography == null {
+  @if not $typography {
     @include typography.variables();
   } @else {
     @include typography.variables($typography);
   }
 
-  @if $z-index == null {
+  @if not $z-index {
     @include z-index.variables();
   } @else {
     @include z-index.variables($z-index);
   }
 }
+
+@mixin palette($mode: 'light', $palette: ()) {
+  @include system-palette.variables($mode, $palette);
+}

package/breakpoint/_breakpoint.scss

@@ -25,7 +25,7 @@ $breakpoint-names: (sm, md, lg, xl, xxl);
 
 @function get($breakpoint-name) {
   @if not is-valid-breakpoint-name($breakpoint-name) {
-    @error "Invalid breakpoint name #{$breakpoint-name}. Please choose one of #{$breakpoint-names}";
+    @error 'Invalid breakpoint name #{$breakpoint-name}. Please choose one of #{$breakpoint-names}';
   }
 
   @return map.get($breakpoints, $breakpoint-name);
@@ -33,7 +33,7 @@ $breakpoint-names: (sm, md, lg, xl, xxl);
 
 @mixin above($min) {
   @if not is-valid-breakpoint-name($min) {
-    @error "Invalid breakpoint name #{$min}. Please choose one of #{$breakpoint-names}";
+    @error 'Invalid breakpoint name #{$min}. Please choose one of #{$breakpoint-names}';
   }
 
   @media (min-width: get($min)) {
@@ -43,24 +43,24 @@ $breakpoint-names: (sm, md, lg, xl, xxl);
 
 @mixin below($max) {
   @if not is-valid-breakpoint-name($max) {
-    @error "Invalid breakpoint name #{$max}. Please choose one of #{$breakpoint-names}";
+    @error 'Invalid breakpoint name #{$max}. Please choose one of #{$breakpoint-names}';
   }
 
-  @media (max-width: get($max) - 1px) {
+  @media (max-width: (get($max) - 1px)) {
     @content;
   }
 }
 
 @mixin between($min: null, $max: null) {
-  @if $min == null and $max == null {
-    @error "Should provide at least one breakpoint";
+  @if not $min and not $max {
+    @error 'Should provide at least one breakpoint';
   }
 
-  @if $min == null {
+  @if not $min {
     @include below($max) {
       @content;
     }
-  } @else if $max == null {
+  } @else if not $max {
     @include above($min) {
       @content;
     }

package/motion/_motion.scss

@@ -35,7 +35,7 @@ $default-options: (
 
 @function duration($duration-name) {
   @if not is-duration-name-valid($duration-name) {
-    @error "Invalid duration name #{$duration-name}. Please choose one of #{$duration-names}";
+    @error 'Invalid duration name #{$duration-name}. Please choose one of #{$duration-names}';
   }
 
   @return var(--#{$prefix}-duration-#{$duration-name});
@@ -43,7 +43,7 @@ $default-options: (
 
 @function easing($easing-name) {
   @if not is-easing-name-valid($easing-name) {
-    @error "Invalid easing name #{$easing-name}. Please choose one of #{$easing-names}";
+    @error 'Invalid easing name #{$easing-name}. Please choose one of #{$easing-names}';
   }
 
   @return var(--#{$prefix}-easing-#{$easing-name});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/system",
-  "version": "0.7.0",
+  "version": "0.11.1",
   "description": "Design System for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {

package/palette/_palette.scss

@@ -9,7 +9,7 @@ $prefix: mzn-color;
 }
 
 @function _get-main-color-transformed-palette($color) {
-  $rgba: meta.get-function("rgba");
+  $rgba: meta.get-function('rgba');
 
   @return (
     #{$color}-hover-bg: (
@@ -39,7 +39,7 @@ $prefix: mzn-color;
 
 $main-color-names: (primary, secondary, error, warning, success);
 $color-names: list.flat-push(
-  list.flat-map($main-color-names, meta.get-function("_get-main-related-color-names")),
+  list.flat-map($main-color-names, meta.get-function('_get-main-related-color-names')),
   (
     text-primary,
     text-secondary,
@@ -111,14 +111,14 @@ $default-light-palette: map.assign(
     divider: #f2f2f2,
     overlay-bg: (
       from: action-active,
-      transformer: meta.get-function("rgba"),
+      transformer: meta.get-function('rgba'),
       args: (
         0.5,
       ),
     ),
     overlay-surface-bg: (
       from: surface,
-      transformer: meta.get-function("rgba"),
+      transformer: meta.get-function('rgba'),
       args: (
         0.9,
       ),
@@ -156,14 +156,14 @@ $default-dark-palette: map.assign(
     divider: #494949,
     overlay-bg: (
       from: action-active,
-      transformer: meta.get-function("rgba"),
+      transformer: meta.get-function('rgba'),
       args: (
         0.5,
       ),
     ),
     overlay-surface-bg: (
       from: surface,
-      transformer: meta.get-function("rgba"),
+      transformer: meta.get-function('rgba'),
       args: (
         0.9,
       ),
@@ -186,10 +186,10 @@ $default-palette: (
 
   @each $color-name, $color in $palette {
     @if not is-color-name-valid($color-name) {
-      @error "Invalid color name #{$color-name}. Please choose one of #{$color-names}";
+      @error 'Invalid color name #{$color-name}. Please choose one of #{$color-names}';
     }
 
-    @if meta.type-of($color) != "color" {
+    @if meta.type-of($color) != 'color' {
       $color: _transform-color-from-palette($palette, $color);
     }
 
@@ -199,7 +199,7 @@ $default-palette: (
 
 @function color($color-name) {
   @if not is-color-name-valid($color-name) {
-    @error "Invalid color name #{$color-name}. Please choose one of #{$color-names}";
+    @error 'Invalid color name #{$color-name}. Please choose one of #{$color-names}';
   }
 
   @return var(--#{$prefix}-#{$color-name});

package/typography/_typography.scss

@@ -12,7 +12,7 @@ $variants: (h1, h2, h3, h4, h5, h6, body1, body2, caption, button1, button2, but
 
 $default-options: (
   base: (
-    font-family: string.unquote("PingFang TC, Microsoft JhengHei"),
+    font-family: string.unquote('PingFang TC, Microsoft JhengHei'),
   ),
   h1: (
     font-size: px-to-rem(32px),
@@ -120,12 +120,12 @@ $default-options: (
 
 @function base-prop($prop, $fallback: null) {
   @if not is-baseprop-valid($prop) {
-    @error "Invalid base prop #{$prop}. Please choose one of #{$props}";
+    @error 'Invalid base prop #{$prop}. Please choose one of #{$props}';
   }
 
   $varname: --#{$prefix}-#{$prop};
 
-  @if $fallback == null {
+  @if not $fallback {
     @return var(#{$varname});
   }
 
@@ -135,16 +135,16 @@ $default-options: (
 // Get the css variable of the specific prop of variant.
 @function prop($variant, $prop, $fallback: null) {
   @if not is-variant-valid($variant) {
-    @error "Invalid variant #{$variant}. Please choose one of #{$variants}";
+    @error 'Invalid variant #{$variant}. Please choose one of #{$variants}';
   }
 
   @if not is-prop-valid($prop) {
-    @error "Invalid prop #{$prop}. Please choose one of #{$props}";
+    @error 'Invalid prop #{$prop}. Please choose one of #{$props}';
   }
 
   $varname: --#{$prefix}-#{$variant}-#{$prop};
 
-  @if $fallback == null {
+  @if not $fallback {
     @return var(#{$varname});
   }
 
@@ -154,7 +154,7 @@ $default-options: (
 @function font($variant, $exclude-props: ()) {
   @each $prop in $exclude-props {
     @if $prop == font-family or $prop == font-size or not is-prop-valid($prop) {
-      @error "Invalid prop #{$prop}. Please choose one of #{$props}";
+      @error 'Invalid prop #{$prop}. Please choose one of #{$props}';
     }
   }
 
@@ -163,7 +163,7 @@ $default-options: (
   $font-weight: if(list.includes($exclude-props, font-weight), null, prop($variant, font-weight));
 
   @if not list.includes($exclude-props, line-height) {
-    $font-size: $font-size/prop($variant, line-height);
+    $font-size: $font-size / prop($variant, line-height);
   }
 
   @return $font-weight $font-size $font-family;
@@ -173,7 +173,7 @@ $default-options: (
   // Only accept valid props.
   @each $prop in $exclude-props {
     @if not is-prop-valid($prop) {
-      @error "Invalid prop #{$prop}. Please choose one of #{$props}";
+      @error 'Invalid prop #{$prop}. Please choose one of #{$props}';
     }
   }
 
@@ -193,16 +193,16 @@ $default-options: (
 }
 
 @mixin partial-variables($options: ()) {
-  $base: map.get($options, "base");
-  $variants-options: map.omit($options, ("base"));
+  $base: map.get($options, 'base');
+  $variants-options: map.omit($options, ('base'));
 
-  @if $base != null {
+  @if $base {
     @each $prop, $value in $base {
       @if not is-base-prop-valid($prop) {
-        @error "Invalid base prop #{$prop}. Please choose one of #{$props}";
+        @error 'Invalid base prop #{$prop}. Please choose one of #{$props}';
       }
 
-      @if $value != null {
+      @if $value {
         --#{$prefix}-#{$prop}: #{$value};
       }
     }
@@ -211,15 +211,15 @@ $default-options: (
   @if $variants-options {
     @each $variant, $props-options in $variants-options {
       @if not is-variant-valid($variant) {
-        @error "Invalid variant #{$variant}. Please choose one of #{$variants}";
+        @error 'Invalid variant #{$variant}. Please choose one of #{$variants}';
       }
 
       @each $prop, $value in $props-options {
         @if not is-prop-valid($prop) {
-          @error "Invalid prop #{$prop}. Please choose one of #{$props}";
+          @error 'Invalid prop #{$prop}. Please choose one of #{$props}';
         }
 
-        @if $value != null {
+        @if $value {
           --#{$prefix}-#{$variant}-#{$prop}: #{$value};
         }
       }
@@ -229,17 +229,17 @@ $default-options: (
 
 @mixin variables($options: (), $defaults: $default-options) {
   $options: map.deep-merge($defaults, $options);
-  $variants-options: map.omit($options, ("base"));
+  $variants-options: map.omit($options, ('base'));
 
   @each $variant, $props-options in $variants-options {
     @if not is-variant-valid($variant) {
-      @error "Invalid variant #{$variant}. Please choose one of #{$variants}";
+      @error 'Invalid variant #{$variant}. Please choose one of #{$variants}';
     }
 
     @each $prop in $base-props {
       $value: map.get($options, $variant, $prop);
 
-      @if $value == null {
+      @if not $value {
         $options: map.set($options, $variant, $prop, base-prop($prop));
       }
     }

package/typography/_utils.scss

@@ -38,6 +38,6 @@
 // of defaulting to the container bottom when text is empty.
 @mixin zero-width-prefix() {
   &::before {
-    content: "\200b";
+    content: '\200b';
   }
 }

package/utils/_list.scss

@@ -14,8 +14,8 @@
   @each $value in $values {
     $pusher: if(
       meta.type-of($value) == list,
-      meta.get-function("join", $module: list),
-      meta.get-function("append", $module: list)
+      meta.get-function('join', $module: list),
+      meta.get-function('append', $module: list)
     );
     $list: meta.call($pusher, $list, $value);
   }

package/z-index/_z-index.scss

@@ -13,7 +13,7 @@ $orders: (modal, drawer, popover, feedback);
 
 @function get($name) {
   @if not list.includes($orders, $name) {
-    @error "Only accept #{$orders} for z-index";
+    @error 'Only accept #{$orders} for z-index';
   }
 
   @return var(--#{$prefix}-#{$name});